[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 841
  • Last Modified:

How to store select checkbox info across jquery paging?

The application displays several movie choices, each with a checkbox. The user checks a box he wants to obtain. The data pages forward and backwards. The problem is that the selections are not being saved across page turns.

I have figured out how to capture the selection or de-selection of the checkbox. I need to:
- store new selections
- unstore de-selected sections

while the user is navigating through choices. Then when the user is ready to apply the selections, everything he selected is known, everything he might have selected and then de-selected is removed from the known list.

This is the selectbox for each possible movie choice:

var selectBox = document.createElement('input');
selectBox.type = 'checkbox';
selectBox.value = $(this).find('id').text(); selectBox.name = 'media';

This is a selectbox debug statement that the item is selected or de-selected:

selectBox.setAttribute("onclick",'if (this.checked) {alert(this.value + " on"); } else {alert(this.value + " off"); }');

Let's say the user selects media item 4, then clicks next. The new page doesn't have item 4 on it, but I need to remember that it was selected.

He selects items 20, 22 and 25, then clicks next again.

Now I need to have a list that owns 4,20,22,25.

THEN he goes backwards and de-selects item 22.

My list needs to read 4,20,25.

How do I store and edit this data in JQuery fashion?
0
joomla_php
Asked:
joomla_php
  • 7
  • 6
  • 2
  • +2
1 Solution
 
rfportillaCommented:
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.
0
 
VeganBenCommented:
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.
0
 
Dushyant SharmaCommented:
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
joomla_phpAuthor Commented:
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.
0
 
VeganBenCommented:
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);
           
       });
0
 
Michel PlungjanIT ExpertCommented:
Use firebug and "inspect element"
0
 
joomla_phpAuthor Commented:
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
0
 
rfportillaCommented:
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.
0
 
rfportillaCommented:
If you need to see the results for testing, find the hidden div in the javascript code and change its style=display:inline

 
0
 
joomla_phpAuthor Commented:
rfportilla - thank you for the display inline -- I think we'd agree that ajax doesn't exist to hide output from the programmer.
0
 
rfportillaCommented:
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.  
0
 
joomla_phpAuthor Commented:
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.

0
 
joomla_phpAuthor Commented:
ps there is no iframe.
0
 
rfportillaCommented:
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.

0
 
rfportillaCommented:
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.
0
 
rfportillaCommented:
btw, the bindings fail because your javascript is getting loaded immediately, before the stuff in the magic div has even been created.

HTML is static.  When your browser downloads the HTML from a web server, what you get is what you see in the source file.  Your browser will immediately check and run any javascript code.  If it references something that has not been created yet, then it will fail.  You kinda need to think 4th dimensionally.

Regarding your original question, have you looked at cookies to store and manage the data?

 
0
 
joomla_phpAuthor Commented:
Cookie it is. thanks for the tip.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now