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

Posted on 2015-02-10
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
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 500 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 500 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 - = "#00f"; = "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 - = "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 (, 'slide.jpg', -64) ">

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can't get js code to execute 8 30
Use Mid in Html 6 21
Problem evaluating javascript equality expression 8 17
How do I post more than 1 item to php backend 24 27
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

713 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