Go Premium for a chance to win a PS4. Enter to Win


How to change css class at run time and restrict the ajax to call at once only.

Posted on 2015-02-10
Medium Priority
Last Modified: 2015-04-05
Hi Experts,

See the following code.  Basically on mouse over and out events the div name is passed to this function. I just for an example made variables but actually they are passed in parameter to the javascript function.
The below code works fine, the id of element is replaced with new one and this new id has different style (image) so it works fine. Now I moved this login into Ajax and at run time it is called. So some time mouse over is in process then mouse out is called and at some point when code tries to get the id of element, it gets null, i think one ajax call is in process where second has called.
My thinking is .. if I change this code to change the css class  instead of replacing to id, it will work. In this case there is always be id. but only issue is may be one ajax call is updating it while other will try to find it.

So my issue is:
1. how to change this code so that instead of id, it should change the class of fixed id.
2. is there any way that I can restict that unless on ajax function call is not complete do not call the other.
All mouse events call same function of a javascirpt for ajax call with different parameters.
Please note that I had just submitted partial code, in actually these divs elements (with image backgrounds ) are in large quantity.

#page-sidediv{ vertical-align: middle;display: inline-block;background:url(../images/side.jpg) 0 -984px; width: 20px; height: 20px; }
#page-topdiv{ vertical-align: middle;display: inline-block;background:url(../images/top.jpg) 0 -96px; width: 20px; height: 20px; }
#page-bootomdiv,#page-footerdiv{ vertical-align: middle;display: inline-block;background:url(../images/footer.jpg) 0 -960px; width: 20px; height: 20px; }

var newDivName='side div';
var oldDivName='top div';

call-ajax-functin(param1,newDivName,oldDivName); // this function brings some information from database.

var divID=newDivName.replace(' ','');
var divIDOld=oldDivName.replace(' ','');
document.getElementById("page-" + divIDOld.toLowerCase()).id = 'page-' + divID.toLowerCase();
Question by:student237
  • 3
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40603014
it's not clear what you're trying to acheive.

describe what the goal is without going into the code. i suspect there is probably a better way to acheive your goal than what you are doing.

please post a link to the page. this is the absolute best way for people to help you. if you cant post a link, create a sample on jsfiddle.com
LVL 34

Expert Comment

ID: 40603512
greetings  student237, , It sounds like you are expecting "instant" function returns, as if you do function calls in javascript. However, when you use AJAX, your function response time can vary greatly, AND, they are Asynchronous! This means that a function (to ajax server) can finish, and that function can go again, Even though the first sever return HAS NOT COME BACK YET. I almost always set up a "Blocking" variable that starts as true, and when an Ajax call is made, it becomes false, and being false, will NOT allow that function to call the ajax again (block it), until there is an ajax response from server, to set it back to true.  It is my view, that having mouse over to AJAX is a poor design, because, when the user is just moving mouse around the interface, they can mouse over 4 or 5 elements very rapidly (by accident) just to scroll the page on right. By using the CSS :hover  you can change the CSS specs for any CSS class name on mouse over, which is effective, and does not require any javascript., I have found it to be much more efficient, to get all of the server database info in to javascript variables (arrays, objects), in the server page design, and NOT call ajax a thousand times for mouse overs that only get small info packets from server.

Also, in Mobil touch screen, there is NO MOUSE OVER, and all of that code is ineffective on a phone.

Author Comment

ID: 40608011
Thank you Slick812,
Can you give me an example how to make blocking variable;

For example if i create three function one is called on mouse over, mouse out and ajax function.
(Please note that code and names are just for example just I am trying to get idea how to block ajax mulitple call.

function myMouseOver(divId) {
    var elemOld = document.getElementById("oldDivId")..innerHTML();
    var  elemNew = document.getElementById(divId)..innerHTML();
    AjaxCall(elemOld ,elemNew ,'mouseOver');
     document.getElementById("oldDivId")..innerHTML()= elemNew ;  

function AjaxCall(newDIvId,oldDivId,functionType) {
  // create parms
  if(functionType=='mouseOver') {
     //call database with table 1 for some info.
  } else if(functionType=='mouseOut') {
   //call database with table 2 for some info.
function myMouseOut(divId) {
    var elemOld = document.getElementById("oldDivId")..innerHTML();
    var  elemNew = document.getElementById(divId)..innerHTML();
    AjaxCall(elemOld ,elemNew ,'mouseOut');
     document.getElementById("oldDivId")..innerHTML()= elemNew ;  

LVL 34

Accepted Solution

Slick812 earned 2000 total points
ID: 40608225
????, I looked at your code with the -
     function AjaxCall(newDIvId,oldDivId,functionType) {

However, in that there is NO XMLHttpRequest Object return function like -
      ajaxObj.onreadystatechange =

This is where you would set the global blocking variable (block) to TRUE with something like -
    if (ajaxObj.readyState == 4) { block=1;

= = = = = = = = = = = = =
But as I said using an Ajax call on a mouse over is very very Inefficient, and in my view a bad decision for proper functioning and adequate  timing operations.
LVL 34

Assisted Solution

Slick812 earned 2000 total points
ID: 40608449
OK, , After I posted , I went and looked at some pages Ajax operation codes that I have done, with some Ajax returns changing a large number of different things on a page, including CSS background image, several many CSS properties like -
elDOM.style.backgroundColor = "#00f";
abDOM.style.display = "none";

I have also changed the CSS style class name like -
document.getElementById("elem1").className = "changer";

But I have Never changed any element ID, because that ID is a special and unique Identifier for the JS DOM lookup function.

It looks like you are changing the ID in order to change the CSS properties, as you have stuff like -
#sidediv1{ background:url(../images/side.jpg) 0 -984px; }
#sidediv2{ background:url(../images/side.jpg) 0 -64px; }

there is the javascript -
elDOM.style.backgroundImage = "url('images/slide.jpg') 0 -64px";
which can change the back image position, WITHOUT any change to the class name. . However, if you use the same back image (slide), you can just get a Position, and then do -

function changeBack (id, img, pos) {
document.getElementById(id).style.backgroundImage = "url('images/"+img+"') 0 "+pos+"px";

and maybe call it from an element like -
<div id="chng1" onmouseover="changeBack (this.id, 'slide.jpg', -64) ">

Featured Post

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question