Using JQuery on a specific page

  • Resolved loopforever

    (@loopforever)


    3 years, 6 months ago

    There are two different radio buttons on a form page. If one of them is selected, I want to show the element (div) and if the other is selected, I want to hide it.
    I decided to use Javascript for this. While the code works in the browser, it doesn’t work when I add it.
    I don’t understand where is wrong.
    If I write the code like this, I get the known error Typeerror: $ Is Not a Function in the console:

    File Location: https://www.example.com/my-js.js

    jQuery(document).ready(function() {
if(jQuery('#field-x').is(':checked')){
$('.field-field-a').hide();
}
if($('#field-y').is(':checked')){
$('.field-field-a').show();
}
   });

    As a solution to this, I made the following definition:

    var $ = jQuery.noConflict();
$(document).ready(function() {
if($('#field-x').is(':checked')){
$('.field-field-a').hide();
}
if($('#field-y').is(':checked')){
$('.field-field-a').show();
}
   });

    The error has disappeared. However it still doesn’t work. Also, there is no error in the console.
    I’ll be grateful if you help.

    function.php

    function load_js_assets() {
    if( is_page(49) ) {
        wp_enqueue_script('my-js', 'https://www.example.com/my-js.js', array('jquery'), '', true);
    }
}

add_action('wp_enqueue_scripts', 'load_js_assets');
    • This topic was modified 3 years, 6 months ago by loopforever.
    • This topic was modified 3 years, 6 months ago by loopforever.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    The WP version of jQuery already calls .noConflict(). This removes the usual mapping of $ to jQuery. To add it back, use a no conflict wrapper:

    (function( $ ) {
 
    "use strict";
     
    // javascript code here. i.e.: $(document).ready( function(){} ); 
 
})(jQuery);
    Thread Starter loopforever

    (@loopforever)

    Thank you for your response.
    Can you check this?
    Where is the mistake? It doesn’t work in a way I don’t understand.
    Very strange. A very simple thing to do: hide the element. However, in WordPress this does not work.

    (function( $ ) {
    $(document).ready( function(){
       $( "#button-W" ).click(function() {
         $('.field-field-t').hide();
        }); 
        
    } ); 
 
})(jQuery);

    I even want the direct element to start as hidden. This is the actual definition:
    $('.field-field-t').hide();
    I wrote the button for triggering later. I thought, “Do I need a trigger?” Of course it works in the browser as above.

    • This reply was modified 3 years, 6 months ago by loopforever.
    • This reply was modified 3 years, 6 months ago by loopforever.
    Thread Starter loopforever

    (@loopforever)

    Update:
    From what I think it doesn’t work from the form structure.
    I am working on a form. There are stages in the form:
    Step-1
    Step-2
    …
    So, there are splitters.

    While going from Step-1 to Step-2, Next button is pressed. With this button, the other page opens and the HTML becomes visible. Probably JQuery isn’t working because it’s late here. Because the division I want to hide is in Step-3.

    (document).ready definition exists as you can see. Also,
    I got the js codes in the footer. What’s more, buttons (Next), as you might guess, are hard buttons. Therefore, it is impossible to write a Trigger. So, I changed the in_footer parameter in the wp_enqueue_script function. However, it didn’t work.
    Do you have another solution?

    • This reply was modified 3 years, 6 months ago by loopforever.
    • This reply was modified 3 years, 6 months ago by loopforever.
    Moderator bcworkz

    (@bcworkz)

    I don’t see anything wrong with the script. To be sure, I tried it on my site, only changing the form field ID and class name to fit with my existing form. The click event was tied to a check box field, not a radio button, but I don’t see how that would matter. Clicking the box did hide the field with the matching class name, .field-field-t in your case.

    You said “With this button, the other page opens…”. Is this really a new page requested from the server? Or is it a “sub-page” that’s all part of the same thing, all loaded from the server at the same time? If it’s a new page, is your script being loaded on the correct page?

    Check you browser console for any errors logged. An error from elsewhere can still affect your script even if it is 100% correct.

    Verify that a script tag linking to your script file really exists in the page’s source HTML. If not, the file was not enqueued correctly.

    Verify that the src attribute of the script tag really leads to your script file. Enqueuing with the wrong path is a common blunder.

    Showing or hiding certain form elements based on user interaction is a common technique. Using .hide() alone wouldn’t allow the user to reverse course and make a different choice (other than by reloading the entire page). I assume you intend to implement this later once you are able to at least get something working to start with.

    Thread Starter loopforever

    (@loopforever)

    Thank you very much for your reply. I will consider these.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using JQuery on a specific page’ is closed to new replies.