重新加载具有相同内容的div

时间:2013-11-13 22:27:34

标签: javascript jquery html mysql css

我有一个div,其中包含从Mysql中提取的客户端列表。

在同一页面上,我有一个弹出的jquery对话框,允许用户添加新客户端。

我想要发生的是,当用户添加新客户端时,包含列表重新加载以便新客户端可用。

有没有办法简单地重新加载div而不使用Load()函数,因为当我重新填充填充列表的类时这会导致错误?

2 个答案:

答案 0 :(得分:1)

当然。如果不看你的代码,你在这里的困惑就表明你不理解"分离关注"。将信息从显示该信息的过程中分离出来。当用户输入新信息时,将其添加到javascript数组或从服务器获取的信息对象,并将其发送到服务器以在数据库中更新。然后使用更新的信息再次运行显示功能以包含新信息。理想情况下,显示过程将使用现有标记(如果可以),而不是全部删除并重新创建它只是为了添加一个项目。 Here's a very basic example (click here).理想情况下,您会采用此概念并对其进行扩展,以使其达到最佳效率和组织。

这是我的jsbin的示例代码。请记住,这只是为了让您入门。

var info = [1,2,3,4,5]; //this is what you got from your ajax call to the server

function render(element, info) {
  //this is a lazy system that recreates/replaces all the markup each time. I suggest doing this more efficiently, but that is work for you to do :)
  var frag = document.createDocumentFragment();
  var len = info.length;
  for (var i=0; i<len; ++i) {
    var p = document.createElement('p');
    p.textContent = info[i];
    frag.appendChild(p);
  }
  element.innerHTML = '';
  element.appendChild(frag);
}

var targetElem = document.getElementById('targetElem');

render(targetElem, info);

var addButton = document.getElementById('add');
var input = document.getElementById('infoInput');
addButton.addEventListener('click', function() {
  info.push(input.value); //update the information
  render(targetElem, info); //render the updated information
});

答案 1 :(得分:0)

这些都可以给你成功。

success: function(userinfos) {
                 $("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
                 display_message("user added");
               }

 $.ajax({
type: "GET",
url: "ht.tp://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
occasionData     +"&relationship="+ forData +"#",

success: function (response) {

    $("#testDIV").html(response);
}
});