dougu1985 2018-10-12 14:29
浏览 113
已采纳

加载更多按钮只能工作一次

I have a table named tbl_video that consist of two fields (video_id, video_title What I want to add a load more button using Ajax JQuery like social networking sites .I am able to get the first two records but when I try second time nothing happens. I dont get any errors .What am i doing wrong .

this my index.php file I create table structure here and then fetch two records.And get the second record's id value and send it to the more.php file

  <body>  

                    <table class="table table-bordered" id="load_data_table"> 

                    <thead>
                    <tr>
                    <td width="15%">Video Id</td>
                    <td>Video Title</td>
                    </tr>
                    </thead>
                    <?php

                    while ($row = mysqli_fetch_array($result)) {
                        $video_id = $row['video_id']; ?>
                             <tr>
                             <td><?php echo $row['video_id']; ?></td>
                             <td><?php echo $row['video_title']; ?></td>

                             </tr>
                        <?php
                    }

                    ?> 
                    <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
                     data-id="<?php echo $video_id; ?>">More</button></td></tr>

                    </table>  
               </div>  
          </div>  
     </body>  
</html>  
 <script>  
 $(document).ready(function(){  
     $('#more').click(function(){
 var id=$(this).data("id");


        $.ajax({
            url:"more.php",
            data:{id:id},
            method:"post",
            success:function(data){

              if(data!=''){

               $('#load_data_table').append(data);
               $('#remove_row').remove();


              }
              else{
                $('#more').html("No Data");
              }
            }

and this the more.php file.I think it is self explanatory

$id = $_POST['id'];
$output = '';
$db = mysqli_connect('localhost', 'root', '', 'testing');
$data = mysqli_query($db, "select * from tbl_video where video_id >{$id} limit 2");
if (mysqli_num_rows($data)) {
    while ($row = mysqli_fetch_array($data)) {
        $output .= '

         <tbody>
         <tr>
          <td>'.$row['video_id'].'</td>
          <td>'.$row['video_title'].'</td>
         </tr>

         ';
    }
    $output .= '
  <tr id="remove_row"><td><button type="button" id="more" class="btn btn-success form-control"
  data-id="'.$row['video_id'].'">More</button></td></tr></tbody>

  ';
    echo $output;
}

any help would be appriciated.

  • 写回答

1条回答 默认 最新

  • dongnue2071 2018-10-12 15:17
    关注

    When you add a new row and there is a new button for More

    It has the same id as the original button so there is a conflict there

    also the javascript needs to be initiliazed something like this

    PHP:

       $output .= '<tr id="remove_row"><td><button type="button"  class="more btn btn-success form-control" data-id="'.$row['video_id'].'">More</button></td></tr></tbody>';
    

    Javascript:

    <script>  
    function moreButton() {
    $('.more').click(function(){
    var id=$(this).data("id");
    
    
    $.ajax({
        url:"more.php",
        data:{id:id},
        method:"post",
        success:function(data){
    
          if(data!=''){
    
           $('#load_data_table').append(data);
           $('#remove_row').remove();
    
             moreButton();
          }
          else{
            $('.more:last').html("No Data");
          }
        }
     });
     }
     $(document).ready(function(){  
    
       moreButton();
     });
    

    Don't forget to remove the id of the more button to a class with .more

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)