2015-02-08 61 views
0

我使用getjson在页面上显示记录。基本上我只想显示已经加载的记录在网页上的新增记录。我使用设置间隔选项和它的工作正常的问题是当设置间隔调用它附加所有记录它显示重复。请让我知道我该如何处理这种重复。在网页上追加已加载记录的新记录

function updates() { 
var url="http://192.168.0.102/newsget.php"; 

$.getJSON(url,function(json){ 


// loop through the members here 
$.each(json.members,function(i,dat){ 
$("body").append(

'<div data-role="page" id="'+dat.pagename+'" data-title="'+dat.pagename+'">'+ 
     '<div data-role="header">'+ 
      '<h1>'+dat.post_title+'</h1>'+ 
      '<a data-role="button" href="#news" data-transition="flip" data-icon="arrow-l" data-corners="false">Back</a>'+ 
     '</div>'+ 
     '<div data-role="content">'+ 

      '<img src="http://192.168.0.102/uploads/'+dat.imageurl+'" alt="'+dat.post_title+'" />'+ 

      '<p>'+dat.description+'</p>'+ 

     '</div>'+ 
     '<div data-role="footer">'+ 
      '<h2>Copyrights All rights Reserved by ABC</h2>'+ 
      '<p class="copyright">&copy; Copyright 2015</p>'+ 
     '</div>'+ 
    '</div>' 




    ); 
    setTimeout(updates, 2000); 

    }); 




    $.each(json.members,function(i,dat){ 
    $("#grid").append(

    '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="portfolio-item ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-btn-up-c ui-corner-none"><div class="ui-btn-inner ui-li ui-li-has-alt">'+ 
        '<div class="ui-btn-text">'+ 
         '<a href="#'+dat.pagename+'" class="ui-link-inherit ui-corner-none">'+ 
          '<img src="http://192.168.0.102/uploads/'+dat.imageurl+'" class="ui-li-thumb ui-corner-none">'+ 
          '<h3 class="ui-li-heading">'+dat.post_title+'</h3>'+ 
          '<p class="ui-li-desc">'+dat.post_content+'</p>'+ 
         '</a>'+ 
        '</div>'+ 
       '</div>'+ 
       '<a href="#portfolio1" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c">'+ 
    '<span class="ui-btn-inner"><span class="ui-btn-text">'+ 
    '</span>'+ 
    '<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-r" data-iconpos="notext" data-theme="b" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></span></span></span></a>'+ 



       '</li>' 




     ); 


     }); 


     }) 
     .done(function() { 
     //alert("second success"); 
     }) 
     .fail(function() { 
     alert("Check your net connection or server is down due to some maintence"); 
     }); 

     } 

    }); 
+0

据我所知,你没有模型。看起来您正在每n秒检查一次数据,并且想要用新数据更新您的视图。你是否愿意创建一个模型,并用它作为你的视图中的内容? – Charlie 2015-02-08 00:11:10

+0

基本上,总之,为你的模型创建一个变量(看起来像一个数组)。那么来自getJSON函数的回调应指向更新模型的函数。那么在更新模型之后,您可以再次呈现您的内容。 (分开代码来渲染你的视图,只关心渲染模型数据)我会亲自使用句柄或一些JST而不是字符串连接。 – Charlie 2015-02-08 00:20:55

+0

嗨查理,首先我要感谢你的这段代码。基本上我正在创建jquery移动应用程序。在我的应用程序有“新闻”部分,我从基于PHP的管理面板添加新闻每一件事情都很好,除了唯一的问题,当用户已经打开该新闻页面,并在那个时候我又添加了一个新闻,所以我想显示该消息会自动带出用户移动设备上的页面刷新。我希望你能理解,所以如果你有任何好的东西或建议或代码,请与我分享。如果你需要更多的澄清,请让我知道。我也会使用你的代码 – Danish 2015-02-09 05:18:17

回答

0

假设预加载的div已分配的ID,如新生成的,在$(“身体”)之前,追加一部分,你可以把一个如果为了状况检查,如果当前的div已经现有。事情是这样的:

function updates() { 
    var url="http://192.168.0.102/newsget.php"; 

    $.getJSON(url,function(json){ 

    // loop through the members here 
    $.each(json.members,function(i,dat){ 
    if ($("#"+dat.pagename).length === 0) { // New if condition! 
     $("body").append(... 

有点快“东经脏,但我希望它能帮助。 PS:我建议你正确缩进你的代码!

0
// My Model 
var Model = { 

    url: 'your/url/here.php', 

    content: [{ 
     id: 9087, 
     foo: 'foo' 
    }, { 
     id: 9088, 
     foo: 'foo' 
    }], 

    getNewData: function() { 
     $.getJSON(this.url, this.addNewRecords); 
    }, 

    addNewRecords: function (arr) { 
     // important to distinguish JSON from JSOL 
     var i = 0; 

     for (i; i < arr.length; i += 1) { 
      if (!this.keyValueInModel('id', arr[i].id)) { 
       Model.content.push(arr[i]); // push the record into your model 
       myView.render([arr[i]]); // render the record to the view 
      } 
     } 

    }, 

    keyValueInModel: function (key, val) { 
     var i = 0, 
      result = false, 
      arr = Model.content; 

     for (i; i < arr.length; i += 1) { 
      if (arr[i][key] === val) { 
       return true; 
      } 
     } 

     return false; 
    } 
}; 


// My View 
var myView = { 

    context: null, // +1 if you figure out why you should context your view to a specific node, and actually do it. I figure I will leave you some room to learn.... 



    render: function (records) { 

     var i = 0, 
      dat; 

     for (i; i < records.length; i += 1) { 
      dat = records[i]; 

      $("body").append(

       '<div data-role="page" id="' + dat.pagename + '" data-title="' + dat.pagename + '">' + 
       '<div data-role="header">' + 
       '<h1>' + dat.post_title + '</h1>' + 
       '<a data-role="button" href="#news" data-transition="flip" data-icon="arrow-l" data-corners="false">Back</a>' + 
       '</div>' + 
       '<div data-role="content">' + 

       '<img src="http://192.168.0.102/uploads/' + dat.imageurl + '" alt="' + dat.post_title + '" />' + 

       '<p>' + dat.description + '</p>' + 

       '</div>' + 
       '<div data-role="footer">' + 
       '<h2>Copyrights All rights Reserved by ABC</h2>' + 
       '<p class="copyright">&copy; Copyright 2015</p>' + 
       '</div>' + 
       '</div>'); 

     } 

     $("#grid").append(

      '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="portfolio-item ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-btn-up-c ui-corner-none"><div class="ui-btn-inner ui-li ui-li-has-alt">' + 
      '<div class="ui-btn-text">' + 
      '<a href="#' + dat.pagename + '" class="ui-link-inherit ui-corner-none">' + 
      '<img src="http://192.168.0.102/uploads/' + dat.imageurl + '" class="ui-li-thumb ui-corner-none">' + 
      '<h3 class="ui-li-heading">' + dat.post_title + '</h3>' + 
      '<p class="ui-li-desc">' + dat.post_content + '</p>' + 
      '</a>' + 
      '</div>' + 
      '</div>' + 
      '<a href="#portfolio1" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c">' + 
      '<span class="ui-btn-inner"><span class="ui-btn-text">' + 
      '</span>' + 
      '<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-r" data-iconpos="notext" data-theme="b" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></span></span></span></a>' + 



      '</li>' 




     ); 
    } 
}; 

setTimeout(Model.getNewData, 2000);