Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2015-02-10
5
Medium Priority
?
143 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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.
0
 
LVL 34

Assisted Solution

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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

715 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