I am trying to dynamically insert a form inside a fieldset. This is my approach using jQuery:
$(document).on("pagebeforeshow", "#mainPage", function () {
if (sessionStorage.login_state != 1) {
alert('You don\'t have permission to login here!');
window.location.href = 'index.html';
} else {
var name = sessionStorage.name;
var email = sessionStorage.email;
var dit = sessionStorage.dit;
$('#userinfo-form').append("<form method='POST' action='index.html'>" +
"<lable for='i_name'>Name : </label>" +
"<input class=\"ui-disabled\" type='text' id='i_name' name='i_name' value='" + name + "' data-mini='true' />" +
"<lable for='i_email'>Email : </label>" +
"<input class=\"ui-disabled\" type='text' id='i_email' name='i_email' value='" + email + "' data-mini='true' />" +
"<lable for='i_dit'>DIT : </label>" +
"<input class=\"ui-disabled\" type=\"text\" id=\"i_dit\" name='i_dit' value='" + dit + "' data-mini='true' />" +
"<lable for='i_newPassword'>New Password : </label>" +
"<input class=\"ui-disabled\" type='password' id='i_newPassword' name='i_newPassword' value='' data-mini='true' />" +
"<a id=\"user_edit\" class=\"ui-btn-c ui-mini ui-btn btn-primary ui-icon-mail ui-shadow\" >Edit</a>" +
"<a id=\"user_update\" class=\"show-page-loading-msg ui-btn btn-primary ui-shadow ui-hide\" data-textonly=\"false\" data-btntype=\"updateinfo\" data-textvisible=\"true\" data-msgtext=\"Please wait...\" type=\"button\" data-theme=\"c\">Update Info</a>"+
"</form>").enhanceWithin();
}
});This is the corresponding HTML code:
<div data-role="panel" id="p_userinfo" data-position="right" data-theme="c" data-swipe-close="true" >
<h2>User Info</h2>
<div class="ui-field-contain" id="userinfo_field">
<fieldset id="userinfo-form" data-role="controlgroup" data-type="horizontal">
</fieldset>
</div>
</div>However, I'm facing issues with this code as it does not display anything on the page. Interestingly, changing the CSS to set display:block for the form in the browser makes the form visible.