如何更新和刷新ajax加载的div中的每一行?

时间:2012-08-14 07:17:12

标签: javascript ajax jquery

我在使用AJAX加载的div中使用jQuery更新并自动刷新我的表行时遇到了困难。 从select选项中选择一个值后,在div中加载数据的代码:AJAX part

<script type="text/javascript">
  function showUser2(str)
  {
    <!-- code -->
  }
  </script>

选择选项部分:

<select name ='country_select' onchange='showUser2(this.value)'>
  <!-- options -->
</select>

已加载DIV,其中包含所选国家/地区的所有用户列表:

<div id='txtHint'></div>

DIV包含:

部首:

用户名删除用户更改状态

数据:

Ben删除图标状态图标

最大删除图标状态图标

代码:

<div id="otherdiv">
 <!-- Delete/ Enable user -->
<ul>
 <li>
  <?php echo $data[user_name]; ?>
 </li> 
 <li>
  <a href="#" id="<?php echo $data[training_id]; ?>" class="delete_button">X</a>
 </li>
 <li>
   <a href="#" id="<?php echo $data[training_id]; ?>" class="deassign_training">
    <img src='images/on.png' style='border:0;'/>
   </a>
 </li>
</ul>

 <!-- Delete/Disable user -->
<ul>
 <li>
  <?php echo $data[user_name]; ?>
 </li>  
 <li>               
  <a href="#" id="<?php echo $data[training_id]; ?>" class="delete_button">X</a>
 </li>
 <li>
  <a href="#" id="<?php echo $data[training_id]; ?>" class="assign_training">
   <img src='images/off.png' style='border:0;'/>
  </a>
 </li>
</ul>

当我点击图片图标删除/启用/禁用用户时,它没有工作。以下是删除用户的代码:

<script src="http://code.jquery.com/jquery-latest.js"></script>


<script language="javascript" type="text/javascript">
  $(function() {
  $(".delete_button").click(function() {
  var id = $(this).attr("id");
  var dataString = 'id='+ id ;
  var parent = $(this).parent();

  $.ajax({
     type: "POST",
     url: "deleteajax.php",
     data: dataString,
     cache: false,

    success: function(data)
    {
      $("#otherdiv").load("index.php");
    }

   });

  return false;
    });
  });
</script> 

以下启用/禁用用户代码:

$(function()
  {
    $(".assign_training").click(function() 
    {
      var id = $(this).attr("id");
      var dataString = 'id='+ id ;
      var parent = $(this).parent();

      $.ajax(
      {
        type: "POST",
        url: "assign.php",
        data: dataString,
        cache: false,

        success: function(data)
        { 
          $("#otherdiv").load("index.php");
        }

      });
      return false;
    });

    $(".deassign_training").click(function() 
    {
      var id = $(this).attr("id");
      var dataString = 'id='+ id ;
      var parent = $(this).parent();

      $.ajax(
      {
        type: "POST",
        url: "deassign.php",
        data: dataString,
        cache: false,

        success: function(data)
        {
          $("#otherdiv").load("index.php");
        }

      });

      return false;
    });

  });

在选择国家/地区名称后,我不确定其工作原理。我已经尝试过Stack Overflow和其他很多网站上的这么多技术,但最终还是没有用。仅当用户详细信息直接加载到页面上时,它才起作用。

我希望我能找到一个有用的答案。

谢谢

1 个答案:

答案 0 :(得分:0)

据我所知,在创建DOM之前,您正在启动删除/启用/禁用事件。 尝试更改这些块:

<script language="javascript" type="text/javascript">
  $(function() {
    <!-- YOUR CODE HERE -->
  });
</script> 

到:

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    <!-- YOUR CODE HERE -->
  });
</script> 

这应该有帮助