当我试图再次在同一页面上调用它时,Ajax无法正常工作

Question

我有一个PHP页面,它有两个部分(顶部和底部).顶部有一个表格,我可以选择编辑数据.

按下"编辑"按钮后,内容将加载到页面底部,用户可以更改数据.

这是我的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> 

这是我的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;
                } 

这是我的PHP页面加载底部 - 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 }
            ?>

我面临的问题是:

• 我首先按下"编辑"按钮时能够加载数据.
• 当我再次按下它时,除非我刷新页面并再次单击"编辑"按钮,否则我无法加载新数据.

我试图在JS中读取id并打印它,我发现id正在正确传递.

任何帮助将非常感谢.

提前致谢!

JS使用解决方案后:

            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

尝试更改您的回调以代替.html(): replaceWith()（在您的原始代码中）

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

我还建议将您的选择器更改为 aclass而不是 an ID，您只需在 HTML 中添加一个额外的类即可做到这一点：

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

然后在success回调中更新选择器：

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

console.log()旁注：对于调试来说，它通常更容易使用alert()（当使用ajax时，你通常会打开控制台）