Ajax non funziona correttamente quando ho provato a chiamarlo di nuovo sulla stessa pagina

Question

Ho una pagina PHP che ha due sezioni (in alto e in basso). La sezione superiore ha una tabella in cui ho opzioni per modificare i dati.

Una volta premuto il pulsante Modifica, il contenuto viene caricato nella parte inferiore della pagina e l'utente può modificare i dati.

Ecco parte della mia pagina PHP:

  <div id="product_entry_<?php echo $id?>" class="product_entry_<?php echo $id?>"> 
       <tr> 
        <td><font size=2px><?php echo $date?></font></td> 
        <td><font size=2px><?php echo $ProductName?></font></td> 
        <td><font size=2px><?php echo $Category.'/'.$SubCategory?></font></td> 
        <td><font size=2px><?php echo $MRP.'/'.$Price?></font></td> 
        <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DirectPromoteSubmit(<?php echo $id?>)">Promote</button></td> 
        <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="RePromoteSubmit(<?php echo $id?>)">Edit</button></td> 
        <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DelPromoteSubmit(<?php echo $id?>)">X</button></td> 
       </tr> 
      </div> 

      <!-- page where data is loaded --> 
      <div class="box box-warning" id="RePromoteReplace"> 
      ....some html content here... 
      </div> 

Ecco il mio Javascript:

  function RePromoteSubmit(id){ 
       //alert('got into Edit Promotions'); 
       var dataString = "id="+ id; 
       alert(dataString); 
       if(dataString=='') 
       { 
        alert('Some Problem Occurred, Please try Again'); 
       } 
       else 
       { 
       //alert('into post'); 
       $.ajax({ 
        type: "POST", 
        url: "SellerPanel/post_repromote.php", 
        data: dataString, 
        cache: false, 
        success: function(html){ 
         //$("#tweet").val(''); 
         //$("#preview").hide(); 
         $("#RePromoteReplace").replaceWith(html); 
         alert('Product Successfully Loaded!!! Edit(Optional) & Click Promote Button in bottom section') 
        } 
        }); 
       }return false; 
       } 

Qui è la mia pagina PHP che carica la sezione inferiore - post_repromote.php:

  <?php 
      include("../dbconnection.php"); 
      include("session.php"); 
      if(!isset($_SESSION)) 
      { 
       session_start(); 
      } 

      $id=$_POST['id']; 

      $query1=mysqli_query($con,"select promotiondata from sellerpromotions where id=$id"); 
      while($row=mysqli_fetch_array($query1)) 
       { 
       .....some code here..... 
       } 
      ?> 
         <div class="box box-warning"> 
          <div class="box-header"> 
          <h3 class="box-title">Fill Product Details</h3> 
          </div><!-- /.box-header --> 
          <div class="box-body"> 

         <!-- <form role="form " name="PromoteForm"> --> 
         <div> 
           <!-- text input --> 
          <table class="table"> 
           ....some data here from query.. 
          </table>   

          <div class="box-header with-border"> 
             <h3 class="box-title">Upload your Product Image</h3> 
          </div><!-- /.box-header --> 
          <div class="box-body no-padding"> 
           <div id='preview'> 
            <?php if ($uploadid){ ?> 
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=<?php echo "SellerPanel/uploads/".$imagename?> id="<?php echo $uploadid?>" alt="User Image" class='preview' style='width:340px;height:200px;border-color:black'/> 
            <?php } 
            ?> 
           </div>  
           <?php 

            include ("index_photo.php"); 

           ?> 

           <!-- <span class="users-list-date">Yesterday</span> --> 

          </div><!-- /.box-body --> 
          <div class="box-footer"> 
           <button type="submit" class="btn btn-primary" onClick="PromoteSubmit()">Promote</button> 
          </div> 
        </div> 
          </div><!-- /.box-body --> 
         </div><!-- /.box --> 
      <?php } 
      ?> 

Il problema che sto affrontando:

• Sono in grado di caricare i dati quando premo prima il pulsante Modifica.
• Quando lo premo di nuovo, non sono in grado di caricare i nuovi dati a meno che non aggiorni la pagina e faccia di nuovo clic sul pulsante Modifica.

Ho provato a leggere l'ID in JS e l'ho stampato, ho trovato che l'ID viene passato correttamente.

Qualsiasi aiuto sarebbe molto apprezzato.

Grazie in anticipo!

JS dopo l'utilizzo di soluzione:

  function RePromoteSubmit(id){ 
      //alert('got into Edit Promotions'); 
      var dataString = "id="+ id; 
      alert(dataString); 
      function getRandomInt() { 
       return Math.floor(Math.random() * Math.pow(10,6)); 
      } 
      //var url = "SellerPanel/post_repromote.php?"+getRandomInt(); 
      //alert ("url is: "+ url); 
      if(dataString=='') 
      { 
       alert('Some Problem Occurred, Please try Again'); 
      } 
      else 
      { 
      //alert('into post'); 
      $.ajax({ 
       type: "POST", 
       url: "SellerPanel/post_repromote.php?rnd="+getRandomInt(); 
       data: dataString, 
       cache: false, 
       success: function(html){ 
        //$("#tweet").val(''); 
        //$("#preview").hide(); 
        $("#RePromoteReplace").replaceWith(html); 
        alert('Product Successfully Loaded!!! Edit(Optional) & Click Promote Button in bottom section') 
       } 
       }); 
      }return false; 
      } 

Answer 1

provare a modificare le callback per usare .html() invece di replaceWith(): (nel codice originale)

success: function(html){ 
     //$("#tweet").val(''); 
     //$("#preview").hide(); 
     $("#RePromoteReplace").html(html); 
     alert('Product Successfully Loaded!!! Edit(Optional) & Click Promote Button in bottom section') 
    } 

Consiglio anche cambiare il selettore per un class invece di un ID, è possibile farlo aggiungendo semplicemente una classe extra nel codice HTML:

<div class="box box-warning promoReplace" id="RePromoteReplace"> 

e quindi aggiornando il selettore nel success callback:

$(".promoReplace").html(html); 

---

Nota a margine: Per il debug, il suo solito più facile da usare al posto di console.log()alert() (quando si utilizza Ajax, di solito si avrebbe la console aperta in ogni caso)

Answer 2

La vostra risposta AJAX è sempre memorizzato nella cache dal browser a causa di alcune impostazioni del server o intestazione pagina. Il modo più semplice per disabilitare questo è aggiungere un parametro generato casualmente al proprio URL ogni volta che si invia una richiesta.

La funzione getRandomInt genera un numero casuale di 6 cifre. Se si desidera avere più/meno cifre, modificare il secondo argomento passato a Math.pow.

function getRandomInt() { 
     return Math.floor(Math.random() * Math.pow(10,6)); 
} 
//then, inside your ajax function, use: 
    url: "SellerPanel/post_repromote.php?rnd="+getRandomInt(),