Jquery functions in array

Question

Hello evryone.

I have a litle problem with my Javascript functions.

It might be a litle deep into my code as well but im prety sure someone on Stackoverflow know the awnser!

Ok first i have a PHP session that i use to save my image id's

Then i have a page that shows 5 images at a time with a JQuery Click fonction to browse my images

The functions i use :

$(document).ready(function() {    <---- i click the arrow
  $("#imgnext").click(
 function(){

    if(session_set("session_next")== true){    <-------- calling session_set()

     img_set_1("img1_hover","1","next","cie_name");  <--------Calling img_set_1()
     img_set_2("img2_hover","2","next","cie_name");  <------same for all 5 imgs
     img_set_3("img3_hover","3","next","cie_name");
     img_set_4("img4_hover","4","next","cie_name");
     img_set_5("img5_hover","5","next","cie_name");

                                   }

                   }

  );

  $("#imgprev").click(
 function(){

      if(session_set("session_previous")== true){
         img_set_1("img1_hover","1","prev","cie_name");
         img_set_2("img2_hover","2","prev","cie_name");
         img_set_3("img3_hover","3","prev","cie_name");
         img_set_4("img4_hover","4","prev","cie_name");
         img_set_5("img5_hover","5","prev","cie_name");
                                     }

         }

  );


});

The if condition was to make sure that the id got updated.

The code works but there is a catch.

If i click the arrows to fast my session img id get messed up.

For example i set the img id to 10.

img_set_1("img1_hover","1","next","cie_name");

is returning the right img id in the field wich is 10+1 cuse its the img in div img1_hover

and i have 5 divs like that. so every time i see 5 imgs i increment the session img id by 5 so i can see the 5 next imgs.

Since i did a condition to see if my session id incrementation was returning true i was expecting the img id's to be all the same. But no!

if i click my arrows to fast the session id get messed up on the page

Anyone have an idea?

The session set() function

function session_set(action) {
    var xhr1 = getXMLHttpRequest();
    xhr1.onreadystatechange = function() {
     if (xhr1.readyState == 4 && (xhr1.status == 200 || xhr1.status == 0)) {
      document.getElementById(box).innerHTML=xhr1.responseText;

     }
    };


    var sVar7 = encodeURIComponent(action);

    xhr1.open("GET", "ajax.php?variable7=" + sVar7, true);
    xhr1.send(null);
        return true;
}

Now the session img id is set. if action = 'session_next' i increment by 5 otherwise its previous with minus 5.

the img set x() function:

   function img_set_1(box_1,sessionid,action,cie) {
    var xhr1 = getXMLHttpRequest();
    xhr1.onreadystatechange = function() {
     if (xhr1.readyState == 4 && (xhr1.status == 200 || xhr1.status == 0)) {
      document.getElementById(box_1).innerHTML=xhr1.responseText;
     }
    };
    var sVar1 = box_1;
    var sVar6 = sessionid;
    var sVar7 = encodeURIComponent(action);
    var sVar8 = encodeURIComponent(cie);
    xhr1.open("GET", "ajax.php?variable1=" + sVar1 + "&variable6=" + sVar6 + "&variable7=" + sVar7 + "&variable8=" + sVar8, true);
    xhr1.send(null); 
    return true;
}

This function return to me the session id+ img position. im calling 5 function like that to change my 5 images.

Answer 1

General idea:

• Declare a global variable, set it to true in your click event.
• Set it to false when your session has been updated (when you get a response?).
• Check the global variable at the beginning of the click event. If it is true, cancel the click event (by returning false).

Answer 2

i got it!!!!

i was calling all function at anytime. Now im calling the functions when i change the session id

istead of calling set_session() then my 5 other function.

i called set_session() and moved the 5 img function inside it and call them on readystate.

seams to be working.