I have a company WordPress website developed by a vendor where customers making online payments get navigated to a third-party website to manage that. Initially, we had direct urls built into the links.

My boss wanted us to have a pop-up window warning people they would be leaving our site, and, on confirmation, they get navigated to the site.

I built a quick and dirty "confirmation" plug in to look for the element ID for that link, and trigger the pop-up and subsequent navigation.

Since WordPress, using the Walker Texas Ranger code, builds the mobile menu, the mobile version of these links do not have any ID assigned to them, at all, because the link ID would be a duplicate (I think). I changed the plug in to look for the unique class that was created for that specific link. It works fine in the full-screen view, but won't work when the mobile/hamburger menu is active and opened.

Here is the html, for the menus. The second piece of code shows the very top menu, classified as "pre-header (shows up below the primary menu definitions in the html coding)," the bulk of the menu shows up in both normal and in the hamburger view, and then, in the second part of this first code passage, the "second menu" div is the top menu items, which get displayed at the bottom of the hamburger menu in mobile view -

<div class="open" id="mobile-menu">
<ul id="menu-main-navigation-menu" class="nav navbar-nav">
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-43"><a href="http://www.oursite.com/about-us/">About Us</a><span class="wrap-fa"><i class="fa fa-angle-down"></i></span>
        <ul role="menu" class="dropdown-menu" style="">
            <li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-529"><a href="http://www.oursite.com/about-us/our-history/">Our History</a></li>
            <li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://www.oursite.com/about-us/ourkindoforganization/">What is a what we are?</a></li>
            <li id="menu-item-235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235"><a href="http://www.oursite.com/about-us/community-impact/">Community Impact</a></li>
            <li id="menu-item-521" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-521"><a href="http://www.oursite.com/about-us/news/">News</a></li>
        </ul>
    </li>
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-41"><a href="http://www.oursite.com/about-us/member-resources/">Member Resources</a><span class="wrap-fa"><i class="fa fa-angle-down"></i></span>
        <ul role="menu" class="dropdown-menu" style="">
            <li id="menu-item-522" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="http://www.oursite.com/events/">Calendar of Events</a></li>
            <li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://www.oursite.com/about-us/member-resources/customer-benefits/">Customer Benefits</a></li>
            <li id="menu-item-1357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1357"><a href="http://www.oursite.com/about-us/member-resources/forms/">Forms</a></li>
            <li id="menu-item-545" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-545"><a href="http://www.oursite.com/about-us/member-resources/referral/">Refer A Friend</a></li>
        </ul>
    </li>
</ul>


<div class="top clearfix second-menu">
    <ul class="txt-spacing">
        <nav class="navbar" id="main-navigation" role="navigation">
            <div class="main-navigation">
                <ul id="menu-top-menu-1" class="nav navbar-nav">
<!--    This is the menu item, you can see the list item element has no id -->              
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://www.oursite.com/#">Make a Payment</a></li>

                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a target="_blank" href="https://www.oursite.com/Customer_Portal/">Customer Account Services</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-954"><a href="http://www.oursite.com/secure-log-ins/">Secure Logins</a>
                        <ul role="menu" class="dropdown-menu">
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2383"><a href="http://www.oursite.com/agent-tools/">Agent Tools</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2384"><a href="http://www.oursite.com/agent-login/?redirect=/store_access/">Location</a></li>
                        </ul>
                    </li>
                <li class="social menu-item menu-item-type-custom menu-item-object-custom menu-item-2478"><a target="_blank" href="https://www.facebook.com/NMBLife/"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
                <li class="social menu-item menu-item-type-custom menu-item-object-custom menu-item-2480"><a target="_blank" href="https://www.linkedin.com/company/national-mutual-benefit/"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </nav>
    </ul>
</div>

Here is the top menu that displays and functions correctly in the full-screen view -

