CODEWITHSUNDEEP
javascripthtmlextjs
Jerome Campeaux
Jerome Campeaux

Reputation: 353

issue on link with Firefox

I have tab bar with links inside which give a strange behavior on Firefox.

When I click on a link on chrome the URL is "http://localhost:8080/netmg/view/home#agregateShowMode=site&activeTabHomeAgregateSite=1" and the tab is found correctly.
But when I use Firefox with the same code the URL become
"http://localhost:8080/netmg/view/home"

HTML code :

<div class="tabs" id="tab-home-view">
  <ul class="tab-links">
    <li id="General" class="active"><a href="" onclick="javascript:App.workOnHomeTabs(this, '0');">General</a></li>
    <li id="device"><a href="" onclick="javascript:App.workOnHomeTabs(this, '1');" >Device</a></li>
    <li id="link"><a href="" onclick="javascript:App.workOnHomeTabs(this, '2');">Link</a></li>
    <li id="Service"><a href="" onclick="javascript:App.workOnHomeTabs(this, '3');">Service</a></li>
  </ul>
</div>

JS CODE :

App.workOnHomeTabs = function (obj, toAppend) {
    var url = window.location.href;
    if (url.includes("&activeTabHomeAgregateSite=")) {
    obj.href = url.replace(/(&activeTabHomeAgregateSite=)\d+/, '$1' + toAppend);
    }
    else {
      obj.href = url + "&activeTabHomeAgregateSite=" + toAppend;
    }
    Ext.select('#tab-home-view ul li').removeCls('active');
    Ext.get(obj).up('li').addCls('active');
}

Upvotes: 2

Views: 84

Answers (1)

BrainOverflow
BrainOverflow

Reputation: 513

Here is the problem:

var url = window.location.href;
if (url.includes("&activeTabHomeAgregateSite=")) {
  ...
}

In the if statement above, you invoke the "includes" method of a String. This method is an experimental technology (as specified in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) and it shouldn't be used, because it is pretty new.

Google Chrome has already implemented this new feature, so when you click in the "a" element it works as expected and redirects you to the correct page.

However, Firefox hasn't implemented it yet, so when you execute that function it throws an error and the "a" element where you clicked behaves like a normal link and reloads the current page because you left the "href" attribute empty.

<a href=""></a>

If I were you I would change the if statement to this one, that works on every browser:

var url = window.location.href;
if (url.indexOf("&activeTabHomeAgregateSite=") != -1) {
  ...
}

and I would fill the "href" attribute of the "a" elements with a hash symbol, like this:

<a href="#"></a>

This will prevent your page to be reloaded when there's an error on the execution of the event.

Upvotes: 1

Related Questions