Problems with Jquery load and append when loading another php page

Question

Problems with Jquery load and append when loading another php page

Navigation

#1 by (0 votes)

1

If possible, help me, I have the following problem. When clicking on the menu that is the reference id for my jquery it loads the page with only several clicks on the menu and when it appears I click the page again again.

I used two different codes but they give me the same problem.

below the codes below.

Jquery Script

    <script src="jquery/jquery-3.1.1.js"></script>
    <script type="text/javascript"> 
$(document).ready(function(){

    $('#link1').click(function(event){
         $( "#cliente1" ).load( "c_cliente.php" );

      $.ajax({
          url: 'c_cliente.php',
          cache: false,
          success: function(retorno){
          $('#cliente1').append(retorno);
          }
       });
    });


      /*
         $('#link1').click(function(event){
             $( "#cliente1" ).load( "c_cliente.php" );
        });
        $('#link2').click(function(){
             $( "#cliente1" ).load( "f_funcionario.php" );
        });
      */
   });
</script>

Menu

<body>

   <div class="overflow_em_container">
   <div class="container-fluid">
     <div class="nav-side-menu btn-branco">
       <div class="collapse navbar-collapse " id="side-menu" >
        <ul class="nav  navbar-nav ">
         <li id="link1" ><a href="" >Premium</a></li>
         <li id="link2"><a href="">Premium</a></li>
         <li><a href="">Ajuda</a></li>
         <li><a href="">Baixar</a></li>
         <li><a href="">Increver-se</a></li>
         <li><a href="">Entar</a></li>
       </ul>             
     </div>  
   </div>
 </div>
</div>

  <div id="cliente1"></div>
</body>

php jquery ajax

asked by anonymous 16.01.2017 / 23:44

1 answer

Error compiling the HM (HEVC Standard) software on linux virtual machine How do I receive and manipulate data coming from the browser? [closed]

score 0 · Accepted Answer

You have a <a> element inside your <li> , which is running when you click on parent.

I suggest the following approach:

Pass the intercept of the click on the anchor ( <a> ), and not on the list item ( <li> ), passing id to the element <a> ;
Put a% dump dummy (which leads to nowhere). The default is to put a href hash, and do not leave it blank (although # is a '' syntactically valid, according to this answer );
Cancel the event that comes from the click. This way, you treat the callback of the click any way you want and cancel the default browser event. This cancellation can be done with a href or call the return false; method on the .preventDefault() object.
Choose one of the jQuery methods ( event or ajax ). I used load here.

Something like this:

$(document).ready(function(){

    $('#link1').click(function(event){

       $( "#cliente1" ).load( "c_cliente.php" );

       event.preventDefault();
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divclass="overflow_em_container">
   <div class="container-fluid">
     <div class="nav-side-menu btn-branco">
       <div class="collapse navbar-collapse " id="side-menu" >
        <ul class="nav  navbar-nav ">
         <li><a href="#" id="link1" >Premium</a></li>
         <li><a href="#" id="link2" >Premium</a></li>
         <li><a href="">Ajuda</a></li>
         <li><a href="">Baixar</a></li>
         <li><a href="">Increver-se</a></li>
         <li><a href="">Entar</a></li>
       </ul>             
     </div>  
   </div>
 </div>
</div>

  <div id="cliente1"></div>
</body>