Tagged: jQuery
-
AuthorPosts
-
January 28, 2015 at 6:47 pm #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.
January 28, 2015 at 8:02 pm #387337I’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.
January 29, 2015 at 10:04 pm #387983Hey!
We already enqueue jQuery and jQuery UI. You’ll need to switch all
$
symbols tojQuery
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,
ElliottJanuary 30, 2015 at 7:09 pm #388439Thanks :)
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!
January 31, 2015 at 11:49 pm #388885Hi,
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,
JosueFebruary 3, 2015 at 2:34 pm #390084Unfortuantly 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:
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 }
February 3, 2015 at 11:25 pm #390445Sorry for being a pain. I appreciate the help.
February 4, 2015 at 12:45 am #390469Hi!
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_scriptRegards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.