How to store select checkbox info across jquery paging?

I'm not an expert in this, but I would try cookies.  Cookies should be easy to use.  Here is a plugin: http://plugins.jquery.com/project/Cookie

Hope this helps.

Is there any particular reason you want to do it with jQuery?

You can append values to the url and read them in and out with the magic of javascript. This is not the sort of thing you really need to load an additional library for.

Course, some people use jQuery to add two numbers together. Whatever floats your boat.

You can read the values from url and store them in a variable, then this variable can be manipulated upon selection-deselection.


to get the values from url you can use
say the url is www.xyz.com?id=4_20_22_25

        var loc = window.location.href;
      var str = loc.search("id=");
      if(str!=-1){
            var items = loc.substr(loc.search("id")+3);
      }
here you'll get the selected items separated by "_"
var values=items.split("_");
here you got the values in the form of array. now you can process it and upon each submission you need to add the id with the url to pass the values to the next page.

I am trying to follow the model of the coders before me, since I'm not sure what the rules of writing with JQuery are I'm just trying not to make a mistake, rather than being pro one way of solving or another. The URL is called via Jquery, so there you go.

It's really very frustrating to someone who is used to code that doesn't try to hide itself. For instance the search results are loaded into a Div that won't even display when you do a browser "show source code. "

In index.php there is a results placeholder

    <div id = "results"></div>

 and navigation (NEXT page shown here)
     <p class = "next_inactive" onclick = "getResults('next');" title = "Next page" id = "btnNext">Next</p>

The getResults('next') javascript function hides the current results

    document.getElementById('results').style.visibility = 'hidden';


Iterates through user-selected checkboxes that filter the search criteria
    var ages = buildString('ages');


function buildString(chk_boxes_names) {
    var string = '';
    var checkboxes = document.getElementsByName(chk_boxes_names);
    for(var i = 0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked == true) {
            string += checkboxes[i].value+'|';
        }
    }
    return string;
}

Builds a URL (shortened for brevity)

    $.post('search.php, {  ages: ages }, function(xml){
// builds a bunch of boxes, appends them to the results div
           
            document.getElementById('results').appendChild(box);
           
        });



I can put the media selections here:
var media = buildString('media');
...
    $.post('search.php, {  ages: ages, media: media }, function(xml){


But all that does is pass the current selections to the new results div.

That's why I'm not passing the saved checkboxes in the URL.

I didn't do it with cookies because I honestly don't know how to iterate over a bunch of cookies any more than I know how to iterate over a bunch of checkboxes.

I think I've lost any ability to think.

the bit you missed out is the bit we need to see


   $.post('search.php, {  ages: ages }, function(xml){
// builds a bunch of boxes, appends them to the results div
           
           document.getElementById('results').appendChild(box);
           
       });

Use firebug and "inspect element"

I think this came out whole, I did some search and replace to stay on the NDA.

This is the code that changes across pages. I need to preserve data that is selected or de-selected on previous and next pages.

(attached)

post.js

The reason why this person is "hiding" this stuff is for automation on the same page without have to reload, it's ajax.  

I still think you really need to consider using cookies.  This is exactly what cookies are for.  Every time you load the page, you need to load the cookies into memory.  Then you allow the user to make changes, i.e. click and unclick.  When they submit.  Save back to the cookies.  This is the only safe way to do this.  Otherwise, even a page refresh might throw this whole thing off.  

I don't know what your experience is, but using cookies is a lot easier than it sounds.

If you need to see the results for testing, find the hidden div in the javascript code and change its style=display:inline

 

rfportilla - thank you for the display inline -- I think we'd agree that ajax doesn't exist to hide output from the programmer.

It doesn't exist to hide output from the programmer, but it does have to be hidden from the user.  I've been using an ajax lib that creates a hidden iframe and submits forms to it.  The Iframe also has an onload event that will trigger a javascript function.  It's pretty cool.  For testing, I could redirect it to another target, but I just change the display property.  

OK part of  what I mean by invisible --

in
$(document).ready(function() {


I can bind an alert to any element up to and including the results div.
If I bind the alert to any element inside the results div, it fails.
Outside and up to the results div, it works.


       $("div#results").click(function() {
     alert("Hello world from click bind!");
   });

Note that box is the first element inside results:

These fail, as do references to every element/class/id inside #results.

       $("div#results > div.box").click(function() {
     alert("Hello world from click bind!");
   });

or

       $("div.box").click(function() {
     alert("Hello world from click bind!");
   });

The div is NOT hidden.
    document.getElementById('results').style.visibility = 'hidden';


It's only hidden while it's being built.

The bind operations don't work, and when I view source I see <div id="results"></div> but not the actual HTML code javascript put inside that div.

ps there is no iframe.

Hello again.  The iframe was only an example.  THe lib that I am using uses an iframe.  

You aren't going to see what's going on the source code because that source is only what the gets sent initially.  Once it gets loaded into memory, the javascript takes over and manipulates it.  I have another good tip for you.  

This is an invaluable tool.  Download the IE developer toolbar: http://www.microsoft.com/downloads/en/details.aspx?displaylang=en&FamilyID=95e06cbe-4940-4218-b75d-b8856fced535

You can browse through the active html code on the fly.  This tool also allows you to do element inspection by clicking and live changes so that you can see what would happen if you changed a style, for instance.

I made the assumption that you are developing in IE, but there are many similar tools in Firefox as well.  I don't know them right off, though.

Cookie it is. thanks for the tip.