Solved

How to store select checkbox info across jquery paging?

Posted on 2010-09-19
17
804 Views
Last Modified: 2012-05-10
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
Comment
Question by:joomla_php
  • 7
  • 6
  • 2
  • +2
17 Comments
 
LVL 9

Expert Comment

by:rfportilla
ID: 33711243
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
 
LVL 3

Expert Comment

by:VeganBen
ID: 33711564
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33711690
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
 
LVL 13

Author Comment

by:joomla_php
ID: 33711729
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
 
LVL 3

Expert Comment

by:VeganBen
ID: 33711773
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33712431
Use firebug and "inspect element"
0
 
LVL 13

Author Comment

by:joomla_php
ID: 33712558
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
 
LVL 9

Expert Comment

by:rfportilla
ID: 33717512
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 9

Expert Comment

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

 
0
 
LVL 13

Author Comment

by:joomla_php
ID: 33717599
rfportilla - thank you for the display inline -- I think we'd agree that ajax doesn't exist to hide output from the programmer.
0
 
LVL 9

Expert Comment

by:rfportilla
ID: 33718924
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
 
LVL 13

Author Comment

by:joomla_php
ID: 33722107
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
 
LVL 13

Author Comment

by:joomla_php
ID: 33722112
ps there is no iframe.
0
 
LVL 9

Expert Comment

by:rfportilla
ID: 33722656
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
 
LVL 9

Expert Comment

by:rfportilla
ID: 33722675
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
 
LVL 9

Accepted Solution

by:
rfportilla earned 500 total points
ID: 33723205
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
 
LVL 13

Author Closing Comment

by:joomla_php
ID: 33743405
Cookie it is. thanks for the tip.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

706 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

11 Experts available now in Live!

Get 1:1 Help Now