Databases
StackOverflow2013
Postsdbo
POChrome doesn't displays the dynamic css propery change by Jquery before Ajax sync call
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome doesn't displays the dynamic css propery change by Jquery before Ajax sync call
    text
    copied!<p>I have a tricky problem with Google Chrome Browser.</p> <p>I have the folowing HTML node:</p> <p><code>&lt;div class="result-req-chat pointer float-right" onclick="chat.addUser(this/*, other vars*/)" &gt;&lt;img src="/images/profile_icon_4.png" alt="" /&gt;&lt;/div&gt;</code></p> <p>On the click event it triggers the chat object's method </p> <pre><code> this.addUser = function(trigger_node, id, is_silent, session, show_block_message){ if(trigger_node){ this.bk_trigger_node.html = trigger_node.innerHTML; this.bk_trigger_node.cn = trigger_node.className; trigger_node.innerHTML = ''; jQuery(trigger_node).addClass("loader"); jQuery(trigger_node).removeClass("bpurple"); jQuery(trigger_node).removeClass("bgray"); jQuery(trigger_node).removeClass("button"); } //alert('if this is executed then it displays the previous changes of the node'); if(trigger_node.innerHTML == ''){ this.addUserToChat(id, is_silent, session, show_block_message); } if(trigger_node){ trigger_node.innerHTML = this.bk_trigger_node.html; trigger_node.className =this.bk_trigger_node.cn; } } </code></pre> <p><code>addUserToChat()</code>:</p> <pre><code> this.addUserToChat = function (id, is_silent, session, show_block_message){ var response = this.chat_tabs.addTab(id, null); if(response.error){ callUrl("/me/chat/remove-session/id/"+id); this.chat_tabs.removeTab(id); if(show_block_message) alert(response.message); }else{ this.createTabsBar(); if(!is_silent){ this.switchTab(id); this.resetContainer(is_silent); } if(id == this.chat_tabs.active_tab){ this.active_chat_obj.refresh(session); } if(this.closed){ if(this.stop_check){ return; } this.resetContainer(); this.switchTab(id); } callUrl("/me/chat/add-session/id/"+id); } } </code></pre> <p><code>chat_tabs.addTab():</code></p> <pre><code> // creates and adds the a tab this.addTab = function(id,name,user_data,session){ var exists = this.getTab(id); if(!exists){ if(session){ var user_session_id = session.id; var user_session_data = session.data; }else{ var session = this.createSession(id); if(session.error){ return session; } var user_session_id = session.id; var user_session_data = session.data; } if(name){ var user_name = name; }else{ var user_name = this.getName(id); } if(user_data){ var user_data = user_data; }else{ var user_data = this.getData(id); } var ob = new Object({ user_id: id, user_name: user_name, user_data: user_data, user_session_id: user_session_id, user_session_data: user_session_data, has_new:false, chat_screen: new ChatScreen(session, id, user_name, user_data, this.main_user_id, this.main_user_photo) }); this.chat_users.push(ob); return ob; }else{ return exists; } } </code></pre> <p><code>callUrl():</code></p> <pre><code> function getUrl(url){ return jQuery.ajax({ type: 'GET', url: url, async: false }).responseText; </code></pre> <p>}</p> <p>The point is that the method <code>addUserToChat()</code> contains a syncronous Ajax call.</p> <p>The problem with Chrome is that the <code>trigger_node</code> changes aren't displayed. If you watch with the built-in JS debuger then everithing goes ok ( even with displaying ) .Also if you uncomment the alert.</p> <p>It runs on Mozilla ( latest version ).Also the Crome is the latest version. I can observe that in the time that it waits for the ajax response, the page is unresponsive to events like hovers, tips etc.</p> <p>Do you have any suggestions for this? How can I implement a workarround method?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload