Popup jQuery not working

  • Resolved webbrewers

    (@webbrewers)


    8 years, 3 months ago

    Trying to change behavior of links (that are pulled in through an api) by adding a simple jQuery pop up function. It works in a fiddle here: https://jsfiddle.net/webbrewers2/tjwdkzj2/ but not on the live WordPress site.

    Sample html:
    <a class="popupclass" href="https://www.google.com">Click here</a>

    Function:

    $(document).ready(function($) {
$('.popupclass').click(function() {
 var NWin = window.open($(this).prop('href'), '','scrollbars=1,height=400,width=400');
 if (window.focus)
 {
   NWin.focus();
 }
 return false;
});
});

Viewing 8 replies - 1 through 8 (of 8 total)

  • Can you post a link to a WordPress page that shows the issue? One possible cause is that WordPress loads jQuery in no-conflict mode by default, so the $ shortcut isn’t available. You could get around that with a wrapper function:

    ( function( $ ) {
  ... the $ shortcut will be available here ...
} )( jQuery );
    Thread Starter webbrewers

    (@webbrewers)

    There’s a sample page here:
    https://dnorwood.info/grover-beach-lower-priced-homes/
    I did try it with $ and jQuery. You’re suggesting putting my function between the wrapper function? I’ll try that.

    Aidas

    (@frankenstein-uk)

    The problem is that you do not prevent default behaviour of <a> element. Try the code below:

    $(document).ready(function($) {
$('.wolfnet_listingLink').addClass('popup');

   $('.popup').click(function(e) {
   		e.preventDefault();
     var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});
    Thread Starter webbrewers

    (@webbrewers)

    Thanks – I would expect the function to override default behavior which it does in the fiddle I posted, but I tried it anyway and no change.

    Aidas

    (@frankenstein-uk)

    do you see any errors in the console?

    Thread Starter webbrewers

    (@webbrewers)

    Nope. In Chrome though I get:
    popup.js:1 Uncaught ReferenceError: $ is not defined
    If I replace $ with jQuery I get:
    jQuery is not defined.

    Thread Starter webbrewers

    (@webbrewers)

    Finally figured it out.

    jQuery(document).ready(function() {
 jQuery('.wolfnet_listingLink').click(function() {
     var NWin = window.open(jQuery(this).prop('href'), '', 'scrollbars=1,height=600,width=800');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});

    I think the issue was I was not replacing the ‘$’ in “var NWin = window.open($(this).prop(‘href’), ”,” with ‘jQuery’. stephencottontail was on the right track with his answer.
    Thanks for sticking with me!

    Aidas

    (@frankenstein-uk)

    Glad your sorted it out ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Popup jQuery not working’ is closed to new replies.