Solved

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

Posted on 2015-02-10
5
129 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 33

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 33

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 33

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now