Jquery codes stop working

This is very good article about adding scripts in WordPress.

I was writing the codes that stopped working between <script></script> tags directly before </body>, Is it wrong to write them in this way??

For the most part, yes, that is the wrong approach. You can get away with doing that for short snippets. For the most part all scripts should be in external files and enqueued.

I think the specific reason adding wp_head() broke your scripts is that call loaded other resources that conflicted with your current scripts. Part of the reason for enqueuing is it helps prevent conflicts and properly resolves dependencies so things are loaded in the correct order and are less likely to conflict.

Do be aware that in enqueuing your jQuery scripts, you should specify [‘jquery’] as a dependency. This will load the WP local version of jQuery which runs in noConflict mode, so unless you include a noConflict wrapper, you cannot use the common $ shortcut. Without the wrapper, you must explicitly call jQuery anywhere you used the $ shortcut.

hi,

I removed all the <script></script> tags and its contents from footer.php and created my_script.js and copied these codes into it

// Smooth Scrolling Internal Anchor Links
jQuery(document).ready(function ($) {
    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
    });
});

// Team Bio Section
$(document).ready(function () {
    $('#photo_1').click(function () {
        $('#bio_1').show();
    });
    $('#photo_2').click(function () {
        $('#bio_2').show();
    });
    $('#photo_3').click(function () {
        $('#bio_3').show();
    });
    $('#photo_4').click(function () {
        $('#bio_4').show();
    });
    $('#photo_5').click(function () {
        $('#bio_5').show();
    });
    $('#photo_6').click(function () {
        $('#bio_6').show();
    });
    $('#photo_7').click(function () {
        $('#bio_7').show();
    });
});

// Recommendation Page - Select City    
$(document).ready(function () {
    $('select[name="cityId"]').change(function () {
        if ($(this).val() === 'alexandria') {
            $('#city_service').html('<optgroup label="??? ??????"><option value="alex_1" class="dropdown-item" onclick="myService_alex1()">???? (1)</option><option value="alex_2" class="dropdown-item" onclick="myService_alex2()">???? (2)</option><option value="alex_3" class="dropdown-item" onclick="myService_alex3()">???? (3)</option></optgroup>');
        } else if ($(this).val() === 'minya') {
            $('#city_service').html('<optgroup label="??? ??????"><option value="minya_1" class="dropdown-item" onclick="myService_minya1()">???? (1)</option><option value="minya_2" class="dropdown-item" onclick="myService_minya2()">???? (2)</option></optgroup><optgroup label="??? ??????"><option value="minya_3" class="dropdown-item" onclick="myService_minya3()">???? (3)</option><option value="minya_4" class="dropdown-item" onclick="myService_minya4()">???? (4)</option></optgroup>');
        }
    });
});

