Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery mobile checkbox generate list

Posted on 2014-02-07
10
Medium Priority
?
609 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
7 Comments
 
LVL 83

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 83

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
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.

 

Author Comment

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

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob earned 2000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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…
Suggested Courses

773 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