jQueryMobile: problem with registering onload, onsubmit events - jquery-mobile

I'm using jquery.mobile-1.0b3library. I have home.html, contactus.html.
Here is the sample code: (i'm not getting the alerts in contactus.html)
home.html
=========
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script>
<script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script>
<!--
<link rel="stylesheet" href="css/jquery.mobile-1.0a1.min.css" />
<script src="js/jquery-1.4.3.min.js"></script>
<script src="js/jquery.mobile-1.0a1.min.js"></script>
-->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script>
// Global declarations - assignments made in $(document).ready() below
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar= null;
var nameLabelVar = null;
var emailLabelVar = null;
var subjectLabelVar = null;
var messageLabelVar = null;
var emailcopyLabelVar = null;
var messageVar = null;
var contactformVar = null;
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null;
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;
// Constants
var MISSING = "missing";
var EMPTY = "";
var NO_STATE = "ZZ";
$(document).ready(function() {
// Assign global variables
//hdrMainVar = $('#hdrMain');
alert("page loaded");
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
nameLabelVar = $('#nameLabel');
emailLabelVar = $('#emailLabel');
subjectLabelVar = $('#subjectLabel');
messageLabelVar = $('#messageLabel');
//emailcopyLabelVar = $('#emailcopyLabel');
messageVar = $('#message');
contactformVar = $('#contactform');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
//hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
$('#buttonOK').click(function() {
hideContentDialog();
showMain();
return false;
});
contactformVar.submit(function() {
var err = false;
// Hide the Main content
hideMain();
// Reset the previously highlighted form elements
inputMapVar.each(function(index){
$(this).prev().removeClass(MISSING);
});
// Perform form validation
inputMapVar.each(function(index){
if($(this).val()==null || $(this).val()==EMPTY){
$(this).prev().addClass(MISSING);
err = true;
}
});
if(messageVar.val()==null||messageVar.val()==EMPTY){
messageLabelVar.addClass(MISSING);
err = true;
}
// If validation fails, show Dialog content
if(err == true){
showContentDialog();
return false;
}
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
confirmationVar.text(data);
hideContentTransition();
showConfirmation();
});
return false;
});
});
function hideMain(){
//hdrMainVar.hide();
contentMainVar.hide();
ftrMainVar.hide();
}
function showMain(){
//hdrMainVar.show();
contentMainVar.show();
ftrMainVar.show();
}
function hideContentTransition(){
contentTransitionVar.hide();
}
function showContentTransition(){
contentTransitionVar.show();
}
function hideContentDialog(){
contentDialogVar.hide();
}
function showContentDialog(){
contentDialogVar.show();
}
function hideConfirmation(){
//hdrConfirmationVar.hide();
contentConfirmationVar.hide();
ftrConfirmationVar.hide();
}
function showConfirmation(){
hdrConfirmationVar.show();
contentConfirmationVar.show();
ftrConfirmationVar.show();
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>test</h2>
</div>
<p>
home page content...
</p>
<ul data-role="listview">
<li>Contact Us
</li></ul>
</div><!-- /content -->
</div>
</body>
</html>
contactus.html
==============
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script>
<script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script>
<style type="text/css">
label.missing {
color:#FF0000;
font-weight:bold;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b" >
Back
<h1>contactus</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="banner">
<h2>Contact Us</h2>
</div>
<form id="contactform">
<div id="nameDiv" data-role="fieldcontain">
<label for="name">Enter your Name*</label>
<input id="name" name="name_r" type="text" />
</div>
<div id="emailDiv" data-role="fieldcontain">
<label for="email">E-mail address*</label>
<input id="email" name="email_r" type="text" />
</div>
<div id="subjectDiv" data-role="fieldcontain">
<label for="subject">Message Subject*</label>
<input id="subject" name="subject_r" type="text" />
</div>
<div id="messageDiv" data-role="fieldcontain">
<label id="messageLabel" for="message">Enter your Message*</label>
<textarea cols="40" rows="10" id="message" name="message_r"></textarea>
</div>
<!-- <div id="emailcopyDiv" data-role="fieldcontain">
<input type="checkbox" id="emailcopy" name="emailcopy">
<label id="emailcopyLabel" for="emailcopy">E-mail a copy of this message to your own address</label>
</div> -->
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Send" data-inline="true"/>
</div>
</form>
</div><!-- contentMain -->
<div data-role="content" align="center" id="contentDialog" name="contentDialog">
<div>Please fill in all required fields before submitting the form.</div>
<a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a>
</div> <!-- contentDialog -->
<!-- contentTransition is displayed after the form is submitted until a response is received back. -->
<div data-role="content" id="contentTransition" name="contentTransition">
<div align="center"><h4>Your message has been sent. Please wait.</h4></div>
<div align="center"><img id="spin" name="spin" src="img/wait.gif"/></div>
</div> <!-- contentTransition -->
<div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">
<p>Email Sent Successfully</p>
</div><!-- contentConfirmation -->
<div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div>
</div>
</body>
</html>


In contactus.html remove the javascript
<script>
$(document).ready(function() {
alert("page loaded");
$('#contactform').submit(function() {
alert("form submitted");
});
});
</script>
This needs to be added to home.html like this:
$('#page1').live('pagecreate',function(event){
alert('page loaded');
$('#contactform').submit(function() {
alert("form submitted");
});
});

Related

JQuery Mobile - multipage form with local values

I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>

Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>

On Ajax call MVC.Grid Updated but css not applied :( Asp.net MVC

All things working fine 1st time data render fine but when click on any page number then with Ajax call data fetch successfully all headers and footer css remain the same but css of table rows de-attached not included please if you have any suggestion tell me.
Advance Thanks
Before ajax call this is the rendered html in browser.
<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Index - Anchor Bay Insurance Managers, Inc.</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<link href="/Content/TwoColumnForm.css" rel="stylesheet">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style>
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="/Scripts/URI.js"></script>
<script src="/Scripts/gridmvc.js"></script>
<script src="/Scripts/gridmvc-ext.js"></script>
<script type="text/javascript">window.EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ec65_a99d_1166_10f1_472b_e904_7a5b_da73'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script><script type="text/javascript">window.EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script></head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">Restaurant Bar & Tavern Program</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="lZ1mXfXGZsdpR9aYMjceHEQ8KEYvb7P8zyxe9e-Yoj2cmFF761uvsOxtLEdOxm-_NG6lk9nBihRrNUBzLGMZ0w5lYTePwYNqWfEmDzCsCew1"> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<header>
<div class="content-wrapper">
<div class="float-left">
<ul id="menu">
<li>Agency</li>
<li>Agent</li>
<li>Quote</li>
<li>Email Templates</li>
</ul>
</div>
</div>
</header>
<section class="content-wrapper main-content clear-fix">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<ul id="menu">
<li>Create Agent</li>
</ul>
<h2>Agents</h2>
<div class="boxDiv" style="width:100%">
<div style="width:100%">
<div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false">
<div class="grid-wrap">
<table class="table table-striped grid-table">
<thead>
<tr>
<th class="grid-header"><div class="grid-header-title">First Name</div></th><th class="grid-header"><div class="grid-header-title">Last Name</div></th><th class="grid-header"><div class="grid-header-title">UserName</div></th><th class="grid-header"><div class="grid-header-title">Agency</div></th><th class="grid-header"><div class="grid-header-title">Email</div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr>
</thead>
<tbody>
<tr class="grid-row ">
<td class="grid-cell" data-name="FirstName">Muhammad Atif</td><td class="grid-cell" data-name="LastName">Aziz</td><td class="grid-cell" data-name="AgentUserInfo.UserName">atif17</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">atif.aziz#nxb.com.pk</td><td class="grid-cell" data-name=""> <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/57" title="Delete"><i></i></a>
</div>
</td> </tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="FirstName">Sanan</td><td class="grid-cell" data-name="LastName">Chatha</td><td class="grid-cell" data-name="AgentUserInfo.UserName">sanan63</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">azhar.abim#nxvt.com</td><td class="grid-cell" data-name=""> <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/56" title="Delete"><i></i></a>
</div>
</td> </tr>
</tbody>
</table>
<div class="grid-footer">
<div class="grid-footer">
<div class="grid-pager">
<ul class="pagination">
<li><span class="glyphicon glyphicon-step-backward"></span></li>
<li class="active"><a class="grid-page-link" data-page="1">1</a></li>
<li>2</li>
<li><span class="glyphicon glyphicon-step-forward"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script>
</div>
<script src="/Scripts/gridmvcajax.custom.js"></script>
<script src="/Content/Scripts/Global.js"></script>
<script type="text/javascript">
$(document).ready(function () {
pageGrids.metaData.ajaxify(
{
getPagedData: "/Agent/Grid",
getData: "/Agent/Index"
});
});
$(document).ajaxComplete(function () {
$(".grid-mvc").gridmvc();
});
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p>
</div>
</div>
</footer>
</body>
</html>
After Ajax call this is the rendered html in browser.
<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Index - Anchor Bay Insurance Managers, Inc.</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<link href="/Content/TwoColumnForm.css" rel="stylesheet">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style>
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="/Scripts/URI.js"></script>
<script src="/Scripts/gridmvc.js"></script>
<script src="/Scripts/gridmvc-ext.js"></script>
<script type="text/javascript">window.EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script><script type="text/javascript">window.EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script></head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">Restaurant Bar & Tavern Program</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="wvvSbtslTZV3nqpwsX2eWoeHa91OwSxF0ne60C6QLvWeWEKVKZhhembtcbPeVLMKlVBKGA7bcK4oAnIIoK5yhG_DrAJRASQZbV_uyqeJLqQ1"> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<header>
<div class="content-wrapper">
<div class="float-left">
<ul id="menu">
<li>Agency</li>
<li>Agent</li>
<li>Quote</li>
<li>Email Templates</li>
</ul>
</div>
</div>
</header>
<section class="content-wrapper main-content clear-fix">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<ul id="menu">
<li>Create Agent</li>
</ul>
<h2>Agents</h2>
<div class="boxDiv" style="width:100%">
<div style="width:100%">
<div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false">
<div class="grid-wrap">
<table class="table table-striped grid-table">
<thead>
<tr>
<th class="grid-header"><div class="grid-header-title">First Name</div></th><th class="grid-header"><div class="grid-header-title">Last Name</div></th><th class="grid-header"><div class="grid-header-title">UserName</div></th><th class="grid-header"><div class="grid-header-title">Agency</div></th><th class="grid-header"><div class="grid-header-title">Email</div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr>
</thead>
<tbody>
<div style="width:100%">
AslamNadeemaslam17Testazhar.ynn#nxvt.com <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/55" title="Delete"><i></i></a>
</div>
Malik AzharAwanazhar63Testazhar.rafique#nxb.com.pk <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/33" title="Delete"><i></i></a>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script></tbody>
</table>
<div class="grid-footer">
<div class="grid-footer">
<div class="grid-pager">
<ul class="pagination">
<li><span class="glyphicon glyphicon-step-backward"></span></li>
<li class=""><a class="grid-page-link" data-page="1" href="">1</a></li>
<li class="active">2</li>
<li><span class="glyphicon glyphicon-step-forward"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script>
</div>
<script src="/Scripts/gridmvcajax.custom.js"></script>
<script src="/Content/Scripts/Global.js"></script>
<script type="text/javascript">
$(document).ready(function () {
pageGrids.metaData.ajaxify(
{
getPagedData: "/Agent/Grid",
getData: "/Agent/Index"
});
});
$(document).ajaxComplete(function () {
$(".grid-mvc").gridmvc();
});
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p>
</div>
</div>
</footer>
</body>
</html>

It looks like your table tags are getting stripped out and converted to divs durring the ajax call - I had the same problem and ended up converting my table tags to divs - you can define the widths of the column divs for the header, footer, and table cells (which will now all be divs), to get everything to line up properly.

Jquery mobile page id turns into folder name

I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>

I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.

clone and append in jquery mobile- doubling up?

When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>

I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.

AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>

Ajax jquery-ui accordion

I init my accordion in the following way:
$(function() {
$("#gallery_accordion").accordion({ event: false });
$("#gallery_accordion").click(function(e) {
var contentDiv = $(this).next("div");
contentDiv.load($(this).find("a").attr("href"));
});
});
The content is loaded onclick but the accordion is invisible.
Nothing is shown. Any help highly appreciated.
Thanks.
Update: The height stays at '0'. Any reason for that?
Here is the markup:
<div id="gallery_accordion">
<h3>My first gallery</h3>
<div id="gallery369">
</div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>

Try changing your initial call to:
$("#gallery_accordion").accordion({ header: "h3", event : false });
And your HTML to:
<div id="gallery_accordion">
<div>
<h3>My first gallery</h3>
<div id="gallery369">
</div>
</div>
<div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
</div>
Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.
Hope this helps.
Here is a sample doc that loads the accordion:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#gallery_accordion").accordion({ header: "h3"});
$("#gallery_accordion a").click(function(evt) {
var galleryId = $(this).attr('href').split('#')[1];
var contentDiv = $('#' + 'gallery' + galleryId);
if(contentDiv.html() == " ") {
var galleryContent = getGallery(galleryId);
contentDiv.html(galleryContent);
}
});
var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
var contentDivI = $('#' + 'gallery' + galleryId);
var galleryContentI = getGallery(galleryId);
contentDivI.html(galleryContentI);
});
</script>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="gallery_accordion">
<div>
<h3>Gallery 1</h3>
<div id="gallery369"> </div>
</div>
<div>
<h3>Gallery 2</h3>
<div id="gallery381"> </div>
</div>
<div>
<h3>Gallery 3</h3>
<div id="gallery392"> </div>
</div>
</div>
</body>
</html>

Resources