how to trigger onclick code after refresh when the state is retained using PHP sessions

I'm using php session variables to retain page state, as in the example below, it's to maintain the fact that a element has been clicked and receives a new class. The class is removed later if it is clicked a second time.

However I am also setting a global variable so that my client side "knows" the state and executing some other code that affect other elements on the page elsewhere (highlights them). This code uses the "this" of the clicked element to know how to highlight the other elements. <==== this is the important bit.

$("listRow").click(function(){

    if (globalVariable == "someClass")
    {
        // clean global
        globalVariable = " ";

    /* call a server side script via ajax to unset php session variable */

    }else{ 

    /* call a server side script via ajax to create a php session variable, later used on page refresh to retain page state*/
        // also set a global js variable for use elsewhere
        globalVariable = "someClass";

};

$(this).toggleClass(".someClass");

// alot of code to do something to other elements on the page using some data that is specifically available in this element

});

Now imagine this normal scenario:

• User clicks listRow triggering the code. // everything fine so far

• User refreshes the page : listRow gets the class it needs BUT.... none of the other elements get highlighted. This happens because the listRow hasn't been clicked, and I get this.

So what I want to do is create a small function that contains the code to highlight the other page elements.

I have a number of preconditions: All the javascript including global variables are contained in external js files. It is not allowed to put raw js into the markup. i.e. the limitation is that I cannot declare a global variable in the and then use php to populate it from the session variable.

I think that I can identify the fact that the item has been affected by php by doing the following. I 开发者_如何学Csay I think because I'm not sure if this is asking the question "if any element in the listRow..." or if the expression can identify the specific element somehow.

function mySelfStarter()
{

if ($("listRow").hasClass("someClass"))
{
      // some code
};
};

I know I can simply cause the function to execute on refresh like this somewhere in the document onload:

mySelfStarter();

What I want to do is find the element that has the class someClassand then find the id and then use this id to set both the global variable and the highlighting of other non- related elements. And this all has to be client side code.

Something like:

if ($("listRow").hasClass("someClass"))
{
// find the element that has the class "someclass"
// get the id of this element
// do something with id
     };

newly served page before click

<div id="listWrapper" class="wrapper">
    <div id="value1"      class="listRow"></div>
    <div id="value2"      class="listRow"></div>
    <div id="value3"      class="listRow"></div>
    <div id="value4"      class="listRow"></div>
</div>

after click

<div id="listWrapper" class="wrapper">
    <div id="value1"      class="listRow"></div>
    <div id="value2"      class="listRow someClass"></div>
    <div id="value3"      class="listRow"></div>
    <div id="value4"      class="listRow"></div>
</div>

after page refresh

<div id="listWrapper" class="wrapper">
    <div id="value1"      class="listRow"></div>
    <div id="value2"      class="listRow someClass"></div>
    <div id="value3"      class="listRow"></div>
    <div id="value4"      class="listRow"></div>
</div>

I'm not sure I follow, but if you're saving the state on your php session, you can check for that before rendering the page and if the session says the element was clicked, then also render a small js script that will trigger the click event on your element. That way, you get all the side efects you need, just as if the user had clicked the element.

You can trigger a click event by doing something like:

 $("#element").trigger("click");

Edit with the final solution

How about this:

 $("listRow.someClass").each(function(){ 
    // - this: Is the element with the class 
    // - $(this).attr("id"): Is the ID of that element
    // do something with id 
  }); 

How about now? BTW, doing $("listRow") won't probably find anything, since you're telling JQuery to look for a tag called "listRow", are you sure you're not missing a "." or a "#" there?