javascript - Changing .innerHTML after a button is clicked -
i using jquery mobile , have collapsible set.
when using function change innerhtml works fine. displaying content inside collapsibles.
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right"> </div> works when using: document.getelementbyid("doro").innerhtml ='<div data-role="collapsible"> <h3>click me - im collapsible!</h3> <p>i'm expanded content.</p> </div>'
but when try:
<input type="button" data-theme="b" name="submit" id="submit" value="submit" onclick="refreshpage();"> while:
function refreshpage(){ var text = "<div data-role='collapsible'><h1>click me - i'm collapsible!</h1><p>i'm expanded content.</p></div>"; document.getelementbyid("doro").innerhtml = text; } it changes collapsible set have text without jquerymobile css , javascript attached.
that's sort of looks like
function refreshpage() { var text = "<div data-role='collapsible'><h1>click me</h1><p>i'm new expanded content.</p></div>"; document.getelementbyid("doro").innerhtml =text; } <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <!doctype html> <html><head> <title>my page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="panel" id="left-panel" data-display="overlay"> <h2></h2> <form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all"> <fieldset> <div data-role="fieldcontain"> <label for="username">enter username:</label> <input type="text" value="" name="username" id="username"/> </div> <input type="button" data-theme="b" name="submit" id="submit" value="submit" onclick="refreshpage();"> </fieldset> </form> </div> <div data-role="header"> <h1></h1> <a href="#left-panel" data-icon="gear" data-iconpos="notext">add</a> </div><!-- /header --> <div data-role="content"> <a href="#" data-role="button" data-icon="star" data-theme="a">star button</a> <p id="demo"> <div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right"> <div data-role="collapsible"> <h3>click me - i'm collapsible!</h3> <p>i'm expanded content.</p> </div> </div></p> </div><!-- /content --> <div data-role="footer"> <h4>my footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> this simplified example won't work aswell, , don't why
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>collapsible sets</h1> </div> <div data-role="main" class="ui-content" id="name"> </div> <script> document.getelementbyid("name").innerhtml ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>click me - im collapsible!</h3><p>im expanded content.</p></div>'; function refreshpage(){ document.getelementbyid("name").innerhtml ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>click me - im collapsible!</h3><p>im expanded content.</p></div>';} </script> <input type="button" data-theme="b" name="submit" id="submit" value="submit" onclick="refreshpage();"> <div data-role="footer"> <h1>insert footer text here</h1> </div> </div> </body> </html>
when dynamically creating jquery mobile widgets after page has been enhanced, have initialize widgets in 1 of following ways:
call .enhancewithin() on container element.
call individual widget intializer, e.g. .colapsibleset(), .collapsible(), etc.
for example, following. given button , container div id="name":
<div data-role="page" id="pageone"> <div data-role="header"> <h1>collapsible sets</h1> </div> <div data-role="main" class="ui-content" > <input type="button" data-theme="b" name="submit" id="submit" value="submit" /> <div id="name"></div> </div> </div> on pagecreate, dynamically add collapsibleset container , call enhancewithin(). add click handler button calls refreshpage(). refreshpage() replaces html in container , again calls enhancewithin().
$(document).on("pagecreate", "#pageone", function(){ $("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>click me - im collapsible!</h3><p>im expanded content.</p></div>').enhancewithin(); $("#submit").on("click", function(){ refreshpage(); }); }); function refreshpage(){ var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>click me - im collapsible 2!</h3><p>im expanded content button.</p></div>'; $("#name").html(text).enhancewithin(); } working demo
also, in second code snippet, loading 2 different versions of jquery. use either 2.1 or 1.11 not both.
Comments
Post a Comment