1

我正在 Android 手机上创建一个测试应用程序，它通过 ajax 从 Rails 服务器获取 json 数据。我已经在rails和带有PUBNUB的android手机之间设置了实时推送功能。rails 服务器是发布者，android 手机是订阅者。

问题：手机获取json格式的实时数据。但是，问题是我做不到multiple DOM manipulation INSIDE THE PUBNUB success callback。这看起来绝对很奇怪。

当有实时更新时应该发生什么。

背景：

  1. 我有一个标题图像、一个 ui 栏、内容区域和一个页脚。
  2. 在 UI-Bar 中有一个通知图像。如果有任何新的报价，那么它应该亮成绿色，否则它会保持红色。

应该发生什么

因此，有任何实时推送的新报价，新报价应预先添加到列表中，并且通知图像应点亮为绿色。

实际发生了什么

Scenario 1

  1. 内容为空时，第一次推送，item正常推送，同时通知图片正常变为绿灯。我使用从订阅收到的json数据，并在html标签中使用，例如$('#some_id').html('some html tags with data received from subscription');

Scenario 2

说，您确认了通知，它又变回红色。现在，新场景是：我已经推送了一个项目并且通知图像已经被确认（红灯）。

  1. 现在，当第二个项目被推送时，该项目被正常推送，但通知图像没有变成绿灯。如果您按屏幕区域的任何位置，它只会变成绿灯。

Scenario 3

使用与 num 2 相同的场景，即列表中的一个报价和通知已被确认。

  1. 用户只有在下一次实时推送 4 次后才能看到绿灯，即列表中总共有 5 次。第五个触摸电话中的页脚。之后实时更新功能正常；将项目添加到列表中，并且通知图像在每次推送时变为绿色（如果之前为红色）。

Scenario 4

  1. 如果您不尝试将任何内容推送到列表中，而仅测试通知图像在每次成功推送时是否正常运行，那么它绝对可以正常工作。

TEST

在场景 2 中，我使用 alert 语句来查看 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">');
        }


   });
});
4

1 回答 1

1

我认为这不是 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-05T20:14:49.250 回答