Problems with Jquery load and append loading another php page

Asked

Viewed 1,308 times

1

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

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

follows below the codes.

Script Jquery

    <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

  • $('#cliente1').html(retorno); make that change

  • hello, this the same thing, I click appears once and then it disappears then I give several clicks and appears and when I click again it disappears.

  • now that I’ve seen! you’re calling two ajax functions in the same click???? guess all you need is this. $('#link1').click(function(event){&#xA; $( "#cliente1" ).load( "c_cliente.php" );});

  • 1

    Thanks for the help, it was just the '#' I forgot to put on href.

1 answer

0


You have an element <a> within your <li>, that is running when you click on Parent.

I suggest the following approach:

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

Something like that:

$(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>

   <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><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>

  • Dude really forgot about the '#'...was coding too fast and forgot about that detail. It worked both ways perfectly, missed only the "#'. Thank you so much for your help.

Browser other questions tagged php jquery ajax

You are not signed in. Login or sign up in order to post.