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

时间:2015-04-21 15:51:19

标签: javascript php jquery ajax

我有一个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;
            }

2 个答案:

答案 0 :(得分:4)

尝试更改回调以使用.html()代替replaceWith() :(在原始代码中)

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

我还建议您将选择器更改为class而不是ID,只需在HTML中添加额外的类即可:

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

然后更新success回调中的选择器:

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

旁注:为了进行调试,通常更容易使用console.log()而不是alert()(使用ajax时,通常会打开控制台)

答案 1 :(得分:2)

由于某些服务器设置或页眉,浏览器会缓存您的AJAX响应。最简单的禁用方法是在每次发送请求时将一些随机生成的参数附加到您的网址。

函数getRandomInt将生成一个6位数的随机数。如果您想要更多/更少的数字,请更改传递给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(),