Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #387291

    Hi,

    I’ve searched through the forums but haven’t seen a really specific answer on how to implement some custom jquery into a page. Essentially I’m just trying to get something like this going: http://jqueryui.com/autocomplete/

    I’ve pasted the script into js/custom.js in my child-theme folder like so:

     $(function() {
    var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    
    ];
    $( "#tags" ).autocomplete({
    source: availableTags
    });
    });
    

    and added this to the functions.php file:

    function add_customjs() {
       wp_enqueue_script( 'customjs', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'add_customjs', 100 );

    I’ve used a code block on a specific page to add the actual HTML but it isn’t working.

    Any help would be greatly appreciated.

    #387337

    I’m also having trouble working out if I need to include any jquery ui files or if enfold has all the ones that are required.

    #387983

    Hey!

    We already enqueue jQuery and jQuery UI. You’ll need to switch all $ symbols to jQuery and you can echo it out it all out into the footer by adding this to the bottom of your functions.php file.

    add_action( 'wp_footer', 'enfold_customization_custom_js' );
    function enfold_customization_custom_js() {
    ?>
    <script type = "text/javascript">
     jQuery(function() {
    var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    
    ];
    jQuery( "#tags" ).autocomplete({
    source: availableTags
    });
    });
    </script>
    <?php
    }

    I’m not sure what your code is supposed to do or if it will work but that is how you can add it to every page.

    Best regards,
    Elliott

    #388439

    Thanks :)

    The code is just a simple autocomplete box, it can be seen in the jQuery demo page. Users start to type in and word and if matches any on the list it shows in a dropdown box.

    Unfortunatly I’ve added that code to the functions.php in my child-theme folder, and it’s not working. This is the HTML i’m adding in the code block which is the text box that should auto complete.

    <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
    </div>

    Also looking at the code you’ve provided, is that adding that code to the footer of every page? I don’t really need it on every page, just one.

    Thanks for your help so far!

    #388885

    Hi,

    Can you post the link to the page where you are trying this please? also, try wrapping your whole code in custom.js with this:

    (function($){
        $(window).load(function() {
        	// code here
        });
    })(jQuery);

    Regards,
    Josue

    #390084

    Unfortuantly I can’t link to the page as I’m currently building the site on my computer locally using XAMPP. However I think I’m overcomplicating things here.

    The page in question is a blank page created with the Enfold template. On that page I’ve added a ‘Code Block’ using the advanced editor in Enfold.In that code block I have placed the HTML as shown above which has created a text input on the page.

    Now I’ve inserted the code Josue has provided into my custom.js script located in enfold-child/js/custom.js
    However because I’m also using the code Elliot provided above at no point is the custom.js file being accessed (in my opinion though I’m quite a novice).

    Unfortunatly all these methods so far haven’t worked. Currently I’ve got:
    -Elliots code in my function.php – which I’ve then wrapped my section of with the code supplied by Josue. (I’ll insert that code at the bottom of the post).
    -The small bit of HTML in a code block on the required page.

    Just to further describe the situation here’s a section of the page showing the text field:

    Page
    Showing html of text input

    add_action( 'wp_footer', 'enfold_customization_custom_js' );
    function enfold_customization_custom_js() {
    ?>
    <script type = "text/javascript">
    (function(jQuery){
      jQuery(window).load(function() {
         jQuery(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
    
    jQuery( "#tags" ).autocomplete({
      source: availableTags
      });
    });
      });
    })(jQuery);
    </script>
    <?php
    }
    #390445

    Sorry for being a pain. I appreciate the help.

    #390469

    Hi!

    The problem may be that the custom.js file is never being included, add the following to child functions.php:

    function enqueue_custom_js() {
       wp_enqueue_script( 'avia-custom-js', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_custom_js', 100 );

    Reference:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Regards,
    Josue

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.