Solved

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

Posted on 2015-02-10
5
136 Views
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();
0
Comment
Question by:student237
  • 3
5 Comments
 
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
0
 
LVL 34

Expert Comment

by:Slick812
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.
0
 

Author Comment

by:student237
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 ;  

}
0
 
LVL 34

Accepted Solution

by:
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.
0
 
LVL 34

Assisted Solution

by:Slick812
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 -
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) ">
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying 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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

831 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