2015-02-08 38 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);