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元素的值发生了变化，但视觉不变

回答

相关问题