Question

我有一个Student页面，其中列出了您可以接受与否的新学生。有两种方法可以更新列表，您可以手动重新加载页面，或者/和Ajax方法（通过服务总线）将在新学生注册时自动更新列表。

然而，这样就出现了问题，如果学生注册，我开始/重新加载页面（阅读所有新注册的学生），那么Ajax也会更新＆＃34;列表中添加了额外的div，这会导致我的列表中有两个相同的学生。

所以我需要在发布之前在Ajax中设置重复检查 - 这个当前学生是否已经存在于html内容中？

var url = "/Home/GetNewStudentFromQueue";

function getData() {
    $.get(url, function (data) {
        var id = data;
       $.post("/Home/Test", { "id": id },function (data) {
         if (data) {    

    //HERE: If statement, if div with @item.Id and class studentInfo doesn't already exist in html content

             $("#newStudent").append($('<div id=\"'+ id +'\" class=\"studentInfo\"> ' +
             '<br/> ' +
             <b>Student Name: </b>' + data.FirstName + " " + data.LastName +
             .....
           +'</div>'));

           }
         });

        getData();           
    });
} getData();

HTML：

 <div id="newStudent">
        @foreach (var item in Model) {

                <div id="@item.Id" class="studentInfo">                           
                    <br />
                    <b>Student name: </b> @item.FirstName @item.LastName
                    .......
                    <hr />
                </div>                
        }
    </div>

Answer 1

这可能有所帮助......

if(data)
{
  var existing =  $("#newStudent #"+id).html();
  if(existing != undefined && existing.length > 0)
  {
      // without container i.e. div with id 
       var htmlWithoutContainer = '<br/> ' +
         <b>Student Name: </b>' + data.FirstName + " " + data.LastName.....'
       $("#newStudent #"+id).html(htmlWithoutContainer ) 
  }
  else
  {
      // with container i.e. div with id  
      var yourNewHTML = '<div id=\"'+ id +'\" class=\"studentInfo\"> .....'
      $("#newStudent").append(yourNewHTML);
  }
}

它只是给你一个想法，请注意语法错误。

Ajax：在附加新项目之前检查HTML中是否已存在项目

1 个答案: