Solved

jquery mobile checkbox generate list

Posted on 2014-02-07
10
594 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

617 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