Response title
This is preview!
Move this topic
.addClass not updating page, but does through debugger!
in Using jQuery
•
8 years ago
I have this simple section of code:
- if (field != null) {
- var data = snapshot[key];
- var value = data['name'] ? data['name'] : data;
- var prevValue = field.val();
- field.val(value);
- if (prevValue != value) {
- field.addClass('lvd-value-changed');
- }
- else {
- field.removeClass('lvd-value-changed');
- }
- }
I am using a socket technology that sends the data directly to the browser. I get a snapshot of data as JSON. I am able to see the values change correctly. What I am not seeing is the CSS styles from the addClass / removeClass calls. If I step though the code with FireBug or Chrome debugger then I do see the CSS style changes.
Any times are greatly appreciated!
1
Replies(17)
I would like to know the values of prevValue and value. It sound like they are equal.
JΛ̊KE
At line 7 add some debugging like
- console.log( prevValue != value, prevValue , value )
JΛ̊KE
PS What language are you using to keep the socket open? I use Node.js for a current project.
Leave a comment on jakecigar's reply
Thanks for the reply. Like I said, it does work through the debugger as expected. I see the CSS class code get set and the input text field changes. If I run it without a breakpoint, then nothing changes. I still see the values appear in their respective text fields, but the CSS change appears to have no affect. I put an alert(...) in the section before that block of code and they are in fact different.
I should clarify, if I set a breakpoint and step through with F8 (Chome and Firebug) then I see the changes. If I turn off the breakpoint and just let it fly, no CSS changes are visible.
Leave a comment on Michael Angelo's reply
I haven’t seen enough of your code to make any judgments. If you add that debugging like, you will see what’s going on.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
So, there is nothing that needs done to allow the browser to 'catch up' and apply the styles? That's the best way that I can describe it. The socket implementation that I'm using is Atmosphere. I am using it in another section to update a Google map and it works perfectly.
I'll do more debugging, but I can't see why everything works when I step through the code, but not when I run it.
Leave a comment on Michael Angelo's reply
I just did another test which proves that there needs to be some type of delay in order for the page to reflectg the CSS change.
- if (field != null) {
- var data = snapshot[key];
- var value = data['name'] ? data['name'] : data;
- var prevValue = field.val();
- field.val(value);
- if (key == "longitude" || key == "latitude") {
- alert("test");
- }
- if (prevValue != value) {
- field.addClass('lvd-value-changed');
- }
- else {
- field.removeClass('lvd-value-changed');
- }
- }
Just by adding that alert, I see all of the appropriate fields get highlighted.
Leave a comment on Michael Angelo's reply
None of the code you showed would require a delay.I haven’t seen enough of your code to make any judgments.
JΛ̊KE
Leave a comment on jakecigar's reply
I agree, but this makes absolutely no sense. Whenever I create some kind of pause, the proper CSS is displayed on all of the fields.
Leave a comment on Michael Angelo's reply
You're showing us a little snippet of code. I guess that's better than nothing. But absolutely nothing about when/where you make use of that snippet.
Leave a comment on watusiware's reply
Here is the complete function:
- function updateLvd(data) {
- var snapshot = data.snapshot;
- for (var key in snapshot) {
- if (snapshot.hasOwnProperty(key)) {
- var field = $("[id*='" + key + "']");
- if (field != null) {
- var data = snapshot[key];
- var value = data['name'] ? data['name'] : data;
- var prevValue = field.val();
- field.val(value);
- if (prevValue != value) {
- field.addClass('lvd-value-changed');
- }
- else {
- field.removeClass('lvd-value-changed');
- }
- }
- }
- }
- }
Unfortunately, that's all that there is to see. I am using Primefaces p:socket tag which is used with Atmosphere. The tag looks like this:
- <p:socket channel="..." onMessage="updateLvd"/>
Each time the event (from another application) is triggered, the Javascript method is called automatically.
Leave a comment on Michael Angelo's reply
Not sure if this is the answer…
- var field = $("[id*='" + key + "']");
- if (field.length) { // it is never null!
And
- if (prevValue != value) {
- field.addClass('lvd-value-changed');
- }
- else {
- field.removeClass('lvd-value-changed');
- }
could be coded as
- field.toggleClass( 'lvd-value-changed" , prevValue != value )
Leave a comment on jakecigar's reply
I can try this. I will shortly. I must repeat again though that this works when I step line by line through the browser debugger. This stepping is causing a pause of some sort that allows the UI to update.
Leave a comment on Michael Angelo's reply
I just tried your suggestions and have the same issue. I stepped through with the debugger and then the fields are highlighted correctly.
Thanks for the effort.
Leave a comment on Michael Angelo's reply
Can you share a link or running demo that has the problem?
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
I really wish that I could. I have a web application running that holds this page. I then have a test harness which is a java based CL app that sends the Atmosphere events.
I have no way to share this setup.
Leave a comment on Michael Angelo's reply
Have you tried using setTimeout to delay the class setting?
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
I have. This is my latest attempt:
- function updateLvd(data) {
- var snapshot = data.snapshot;
- setTimeout(function() {
- for (var key in snapshot) {
- if (snapshot.hasOwnProperty(key)) {
- var field = $("[id*='" + key + "']");
- if (field.length) {
- var data = snapshot[key];
- var value = data['name'] ? data['name'] : data;
- var prevValue = field.val();
- field.val(value);
- field.toggleClass( 'lvd-value-changed' , prevValue != value );
- field.hide();
- field.show();
- }
- }
- }
- }, 0);
- }
Leave a comment on Michael Angelo's reply
Well, I know why it wasn't updating, but I don't know how to fix it. I am using a Primefaces p:dialog. The edit controls are on this dialog. Just out of curiosity, I took it out of the dialog and placed it on the parent page. The CSS toggle now works just fine.
I guess I have more investigating to do.
Thanks for all of your help!
Leave a comment on Michael Angelo's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Michael Angelo's question
{"z35858852":[14737000005167786,14737000005166783,14737000005166785,14737000005167799,14737000005167801,14737000005167819,14737000005167821,14737000005167823,14737000005167825,14737000005171085,14737000005171093],"z7664639":[14737000005167817],"z2950240":[14737000005165915,14737000005165923,14737000005165927,14737000005165939,14737000005165941,14737000005165943]}
Statistics
- 17 Replies
- 7020 Views
- 1 Followers