Solved

jquery mobile checkbox generate list

Posted on 2014-02-07
10
583 Views
Last Modified: 2014-03-10
Hi, I'm working in a mobile app and I have this checkboxes, when click in a button it generates a list with the checked options in the same page.  I would like to appear in a new page, but I don't know how to do it.  I will appreciate any help.  Thanks.

Here's the Html

<section class="header_default footer_default" data-role="page" id="setup" data-title="Setup">
        <article data-role="content">
            <form>
                <fieldset data-role="controlgroup" id="hoursName">
                    <legend><strong>Choose your Hours Type:</strong></legend>
                    <input type="checkbox" name="checkboxHours" id="1" value="Regular Hours" >
                    <label for="1">Regular Hours</label>
                    <input type="checkbox" name="checkboxHours" id="2" value="Overtime">
                    <label for="2b">Overtime</label>
                    <input type="checkbox" name="checkboxHours" id="3" value="Travelling">
                    <label for="3">Traveling</label>
                    <input type="checkbox" name="checkboxHours" id="4" value="Training">
                    <label for="4">Training</label>
                    <input type="checkbox" name="checkboxHours" id="5" value="Truck Hours">
                    <label for="5">Truck Hours</label>
                </fieldset>
            </form>
           <button class="ui-btn ui-corner-all addAmount">Add Amount</button>

           <div id="nameList"></div>

        </article><!--content-->     
    </section><!--setup page-->

Open in new window


Here's the Jq:
$(document).on("click", ".addAmount", function(){
&#9;var selectedValues="";
&#9;$checkedCheckboxes = $("input:checkbox[name=checkboxHours]:checked");
&#9;$checkedCheckboxes.each(function () {
&#9;&#9;$('#nameList').append('<li>' + $(this).val() + '</li>');
&#9;});
});

Open in new window

0
Comment
Question by:acbv
  • 3
  • 2
  • 2
10 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39843607
If you follow this : http://demos.jquerymobile.com/1.4.0/pages/#Multi-pagetemplatestructure

Just put (line 20) <div id="nameList"></div> in the second page
0
 

Author Comment

by:acbv
ID: 39845528
This doesn't work because I'm not trying to open a page with a link, a button retrieves checked checkboxes and populates the list on a div on another page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39845543
It does matter how you go to the other pages, just the fact that ALL the pages are loaded at the first time
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:acbv
ID: 39860498
That doesn't work.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39917103
See here for a working example http://jsbin.com/jisok/1/edit

Essentially you needed to specify that your nameList div to have the "data-role=page" attribute along with moving outside the <section> tag on it's own.

Cheers,

Rob
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 39917107
I modified the javascript slightly, mainly by adding the "window.location" line at the end.
$(".addAmount").on("click", function() {
    var selectedValues = "";
    $checkedCheckboxes = $("input:checkbox[name=checkboxHours]:checked");
    $checkedCheckboxes.each(function () {
        $('#nameList').append('<li>' + $(this).val() + '</li>');
    });
    window.location = "#nameList";
});

Open in new window


the html changed to this:
<section class="header_default footer_default" data-role="page" id="setup" data-title="Setup">
        <article data-role="content">
            <form>
                <fieldset data-role="controlgroup" id="hoursName">
                    <legend><strong>Choose your Hours Type:</strong></legend>
                    <input type="checkbox" name="checkboxHours" id="1" value="Regular Hours" >
                    <label for="1">Regular Hours</label>
                    <input type="checkbox" name="checkboxHours" id="2" value="Overtime">
                    <label for="2">Overtime</label>
                    <input type="checkbox" name="checkboxHours" id="3" value="Travelling">
                    <label for="3">Traveling</label>
                    <input type="checkbox" name="checkboxHours" id="4" value="Training">
                    <label for="4">Training</label>
                    <input type="checkbox" name="checkboxHours" id="5" value="Truck Hours">
                    <label for="5">Truck Hours</label>
                </fieldset>
            </form>
           <button class="ui-btn ui-corner-all addAmount">Add Amount</button>


        </article><!--content-->     
    </section><!--setup page-->
           <div data-role="page" id="nameList"></div>

Open in new window

0
 

Author Closing Comment

by:acbv
ID: 39917651
It worked, thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

914 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

15 Experts available now in Live!

Get 1:1 Help Now