jquery - How to append multiple lists in different pages into a single list? -
<!doctype html> <html> <head> <title>novar app</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>site details</h1> </div> <div data-role="content"> <a href="#site entry1" data-role="button" data-inline="true">enter details of site</a> <a href="#modify site" data-role="button" data-inline="true">modify site details</a> </div> </div> <div data-role="page" id="site entry1"> <div data-role="header"> <a href="#home" data-rel="back" data-role="button" data-icon="home">home</a> <h1>welcome enter details of site</h1> </div> <div data-role="content"> <div class="content-primary"> <form> <ul data-role="listview"> <li data-role="fieldcontain"> <label for="sitename">site name:</label> <input type="text" sitename="name" id="sitename" value="" /> </li> <li data-role="fieldcontain"> <label for="siteno">site name:</label> <input type="text" siteno="siteno" id="siteno" value="" /> </li> <a href="#site entry2" data-role="button" data-inline="true">next</a> </ul> </form> </div> </div> </div> <div data-role="page" id="site entry2"> <div data-role="header"> <a href="#site entry1" data-role="button" data-icon="back">previous</a> <h1>welcome enter module details of site</h1> </div> <div data-role="content"> <div class="content-primary"> <form> <ul data-role="listview"> <li data-role="fieldcontain"> <label for="moduleno">name:</label> <input type="text" modulename="moduleno" id="moduleno" value="" /> </li> <li class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <div class="ui-block-b"><button type="submit" data-theme="a">submit</button></div> </fieldset> </li> </ul> </form> </div> </div> <div data-role="footer"> <a href="#site entry3" data-role="button" data-icon="arrow-r">next</a> </div> </div> <div data-role="page" id="site entry3"> <div data-role="header"> <a href="#site entry2" data-rel="back" data-role="button" data-icon="back">previous</a> <h1>welcome enter exe details of site</h1> </div> <div data-role="content"> <div class="content-primary"> <form> <ul data-role="listview"> <li data-role="fieldcontain"> <label for="modulename">name:</label> <input type="text" name="name" id="name" value="" /> </li> <li class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <div class="ui-block-b"><button type="submit" data-theme="a">submit</button></div> </fieldset> </li> </ul> </form> </div> </div> <div data-role="footer"> <a href="#home" data-role="button" data-icon="home">home</a> </div> </div> <div data-role="page" id="modify site"> <div data-role="header"> <a href="home" data-rel="back" data-role="button" data-icon="home">home</a> <h1>list of sites </h1> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div> </body> </html> i need create list contain fields multiple lists in different pages in one. can done using jquery?
i have tried code this
var listitemhtml = '<li class="siteentry">' + '<a class="sitename">{sitename}</a>' + '<a class="siteno">{siteno}</a>' + '<a class="donebutton" data-icon="check"></a>' + '</li>'; function makelistitem(site) { var html = listitemhtml.patternreplace({ sitename: site.getsitename(), siteno: site.getsiteno(), moduleno: site.getmoduleno(), executiveno: site.getexecutiveno() }), li = $(html); li.find('a.donebutton').attr('id', site.getname()); return li; } but lists not getting appended single list. plz me in advance.
i added button id on page "site entry3"
<button id="btn_entry3" type="submit" data-theme="a">submit</button> on page "modify site" added content id=content
<script> $("#btn_entry3").click(function(){ var li = '<ul data-role="listview" >'; $('body').find('[data-role="fieldcontain"]').each(function(key, value){ var title = $(this).find('label').html(); var val = $(this).find('[type="text"]').val(); li += '<li>'+title+' '+val+'</li>'; }); li +='</ul>'; $('#content').html(li).trigger('create'); $('ul').listview('refresh'); }) </script>
Comments
Post a Comment