pubnub：DOM元素的值發生了變化，但視覺不變

我在Android手機上創建了一個測試應用程序，它通過ajax從rails服務器獲取json數據。我用PUBNUB設置了rails和android手機之間的實時推送功能。 rails服務器是發佈者，android手機是訂閱者。pubnub：DOM元素的值發生了變化，但視覺不變

問題：手機以json的形式獲取實時數據。但是，問題是我不能這樣做multiple DOM manipulation INSIDE THE PUBNUB success callback。這似乎很奇怪。

當有實時更新時會發生什麼。

背景：

我有一個頭的圖像，UI酒吧，內容區域和頁腳。
在UI-Bar中有通知圖像。如果有新的報價，那麼它應該變成綠色，否則它會保持紅色。

應該發生什麼

那麼，有什麼新的報價實時推送，新的報價應該在列表中預先考慮並通知圖像應亮成綠色。

究竟happend

Scenario 1

當內容爲空，先推，該項目被正常推通知圖像變成綠燈，通常在同一時間。我使用從訂閱接收的json數據並將其用在html標記中，例如$（'＃some_id'）。html（'從訂閱收到數據的一些html標記'）;

Scenario 2

說，你承認的通知，並將其變回紅色。現在，新的場景是：我已經推送了一個項目，並且通知圖像已被確認（紅燈）。

現在，當第二個項目被按下時，該項目被正常推送，但通知圖像不會變成綠燈。如果您按下屏幕區域的任何地方，它只會變成綠燈。

Scenario 3

有了相同的情況NUM 2即列表中，並通知一個報價已經被確認。

用戶只有在4次下一次實時按下後才能看到綠燈，即5個全部在列表中。第五個接觸電話的頁腳。之後，實時更新功能正常;將項目預先插入列表中，並且每次推送時通知圖像都會變爲綠色（如果此前爲紅色）。

Scenario 4

如果你不嘗試推到列表中任何東西，但僅在通知圖像正常上每一個成功的擠壓測試，它的工作原理精絕。

TEST

在方案2中，我把警示語句之前和DOM操作後看到通知圖像。警報語句顯示值的變化，但是the visual does not change。

alert($('#home_notification').html()); 
$('#home_notification').html('<img alt="Greenlight" height="31px" src="css/images/greenlight.png" class="notification_img" width="35px">'); 
alert($('#home_notification').html());

以下是我的HTML頁面的腳本標記片段。

$(document).ready(function(){ 
    PUBNUB.subscribe({ 
    channel : "rails",  // CONNECT TO THIS CHANNEL. 
    restore : false,    // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED 
            // OR WHEN PAGE CHANGES. 
    callback : function(message) { // RECEIVED A MESSAGE. 
      var month=new Array(); 
      month[0]="Jan"; 
      month[1]="Feb"; 
      month[2]="Mar"; 
      month[3]="Apr"; 
      month[4]="May"; 
      month[5]="Jun"; 
      month[6]="Jul"; 
      month[7]="Aug"; 
      month[8]="Sep"; 
      month[9]="Oct"; 
      month[10]="Nov"; 
      month[11]="Dec"; 


      //***************This is the offer that will get prepended in the list************************* 
      $('#offers_table').prepend('<tbody><tr class="offer_list_unread"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/' + message['code'] + 'o.png" width="60px"></td><td class="description"><h3>'+ message['description']+ '</h3><p>Start Date: '+ month[(new Date(message["startdate"])).getMonth()] + ' ' + (new Date(message["startdate"])).getDate() +', '+ (new Date(message["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(message["enddate"])).getMonth()] + ' ' + (new Date(message["enddate"])).getDate() +', '+ (new Date(message["enddate"])).getFullYear() +'</p></td><td class="mark_as_read"><img alt="Unread1" class="unread" src="css/images/unread1.png"><p class="read" style="display:none">offers/'+message['id']+'</p></td></tr></tbody>'); 


      //**************************This is where I have am having issues**************************** 
      //**************************THIS IS NOT SHOWN IN THE VISUALS AFTER SECOND REAL TIME PUSH******************************** 
      $('#home_notification').html('<img alt="Greenlight" height="31px" src="css/images/greenlight.png" class="notification_img" width="35px">'); 
     } 


    }); 
});

來源

2012-09-21 sagar pant

我們正在調查這一點。我相信我們可以爲你正確地工作！ :-) – PubNub

您可以發送給我們一個完整的html頁面給我們的[email protected]電子郵件地址，然後我們可以按照預期爲您工作。 – PubNub

當然我會做。謝謝。 –

我認爲這不是PubNub的問題，但與Android。我一直在努力解決同樣的問題幾天，還沒有找到解決方案。症狀是相同的：在回調（任何回調，從異步AJAX請求，甚至從setTimeout），我可以更新JavaScript對象（並看到它），但任何更新的DOM都被忽略。有趣的是，如果我使用同步AJAX請求，那麼DOM更新會在jQuery AJAX回調中執行。更有趣的是，如果我在同步AJAX回調中使用setTimeout（僅用於測試），那麼DOM更新不會在setTimeout回調中執行。因此，出於某種原因，股票Android瀏覽器不喜歡在任何異步回調中更新DOM。如果執行是連續的（與同步AJAX一樣），DOM會被更新。我在使用Android 4.0的三星G2上進行測試。在任何桌面瀏覽器和iOS上（使用PhoneGap），相同的代碼工作正常，但在Android上（使用PhoneGap）無法正常工作。

聽到別人對此的想法會很有趣。

來源

2012-10-05 20:14:49 andrew

pubnub：DOM元素的值發生了變化，但視覺不變

回答

相關問題