asked on

javascript works in Chrome, but none of the other browsers

If you go to this page: http://insurance.illinois.gov/defaultNew.html and on the "Producers" dropdown you select Illinois Public Adjuster or Licenses, Certifications, & FAQs, the code works (especially in Chrome).

Now if the user clicks (when on the producerMain.html page) on Illinois Public Adjuster or Licenses, Certifications, & FAQs using the dropdown menu to open the correct/different place in the accordion it works in Chrome, it doesn't work in any of the other browsers.

I tried adding location.href(http://insurance.illinois.gov/Producer/ProducerMain.html#collapse00) or 01, to reload the page after the URL is changed, but that didn't work either. Depending on the browser it will either not open the page at all, or continually try to load it.

Snarf0001

In your "/includes/headerMenu.html" file, which is being loaded dynamically into the header, you specifically have:

onclick="javascript:location.reload();"

In quite a few of the menu options. That's what's causing the interference, it's trumping the actual href in certain browsers.
What's the intended point of those?

Julian Hansen

Why do you have the javascript: location.reload(); in your menu items?

That seems counter intuitive?

Why not just call this code on click of your li a
Something like this ...

$(function() {
  $('.dropdown-menu li a').click(function(e) {
    e.preventDefault();
    var myURL = $(this).attr('href');
    $('.panel-collapse').removeClass('in');
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse00') {
      $( "#collapse00" ).addClass( "panel-collapse collapse in" );  
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse01') {
      $( "#collapse01" ).addClass( "panel-collapse collapse in" ); 
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse02') {
      $( "#collapse02" ).addClass( "panel-collapse collapse in" ); 
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse03') {
      $( "#collapse03" ).addClass( "panel-collapse collapse in" );  
    }
  });
});

Open in new window

smitty62

ASKER

The above code did not work. It didn't work when I added a reload either. The reason the page needs to be reloaded is because if you select the option of a different place on the accordion from the dropdown menu the page will not change unless it is reloaded. The URL will change, but the page will not. The way I have it works in Chrome. It just won't work in Opera, Firefox, or IE.

Julian Hansen

If I paste that code into the console it works - the tab changes - but then the page reloads and the change is lost.

For the code to work you have to remove the onclick that is hard coded into the menu. Irrespective of whether you use the above or not I would take that onclick out - your menu structure (being loaded dynamically) + that onclick makes for a very restrictive design - does not leave you many options when you want to change things.

smitty62

ASKER

I did as you suggested. It no longer works coming from another page using the dropdown menu, and when on the page it doesn't work at all either.

http://insurance.illinois.gov/defaultNew.html

http://insurance.illinois.gov/Producer/producerMain.html#collapse00

Julian Hansen

You have to keep the code you had for when you land on the page.

There are two events you need to cater to
1. Navigate when you are already on the page
2. Navigate when you are coming to the page from another page

My function above covers 1
What you had before handles 2

I suspect my code is not working because you load your menu's dynmically.

Try this

$(function() {
  $('body').on('click','.dropdown-menu li a', function(e) {
    e.preventDefault();
    var myURL = $(this).attr('href');
    $('.panel-collapse').removeClass('in');
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse00') {
      $( "#collapse00" ).addClass( "panel-collapse collapse in" );  
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse01') {
      $( "#collapse01" ).addClass( "panel-collapse collapse in" ); 
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse02') {
      $( "#collapse02" ).addClass( "panel-collapse collapse in" ); 
    }
    if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse03') {
      $( "#collapse03" ).addClass( "panel-collapse collapse in" );  
    }
  });
});

Open in new window

This will bind the click dynamically to the menu items so it will fire even if the menu is loaded after this script runs.

smitty62

ASKER

Still won't work coming from another page (not in IE anyway). Thank you for your help, but I think I'm just going to have to redesign the page and get rid of the accordion. It will work in Chrome, but not the other browsers so I have a feeling that something is not supported by IE, Opera, and Firefox which is supported by Chrome.

Julian Hansen

Still won't work coming from another page (not in IE anyway)

Did you add your onload code back again?

Julian Hansen

As no answer was provided suggest the question is deleted rather than Asker's answer accepted.

ASKER CERTIFIED SOLUTION

Snarf0001

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

smitty62

ASKER

THAT WORKED!!!! Thank you very much for your help. I would have never figured that out on my own.

smitty62

ASKER

Sorry, spoke to soon. The same code above placed in this page (http://insurance.illinois.gov/company/companymain.html) will not work. It does one thing in one browser, and a different thing in another browser.

Snarf0001

The companies menu items still have the onclick handler. Looks like you removed it from the producers menu items but not the rest.
Can you take them off everything and let me know if you still have the problem?