<div class="pre-header">
    <div class="left">
        <em>Doing the stuff we do when we do it</em>

        <div>
            <form role="search" method="get" class="search search-form mobile" action="http://www.oursite.com/">
                <div class="input-group">
                    <input type="submit" class="fa fa-search" value="">
                    <span class="sr-only">Fleet Worthy Search</span>
                    <input type="search" id="search-field-mobile" class="search-field form-control" value="" name="s" placeholder="Search" title="Search:" required="">
                </div>
            </form>
        </div>
    </div>
    <div class="right">
        <nav class="navbar" id="main-navigation" role="navigation">
            <div class="main-navigation">
                <ul id="menu-top-menu" class="nav navbar-nav">
        <!-- Here is the part that displays as the top menu, and works fine -->     
                    <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://www.oursite.com/#">Make a Payment</a></li>
                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a target="_blank" href="https://www.oursite.com/Owner_Portal/">Owner Services</a></li>
                    <li id="menu-item-954" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-954"><a href="http://www.oursite.com/secure-log-ins/">Secure Logins</a>
                        <ul role="menu" class="dropdown-menu">
                            <li id="menu-item-2383" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2383"><a href="http://www.oursite.com/agent-tools/">Employee Tools</a></li>
                            <li id="menu-item-2384" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2384"><a href="http://www.oursite.com/agent-login/?redirect=/store_access/">Store Access</a></li>
                            <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2385"><a href="http://www.oursite.com/agent-login/?redirect=/systfacs/">System Access</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

I've cut quite a bit out of the html code, just because it gets so busy and really isn't relevant to what it going on, so it probably won't work in a jFiddle, but my jQuery javascript is so basic, I'm hoping something will jump out. I'm not very experienced with JavaScript.

jQuery.noConflict();
jQuery("li.menu-item-47").on("click",function()
{
if(confirm("YOU ARE LEAVING THE WEBSITE" + '\n' + "" + '\n' + "You are being connected to a secure bill payment system.  Press Ok to continue.")) 
{
window.open('https://secure.ourbillingservice.com/pbills/payer/welcomeDirect.do?h=t424eag5460adfa','_blank'); //This will open the website in a new tab
}
});

When I was originally using just the ID, it looked like this

jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery('#menu-item-47');

findA = menuID.find('a');

findA.click(function(event){
if(confirm("YOU ARE LEAVING THE WEBSITE" + '\n' + "" + '\n' + "You are being connected to a secure bill payment system.  Press Ok to continue.")) 
{
window.open('https://secure.directbiller.com/pbills/payer/welcomeDirect.do?h=t137tn3z73','_blank'); //This will open the website in a new tab
}

});

});

I also tried this version with just ".menu-item-47".

All versions have been the same - works on the "preheader" div (javascript window pops up and navigates when "OK" is clicked), but not in the hamburger menu (nothing happens except the browser url displays the "#").

This should work for you. I just copied your code and made adjustments.

jQuery.noConflict();
jQuery("li.menu-item-47 a").on("click",function( event ) {
 event.preventDefault();
 if(confirm("YOU ARE LEAVING THE WEBSITE" + '\n' + "" + '\n' + "You are being connected to a secure bill payment system.  Press Ok to continue.")) {

  window.open( this ,'_blank'); //This will open the website in a new tab
 }
});
  • Well, I tried this out, and a couple of things - first of all, it doesn't fire when you click on the hamburger menu item. Secondly, it fires that popup whenever you hit any menu item, which is not right, because all of the other menu navigation is internal or to other company sites. I only want that window for the class "menu-item-47". If I only have ".menu-item-47", it will fire for that menu item in full-screen menu view. – PoloHoleSet Sep 13 at 15:26
  • There that should work, I updated the selector. if you are indeed just wanting it to fire for menu-item-47 then this should work. Are you trying to make it open that static address in your code above? If so change the this in my version with the static url you have in its place. – Rudy Lister Sep 14 at 11:30
  • Still not working. I'm asking our original developers to take a look. If any of their custom programming is interfering, or if a solution is found, I'll post back here. It really seems like this SHOULD work, so I'm guessing there's something abnormal in our setup, that probably can't be diagnosed here. – PoloHoleSet Sep 14 at 15:02
  • Have you verified that the script is running? You can add an alert('this is working'); at the top of your code just to see if the script is running. For if the code I gave to you is not firing when the links are clicked, it seems to me that maybe the script is not currently running. – Rudy Lister Sep 30 at 6:12
  • The script runs when I click from the full-view (non-hamburger) menu. I agree that the script is not running/firing, but only for the hamburger menu. I do know that the mouse click is registering as an event, because the url changes to include the "/#." That's kind of the crux of my problem, I'm trying to figure out why it would not fire for this. – PoloHoleSet Oct 1 at 18:55

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.