Custom JQuery is not working in wordpress

Question

I have written JQuery for my website search functionality. Its working fine when I am using separate file. But when I included same JQuery file in wordpress its not working as required. My question is how to include this code in wordpress

Code:

$('#search').keyup(function () { 
 var filter = $('#search').val();
  $('.et_pb_row').each(function() {

        $(this).find("h3:not(:contains('" + filter + "'))").parent().hide();
        $(this).find("h3:contains('" + filter + "')").parent().show();
     });
 });

1. Check console if you're getting error related to $, if yes, then use jQuery instead of $ to reference jQuery. 2. Wrap the code in jQuery 3. You can use $(this).val() in handler to get the search text 4. No need of each here, $(".et_pb_row h3:not(:contains('" + filter + "'))").parent().hide(); and $(".et_pb_row h3:contains('" + filter + "')").parent().show(); — Tushar
– Tushar, Commented Oct 19, 2015 at 11:14
I have used jQuery inplace of $ then it showing error as "Uncaught ReferenceError: jQuery is not defined". Same think when I tried to wrap code insode "jQuery(document).ready(function()". — user3859504
– user3859504, Commented Oct 19, 2015 at 14:03

Stewartside · Accepted Answer · 2015-10-19 14:04:46Z

1

Firstly, ensure you have WordPress loading onto your template.

In your head file, ensure you have this loaded in

<?php wp_enqueue_script("jquery"); ?>

Next, WordPress has to use noConflict mode or use the base jQuery call instead of $.

Try this

jQuery('#search').keyup(function () { 
    var filter = jQuery('#search').val();
    jQuery('.et_pb_row').each(function() {
        jQuery(this).find("h3:not(:contains('" + filter + "'))").parent().hide();
        jQuery(this).find("h3:contains('" + filter + "')").parent().show();
    });
});

You should also ensure that all your jQuery code is wrapped in the following code:

jQuery(document).ready(function() {
    //code to run here
});

edited Oct 19, 2015 at 14:04

answered Oct 19, 2015 at 11:14

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user3859504 Over a year ago

I have used same code that you have provided then it showing error as "Uncaught ReferenceError: jQuery is not defined". Same think when I tried to wrap code insode "jQuery(document).ready(function()".

Stewartside Over a year ago

that means you don't have jquery loaded into your site. Try the above amendments

Stewartside Over a year ago

Then your jQuery code will be incorrect which will be based on your HTML

user3859504 Over a year ago

But it was working in simple html page.. I checked script in simple html file then I included into Wordpress.

user3859504 Over a year ago

I have created JSFiddle for using home page of website without css. Link : jsfiddle.net/3q7a95hq/1

|

Dyuthi Chandran · Accepted Answer · 2015-10-19 11:24:51Z

0

You have to try some trial and error method in fact.It can be because of jquery conflicts.

These are the possibilities coming in mind

Try placing your jQUERY code above and below of wp_head();
Check if you are using the latest version of jquery file( or check if you use the same jquery file of the working file )
Try placing your jQUERY code above and below of jquery file

answered Oct 19, 2015 at 11:24

Dyuthi Chandran

446 bronze badges

Collectives™ on Stack Overflow

Custom JQuery is not working in wordpress

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related