jquery mobile data trasfer between section -
i'm doing mobile website based on jqm , http://dl.dropbox.com/u/49735179/dialog-data-transfer.html .
if click submit button 1 of search result on section "dialogpage", supposed shown on section "mainpage" of zip1, zip2, addr form.
but form value of zip_code1, zip_code2, addr not tranfered section "mainpage".
what problem in script?
here full script + html.
<!doctype html> <html> <head> <title>test dialog</title> <meta charset="utf-8" /> <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <script> $(document).ready(function() { $('form').submit(function(){ var inputval1 = $('input[name=zip_code1]').val(); var inputval2 = $('input[name=zip_code1]').val(); var inputval3 = $('input[name=addr]').val(); $("#mainpage").data("inputval1", inputval1); $("#mainpage").data("inputval2", inputval2); $("#mainpage").data("inputval3", inputval3); }) }); $('#mainpage').live('pageshow', function(){ var inputval1 = $(this).data('inputval1') ? $(this).data('inputval1') : "<? $defaultvalue1 ?>"; var inputval2 = $(this).data('inputval2') ? $(this).data('inputval2') : "<? $defaultvalue2 ?>"; var inputval3 = $(this).data('inputval3') ? $(this).data('inputval3') : "<? $defaultvalue3 ?>"; $('div input[name=zip1]').val(inputval1); $('div input[name=zip2]').val(inputval2); $('div input[name=addr]').val(inputval3); }); </script> <section id="mainpage" data-role="page"> <header data-role="header"><h1>header</h1></header> <div data-role="content"> <div> <input type="text" name="zip1" value="">-<input type="text" name="zip2" value=""> <input type="text" name="addr" value=""> </div> <a href="#dialogpage" data-role="button" data-transition="pop">open dialog</a> </div> <footer data-role="footer"><h1>footer</h1></footer> </section> <!-- ## dialogs ## --> <section id="dialogpage" data-role="dialog" data-theme="d"> <header data-role="header"><h1>header</h1></header> <div data-role="content"> <h3>input dialog</h3> <input type="text" autocomplete="off" value="" id="k"><input type="submit" value="search" onclick="kin()" data-role="button"> <div id="servermsg"></div> <form> <input type=hidden name=zip_code1 value='code1'> <input type=hidden name=zip_code2 value='code2'> <input type=hidden name=addr value='address1'> <table><tr> <td width=50>code1 - code2</td> <td>address1</td> </tr></table> <input type="submit" value='address1' /> </form> <form> <input type=hidden name=zip_code1 value='code4'> <input type=hidden name=zip_code2 value='code5'> <input type=hidden name=addr value='address2'> <table><tr> <td width=50>code4 - code5</td> <td>address2</td> </tr></table> <input type="submit" value='address2' /> </form> <form> <input type=hidden name=zip_code1 value='code6'> <input type=hidden name=zip_code2 value='code7'> <input type=hidden name=addr value='address2'> <table><tr> <td width=50>code6 - code7</td> <td>address3</td> </tr></table> <input type="submit" value='address3' /> </form> </div> </div> <footer data-role="footer"></footer> </section> </body> </html>
use attr
method, data()
method not create data
attribute;
$(document).ready(function() { $('form').submit(function(){ var inputval1 = $('input[name=zip_code1]').val(); var inputval2 = $('input[name=zip_code1]').val(); var inputval3 = $('input[name=addr]').val(); $("#mainpage").attr("data-inputval1", inputval1); $("#mainpage").attr("data-inputval2", inputval2); $("#mainpage").attr("data-inputval3", inputval3); ...
Comments
Post a Comment