// Recommendation Page - Select Service
function myService_alex1() {
    $('#recommend_alex1').show();
    $('.recommendation').not('#recommend_alex1').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_alex2() {
    $('#recommend_alex2').show();
    $('.recommendation').not('#recommend_alex2').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_alex3() {
    $('#recommend_alex3').show();
    $('.recommendation').not('#recommend_alex3').hide();
    $('#recommendations').css('margin-bottom', '51px');
}

function myService_minya1() {
    $('#recommend_minya1').show();
    $('.recommendation').not('#recommend_minya1').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya2() {
    $('#recommend_minya2').show();
    $('.recommendation').not('#recommend_minya2').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya3() {
    $('#recommend_minya3').show();
    $('.recommendation').not('#recommend_minya3').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya4() {
    $('#recommend_minya4').show();
    $('.recommendation').not('#recommend_minya4').hide();
    $('#recommendations').css('margin-bottom', '51px');
}

and I put this code snippet in functions.php file

<?php
function wpb_adding_scripts() {
wp_register_script(‘my_script’, get_template_directory_uri() . ‘/js/my_script.js’, array(‘jquery’), true);
wp_enqueue_script(‘my_script’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); `

Only // Smooth Scrolling Internal Anchor Links // is working and all other functions are not working, I replaced all $ with jQuery but nothing happened, could you please help me??

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button. In addition, for long pastes, use gist.github.com and paste a link to that here.]

• This reply was modified 7 years, 6 months ago by Steven Stern (sterndata).
• This reply was modified 7 years, 6 months ago by monaabdelkader.
• This reply was modified 7 years, 6 months ago by monaabdelkader.

hi,

I removed all the <script></script> tags and its contents from footer.php and created my_script.js and copied these codes into it

// Smooth Scrolling Internal Anchor Links
jQuery(document).ready(function ($) {
    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
    });
});

// Team Bio Section
$(document).ready(function () {
    $('#photo_1').click(function () {
        $('#bio_1').show();
    });
    $('#photo_2').click(function () {
        $('#bio_2').show();
    });
    $('#photo_3').click(function () {
        $('#bio_3').show();
    });
    $('#photo_4').click(function () {
        $('#bio_4').show();
    });
    $('#photo_5').click(function () {
        $('#bio_5').show();
    });
    $('#photo_6').click(function () {
        $('#bio_6').show();
    });
    $('#photo_7').click(function () {
        $('#bio_7').show();
    });
});

// Recommendation Page - Select City    
$(document).ready(function () {
    $('select[name="cityId"]').change(function () {
        if ($(this).val() === 'alexandria') {
            $('#city_service').html('<optgroup label="??? ??????"><option value="alex_1" class="dropdown-item" onclick="myService_alex1()">???? (1)</option><option value="alex_2" class="dropdown-item" onclick="myService_alex2()">???? (2)</option><option value="alex_3" class="dropdown-item" onclick="myService_alex3()">???? (3)</option></optgroup>');
        } else if ($(this).val() === 'minya') {
            $('#city_service').html('<optgroup label="??? ??????"><option value="minya_1" class="dropdown-item" onclick="myService_minya1()">???? (1)</option><option value="minya_2" class="dropdown-item" onclick="myService_minya2()">???? (2)</option></optgroup><optgroup label="??? ??????"><option value="minya_3" class="dropdown-item" onclick="myService_minya3()">???? (3)</option><option value="minya_4" class="dropdown-item" onclick="myService_minya4()">???? (4)</option></optgroup>');
        }
    });
});

// Recommendation Page - Select Service
function myService_alex1() {
    $('#recommend_alex1').show();
    $('.recommendation').not('#recommend_alex1').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_alex2() {
    $('#recommend_alex2').show();
    $('.recommendation').not('#recommend_alex2').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_alex3() {
    $('#recommend_alex3').show();
    $('.recommendation').not('#recommend_alex3').hide();
    $('#recommendations').css('margin-bottom', '51px');
}

function myService_minya1() {
    $('#recommend_minya1').show();
    $('.recommendation').not('#recommend_minya1').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya2() {
    $('#recommend_minya2').show();
    $('.recommendation').not('#recommend_minya2').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya3() {
    $('#recommend_minya3').show();
    $('.recommendation').not('#recommend_minya3').hide();
    $('#recommendations').css('margin-bottom', '51px');
}
function myService_minya4() {
    $('#recommend_minya4').show();
    $('.recommendation').not('#recommend_minya4').hide();
    $('#recommendations').css('margin-bottom', '51px');
}

and I put this code snippet in functions.php file

<?php
function wpb_adding_scripts() {
wp_register_script(‘my_script’, get_template_directory_uri() . ‘/js/my_script.js’, array(‘jquery’), true);
wp_enqueue_script(‘my_script’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );

Only // Smooth Scrolling Internal Anchor Links // is working and all other functions are not working, I replaced all $ with jQuery but nothing happened, could you please help me??

Any time you use $(document).ready(function ()) when using the WP version of jQuery, pass $ to the closure to continue to use the $ shortcut within and use jQuery in place of the first $. You did so once, but did not follow through to the rest.

Unless you need code executed before the document is ready, you can declare all of your functions within one all encompassing document ready closure. There is generally no need to have separate document ready closures. Alternately, do not pass $ and simply replace all other occurrences of $ with jQuery. So basically either this:

jQuery(document).ready( function($) {
  $('selector').method();
  function foo() {
    $('selector').method();
  }
  function bar() {
    $('selector').method();
  }
});

or this:

jQuery('selector').method();
function foo() {
  jQuery('selector').method();
}
function bar() {
  jQuery('selector').method();
}

Your PHP is fine the way it is (except the quote characters are messed up), but FYI, you do not need to both register and enqueue unless you need to use the ‘my_script’ tag elsewhere besides wp_enqueue_script(). Just enqueuing is generally adequate:

// no wp_register_script() generally required
wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), true);

Now if you had other code that needs to list ‘my_script’ as a dependency, or you need to localize some values in relation to ‘my_script’, then your script would need to be registered and then enqueued like you have done. Registering is essentially establishing an alias. If the alias will only be used once, there is no need to to create an alias, just enqueue your script with the actual path.

It’s confusing what to do when, I know. If you have trouble getting this straight, you are not alone. It’s always OK to do both like you had done, even if not always necessary. It’s even better to understand the situation and code accordingly.

Despite the messed up quotes in your posted snippet, you apparently have them correct on your site since the first jQuery loaded and executed. In the snippet, all the single quotes are ‘curly’ or ‘angled’ as they are ‘here’. In PHP code, quotes must be the 'straight' style. They get messed up when copy/pasting code in the forums here when someone fails to use backticks or the code button ??

Thanks a lot for explaining everything in details, everything is working now perfectly, and next time I’ll take care of my quotes =D