Home:ALL Converter>pubnub: The DOM element's value change, but the visual do not change

pubnub: The DOM element's value change, but the visual do not change

Ask Time:2012-09-22T04:04:21         Author:sagar pant

Json Formatter

I am creating a test app on Android phone, which gets json data via ajax from rails server. I have set up the real time push functionality between rails and the android phone with PUBNUB. The rails server is the publisher and the android phone is the subscriber.

Issues: The phone gets the real time data in the form of json. But, the issue is I cannot do multiple DOM manipulation INSIDE THE PUBNUB success callback. This seems absolutely weird.

What should happen when there is a real time update.

Background:

  1. I have a header image, a ui-bar, content area and a footer.
  2. In the UI-Bar has a notification image. If there is any new offer, then it should light into green else it stays red.

What should happen

So, there is any new offer pushed in real time, the new offer should be prepended in the list and the notification image should light into green.

What actually happend

Scenario 1

  1. When the content is empty, for the first push, the item gets pushed normally and the notification image turns into green light normally at the same time. I use the json data received from the subscription and use it in the html tags, such as $('#some_id').html('some html tags with data received from subscription');

Scenario 2

Say, you acknowledged the notification and it turns back to red. Now, the new scenario is: I have one item pushed already and the notification image is already acknowledged (red light).

  1. Now, when the second item is pushed, the item gets pushed normally, but the notification image does not turn into green light. It will only turn into green light if you press anywhere in the screen area.

Scenario 3

With the same scenario as num 2 i.e. one offer in the list and notification already been acknowledged.

  1. The user will be able to see the green light only after 4 next real time pushes, i.e. 5 all together in the list. The fifth one touches the footer in the phone. After that the real time update functions properly; prepends the item into the list and the notification image turns green on every push (if it was red earlier).

Scenario 4

  1. If you do not try to push to the list anything, but test only if the notification image is functioning properly on every successful push, it works absolutely fine.

TEST

On scenario 2, I put alert statement to see the notification image before and after the DOM manipulation. The alert statements show changes in values, but 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());

Below is the my script tag snippet from the html page.

$(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">');
        }


   });
});

Author:sagar pant,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12537463/pubnub-the-dom-elements-value-change-but-the-visual-do-not-change
yy