Problem with ready in Javascript and Bootstrap

Navigation
0

Good, it is in a development that includes a bootstrap menu and I wanted to leave marked which option is selected, for it I use a javascript.

It was working correctly until I added some more menu option, and that's when I've seen that in some cases, it does not go through the script.

I can not understand the difference between one option and another menu, I paste where the menu options and the script I use appear.

Drivers and companies work well, but in the documentation option the script does not work anymore, nor does it pass through it, like the first localhost, and the second localhost, which points to a different url, goes through the script but does not mark it as "active"

It is developed in django, I do not see that the problem is there, but maybe it is wrong, if you need to provide django code, you just have to ask for it.

Thank you very much for your time! 

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    alert('principio');
 $('li.active').removeClass('active');
 $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
    alert('final');
});
</script>

 <ul class="nav navbar-nav">
    <li><a href="/accounts/"">Inicio<span class="sr-only">(current)</span></a></li>
  </ul>
                    <ul class="nav navbar-nav">
                        <li><a href="/datos/listar-empresas/">Empresas<span class="sr-only">(current)</span></a></li>
  </ul>
                    <ul class="nav navbar-nav">
                        <li><a href="/datos/listar-conductores/">Conductores<span class="sr-only">(current)</span></a></li>
  </ul>
                    <ul class="nav navbar-nav">
                        <li><a href="/francia/listar-certificados-francia/">Documentación<span class="sr-only">(current)</span></a></li>
  </ul>
                    <ul class="nav navbar-nav">
                        <li><a href="/francia/listar-certificados-francia/">Localhost<span class="sr-only">(current)</span></a></li>
  </ul>
                                            <ul class="nav navbar-nav">
                        <li><a href="/francia/listar-certificados-francia-backend">Localhost<span class="sr-only">(current)</span></a></li>
  </ul>
    
asked by Cecilio Alonso 25.04.2017 в 13:54
source

2 answers

0

Finally the solution was to carefully see the code of the page in which the menu option did not work.

I should have realized when I executed the alerts in one option if and in others not ...

The page had besides the code that I have put, a table with an id that did not correspond, but it executed a javascript of a datatable associated with that id.

The fact is that that bad javascript associated with the id of the table, generated an error and stopped the execution of the rest of javascript, that's why it did not reach the alert, nor the code that marked as active.

So the script itself was fine, bad for me to copy and paste a piece of code from a table, not reviewing it well, these things happen.

Thank you all for the answers.

    
answered by 28.04.2017 / 08:38
source
0

I would put two event handler and remove that code. 

$(document).ready(function() {
   $('li').on('mouseenter', '.deselection', function(){
      $(this).addClass('.selection').removeClass('.deselection');
   });

   $('li').on('mouseleave', '.selection', function(){
      $(this).addClass('.deselection').removeClass('.selection);
   });
});

Do not forget to label by default all the 'li' with the class .deselection that you want to make interactive. More appropriate hover, selection, which activates, since it is supposed to pass over the cursor, no?

My first answer in stackoverflow that I made you with a lot of heart, although I have not tried the code I hope it works and at least it guides you. Ahms, I think there is a method called hover with javascript that would also do the same, maybe simpler.

    
answered by 25.04.2017 в 14:24
Problem with: "String was not recognized as a valid DateTime." Read the csv file and delete it in C