load php code with jquery on navbar

Question

This is my case : i'm trying to inject a php code into a div thanks to a navbar. But nothing changes. When i click on a link "li" it is supposed to load it's own php's page. For example if i click on "Print" it will show the "print.php"

Thank you for your help

<nav class="hidden-xs hidden-sm col-md-12 navbar navbar-inverse">

<div class="collapse navbar-collapse" id="filtre">
  <ul class="nav navbar-nav">
    <li class="index" id="index"><a href="index.php">Tous</a></li>
    <li class="print" id="print"><a href="print.php">Print</a></li>
    <li class="illustration" id="illustration"><a 
 href="illustration.php">Illustration</a></li>
    <li class="logotype" id="logotype"><a href="logotype.php">Logotype</a>
 </li>
    <li class="web" id="web"><a href="web.php">Web</a></li>
    <li class="photographie" id="photographie"><a 
href="photographie.php">Photographie</a></li>
  </ul>
</div>

</nav>
<script>
$('#filtre').on('click', 'li', function(e) {
  var item = e.target;

switch (item.id) {
case 'index':
   $('#index').load('index.php');
  break;
case 'print':
   $('#print').load('print.php');
  break;
 case 'illustration':
  $('#illustration').load('illustration.php');
  break;
case 'web':
  $('#web').load('web.php');
   break;
case 'photographie':
  $('#photographie').load('photographie.php');
  break;
  }
 });
 </script>

score 0 · Answer 1 · answered Oct 05 '17 at 20:21

0

your href on link overwrite the li click, instead the link you can put: <a href="javascript:void(0);">.

And you really want to put content inside each one li that you'll click ??

answered Oct 05 '17 at 20:21

Eduardo Santos

33
1
6

Güney Saramalı · Answer 2 · 2017-10-05T20:50:56.373

The problem is that; You were not capturing the clicked elements ID or class what ever doesnt matter as they both are unique. Now this must be gettin the Class or you can change it as ID. You also need to remove <a> tags. You can check the snippet from here to see how it works.

View DEMO

$('#filtre').click(function(e){
      var item = $(e.target).attr('class');

    switch (item) {
    case 'index':
       $('#index').load('index.php');
      break;
    case 'print':
       $('#print').load('print.php');
      break;
     case 'illustration':
      $('#illustration').load('illustration.php');
      break;
    case 'web':
      $('#web').load('web.php');
       break;
    case 'photographie':
      $('#photographie').load('photographie.php');
      break;
      }
     });

Yes it's true, when i was clicking a link, it only do the click function, nothing changes, now i understand why. — Rabah, Oct 08 '17 at 09:34

score 0 · Answer 3 · answered Oct 05 '17 at 20:41

0

just remove anchor tag since you have click even on the li. You construct file name as

 switch (item) {
   ....
   $('#'+item).load(item+'.php');
   ...
}

answered Oct 05 '17 at 20:41

Tranquillity

237
2
9

score 0 · Accepted Answer · answered Oct 08 '17 at 09:30

Thank you all for your reply. I did this code and works fine :

 <script>
      $(document).ready(function(){
       $('#filtre li').click(function(){
       $('#content-data').load('./'+$(this).attr("class")+'.php', function() {
         $('#content-data').fadeIn('slow') ;
     });
       return false;
     });
     })
  </script>

load php code with jquery on navbar

4 Answers4