All geek questions in one place

Ajax is not working properly when I tried to call it on one page again

I have a PHP page that has two sections (top and bottom). At the top there is a table where I have options for editing data.

After clicking the "Edit" button, the content is loaded at the bottom of the page, and the user can change the data.

Here is part of my PHP page:

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

Here is my 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; }

Here is my PHP page that loads the bottom section - 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 } ?>

The problem I am facing:

  • I can upload data when I first click the "Edit" button.
  • When I click it again, I can’t upload new data unless I refresh the page and click the "Edit" button again.

I tried to read the identifier in JS and print it, I found that the identifier is being transmitted correctly.

Any help would be greatly appreciated.

Thanks in advance!

JS after using the solution:

  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; }
+6
source share
2 answers

Try changing the callback to use .html() instead of replaceWith() : (in source)

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

I also recommend changing the selector to class instead of ID , you can do this by simply adding an extra class to your HTML:

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

and then update the selector in the success callback:

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

Sidenote: for debugging, it is usually easier to console.log() use console.log() instead of alert() (when using ajax, you usually open the console anyway)

+4
source

Your AJAX response is cached by the browser due to some server settings or page title. The easiest way to disable this is to add a randomly generated parameter to your URL every time you submit a request.

The getRandomInt function will generate a 6-digit random number. If you want to have more / less digits, change the second argument passed to 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(),
+2
source

Source: https://habr.com/ru/post/985620/

More articles:


All Articles