• Resolved webbrewers

    (@webbrewers)


    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="http://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:
    http://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.