Railsサーバーからajax経由でjsonデータを取得するAndroidフォンでテストアプリを作成しています。PUBNUB を使用して、Rails と Android フォンの間でリアルタイム プッシュ機能をセットアップしました。Rails サーバーがパブリッシャーで、Android フォンがサブスクライバーです。
問題: 携帯電話はリアルタイム データを json 形式で取得します。しかし、問題は私ができないことですmultiple DOM manipulation INSIDE THE PUBNUB success callback。これは絶対に奇妙に思えます。
リアルタイムの更新がある場合に何が起こるべきか。
バックグラウンド：
- ヘッダー画像、UI バー、コンテンツ領域、フッターがあります。
- UI-Bar には通知イメージがあります。新しいオファーがある場合は緑色に点灯し、そうでない場合は赤色のままです。
何が起こるべきか
そのため、リアルタイムでプッシュされる新しいオファーがあり、新しいオファーがリストの先頭に追加され、通知イメージが緑色に点灯するはずです。
実際に起こったこと
Scenario 1
- コンテンツが空の場合、最初のプッシュでは、アイテムが正常にプッシュされ、同時に通知イメージが正常に緑色に変わります。サブスクリプションから受け取った json データを使用し、それを $('#some_id').html('some html tags with data received from subscription'); などの html タグで使用します。
Scenario 2
たとえば、通知を確認すると、赤に戻ります。ここで、新しいシナリオは次のとおりです。既に 1 つのアイテムがプッシュされており、通知イメージは既に確認されています (赤信号)。
- これで、2 番目のアイテムが押されると、アイテムは正常に押されますが、通知イメージは青信号に変わりません。画面領域のどこかを押すと、緑色のライトに変わります。
Scenario 3
番号 2 と同じシナリオ、つまり、リスト内の 1 つのオファーと通知が既に承認されています。
- ユーザーは、次の 4 回のリアルタイム プッシュ (リスト内で 5 回のプッシュ) の後にのみ、緑色のライトを見ることができます。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">');
}
});
});