Support » Developing with WordPress » My JS isn’t hooking up with WP_enqueue to create my pop up modal

  • aixalj

    (@aixalj)


    Hi,

    I am trying to use JS in my site in the Atom editor. I want to create a pop up modal contact form when clicking on the ‘contact us’ navlink, so the form would appear on click and then disappear on click. I have created the form using WP forms and have my HTML and CSS in place and thats all fine but I can’t seem to link my JS to perform this.

    I have added wp_enqueue_script("haringey-creates-banner", get_template_directory_uri() . '/js/modal.js', array(), false, true);
    into functions.php with all the other enqueue scripts and styles. My JS for this is

    $('.menu-item-443 a').on('click', function() {
      var currentForm = $(this).html()
    
      $('.modal-content').html(currentForm)
    
      $('.modal').fadeIn(500)
    
    })
    
    $('.modal-close, .modal-background').on('click', function() {
      $('.modal').fadeOut(500)
      return false
    })

    I’ve struggled with adding JS in the past and hooking them up with enqueue as I feel there is something I’m missing, any help would be much appreciated! thanks 🙂

    • This topic was modified 2 months ago by aixalj.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    jQuery does not get loaded with that enqueue statement. You should include 'jquery' in the dependencies array.

    The built-in jQuery so loaded runs in “noConflict” mode, which means the $ jQuery shortcut is not recognized unless you add a “noConflict wrapper” to your code. Check the user notes at the bottom of the docs page:
    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    jaynarayan

    (@jaykpatel)

    Always look into console,while your js does not work.Console shows js errors which you can Google to find what the issue.

    jQuery(document).ready(function($) {
      // Code using $ as usual goes here.
    });

    This way your code will run with $ and after Dom is ready.

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