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.
Related
I know this might be easy but somehow I'm unable to implement foreach for a knockout binding. The code is as below:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section scripts
{
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
}
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
And the rendered HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/knockout.debug.js"></script>
<script src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="/Scripts/knockout.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
The problem is that the foreach doesn't work as implemented in the code. The error I get is (debugged using Knockout context):
ExtensionError: TypeError message: "Object.getOwnPropertyNames called
on non-object" stack: (...) get stack: function () { [native code] }
set stack: function () { [native code] }
proto: Error info: "Please select a dom node with ko data."
Uncaught TypeError: undefined is not a function
I have trying this for a while now but with no success.
Thanks.
So I solved it!
The problem was that knockout 2.0 has a line of code:
var elems = jQuery['clean']([html]);
But the jQuery 1.10 that I was using deprecated the clean method.
So I upgraded my knockout to 3.0 and it worked!
Thanks to #Boaz for answering this question on stackoverflow
I'm trying to use the Stack Exchange API in one of my apps. I found the AFOAuth2Client framework that seems to be made do to just this very thing.
I have imported AFNetworking just as the getting started document says, and it seems to be working. I have this code in my app:
NSURL *url = [NSURL URLWithString:#"https://stackexchange.com/"];
AFOAuth2Client *oauthClient = [AFOAuth2Client clientWithBaseURL:url clientID:#"1xxx" secret:#"x3xxWxxvxxSxxexx0xx2Vxx("];
[oauthClient authenticateUsingOAuthWithPath:#"/oauth/dialog"
username:#"username"
password:#"password"
scope:#"email"
success:^(AFOAuthCredential *credential) {
NSLog(#"I have a token! %#", credential.accessToken);
[AFOAuthCredential storeCredential:credential withIdentifier:oauthClient.serviceProviderIdentifier];
}
failure:^(NSError *error) {
NSLog(#"Error: %#", error);
}];
However, I am never asked to login through the SE site and this is printed to the console:
StackBoard[1155:907] Error: Error Domain=AFNetworkingErrorDomain Code=-1016 "Expected content type {(
"text/json",
"application/json",
"text/javascript"
)}, got text/html" UserInfo=0x1fdf6fb0 {NSLocalizedRecoverySuggestion=
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
Application Login Failure - Stack Exchange
</title>
<link rel="stylesheet" href="https://cdn.sstatic.net/stackexchange/all.css?v=7b99cfb7f47f" type="text/css" />
<link rel="shortcut icon" href="https://cdn.sstatic.net/stackexchange/img/favicon.ico">
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/stackexchange/img/apple-touch-icon.png">
<link rel="search" type="application/opensearchdescription+xml" title="Stack Exchange" href="/opensearch.xml">
<!--[if IE]>
<script src="https://cdn.sstatic.net/stackexchange/js/third-party/html5shiv.js?v=9f4cac0f1832"></script>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script src="https://cdn.sstatic.net/stackexchange/js/third-party/jquery.cookie.js?v=bafd924fa942"></script>
<script src="https://cdn.sstatic.net/stackexchange/js/master.js?v=153a719c336e"></script>
<script type="text/javascript">
$(function () {
genuwine.init(undefined);
});
var imagePath='https://cdn.sstatic.net/stackexchange/Img/';
var inboxUnviewedCount = -1;
</script>
<script src="https://cdn.sstatic.net/stackexchange/js/global-login.js?v=34fe03400da2"></script>
<script type="text/javascript">
$(function () { $('.show-error').click(function () { $(this).hide(); $('.error-details').attr('style', ''); }); });
</script>
</head>
<body>
<noscript><div id="noscript-padding"></div></noscript>
<div class="wrapper">
<div id="overlay-header"></div>
<section id="topBar">
<div class="contentWrapper">
<div id="portalLink">
<a class="genu" href="http://stackexchange.com">Stack Exchange</a>
</div>
<div class="search">
<form action="/search">
<input id="search" class="search-box" type="text" name="q" size="31" title="search all sites"/>
</form>
</div>
<nav id="top">
<ul>
<li>
log in
</li>
<li>chat</li>
<li>meta</li>
<li>about</li>
</ul>
</nav>
</div>
</section>
<header>
<div class="contentWrapper">
<h1>Stack Exchange</h1>
<ul class="navMain">
<li><a href="/sites" >All Sites</a></li>
<li><a href="/questions" >Hot Questions</a></li>
<li><a href="/leagues" >Top Users</a></li>
<li><a href="/newsletters" >Newsletters</a></li>
<li><a href="/blogs" >Blogs</a></li>
</ul>
</div>
</header>
<section id="content">
<div class="contentWrapper">
<div>
<h2>Application Login Failure</h2>
<p>An error occurred while login into an application.</p>
Show Error Details
<div class="error-details" style="display:none">
<h3>Error Details</h3>
<p>
<b>error description:</b> <span>application not configured for implicit grants</span><br>
</p>
</div>
</div>
</div>
</section>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5620270-24']);
_gaq.push(['_setDomainName', '.stackexchange.com']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
_qoptions = { qacct: "p-c1rF4kxgLUzNc" };
</script>
</div> <!-- end wrapper -->
<footer id="footer">
<div class="contentWrapper">
<div class="footerLinksSpaced">
<p>
about blog legal privacy policy contact us feedback always welcome
</p>
</div>
<p>site design / logo © 2013 stack exchange, inc; user contributions licensed under cc-wiki with attribution required</p>
<div class="footer-meta-info">
2013.7.29.644
</div>
</div>
</footer>
<noscript>
<div id="noscript-warning">Stack Exchange works best with JavaScript enabled</div>
</noscript>
<script type="text/javascript">
$('#search')
.focus(function() {
if (this.value == this.title) {
this.value = '';
$(this).removeClass('search-box-blur');
}
})
.blur(function() {
if (this.value == '') {
this.value = this.title;
$(this).addClass('search-box-blur');
}
})
.blur();
settings = {};
settings.contentPath = "https://cdn.sstatic.net/stackexchange";
</script>
</body>
</html>
, AFNetworkingOperationFailingURLRequestErrorKey=<NSMutableURLRequest https://stackexchange.com/oauth/dialog>, NSErrorFailingURLKey=https://stackexchange.com/oauth/dialog, NSLocalizedDescription=Expected content type {(
"text/json",
"application/json",
"text/javascript"
)}, got text/html, AFNetworkingOperationFailingURLResponseErrorKey=<NSHTTPURLResponse: 0x1fd49700>}
What am I doing wrong? More importantly, how can I fix it?
I would like to drag and clone the image with increment of the id. I am currently facing a problem, when i drag and the image is clone, id cannot be created. I would also like to double click on the clone image and a popup form will be generated. Can anyone help me?
<html>
<head>
<meta charset="utf-8">
<title>abcd</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="abcd.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
enter code here$(function() {
$(".image").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
})
$("#div1").droppable({
drop: function(event, ui) {
if (ui.draggable[0].id) {
$(this).append($(ui.helper).clone().draggable({ containment: "#div1", scroll: false }));
}
}
});
});
$("img.image").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
});`
</script>
</head>
<body>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<form>
<p>URL:<span id="sprytextfield1">
<input name="url" type="text" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" />
</p>
</form>
<div class="loader"></div>
</div></div>
<div class="wrapper">
<div class="banner">
<h2><img src="untitled.png" width="305" height="166" alt="logo">iLiT - Input Module</h2>
</div>
<div class="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>Item 1
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 2</a>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li>Item 3.1.1</li>
<li>Item 3.1.2</li>
</ul>
</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<div class="sidebar">
<img src="images.jpg" alt="image" name="drag1" width="55" height="55" class="image" id="drag1">
<img src="images1.jpg" width="55" height="55" alt="image1" name="drag2" id="drag2" class="image">
<img src="images2.jpg" width="55" height="55" name="drag3" id="drag3" class="image"></div>
<div class="content"><div id="div1"></div></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Try
var idc = $(".image").length;
$("#div1").droppable({
drop: function(event, ui) {
if (ui.draggable[0].id) {
$(this).append($(ui.helper).clone().attr('id', 'drag' + ++idc).draggable({ containment: "#div1", scroll: false }));
}
}
});
Demo: Fiddle
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");
});
});
I would like to append some code to a page using jQuery/jQuery mobile, I would only like to append once not on each visit to the page.
** final edit **
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
//$(document).ready(function() // get error when I use this
$('#page1').live('pageshow', function ()
{
// alert("!");
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pageshow', function ()
{
// alert("!");
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
You can check for the existence of the code you are appending before actually appending. That way on subsequent visits to the page the data will not be added:
$('#page1').live('pageshow', function ()
{
// alert("!");
if ($(this).find('p.appended_code').length === 0) {
var section1 = "<p class='appended_code'>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
}
});
Note that I added the 'appended_code' class to the paragraph tag that you are appending and that is the selector I used to check for the existence of appended code.
--Update--
You can also clean-up the code a bit if you are using naming conventions based on numbers:
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
if ($(this).find('p.appended_class').length === 0) {
var page_num = $(this).attr('id').replace('page', '');
$("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
}
});
Note that the div[id^="page"] selector searches for divs with an id that starts with "page"
Here is a jsfiddle for ya: http://jsfiddle.net/S3wE6/1/
If you want the data to be appended on the initial load I would recommend making the line of code where the data is appended into a function and calling it on $(document).ready();
ok this was a little tricky but here is a live version:
http://jsfiddle.net/phillpafford/QfjaE/27/
JS:
var elem_id;
var appendToStatus = {};
appendToStatus['page1'] = true;
appendToStatus['page2'] = true;
$('div').live('pageshow', function() {
elem_id = $(this).attr('id');
appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]);
});
function fnCreateGroups(elem_id, appendToStatus) {
if(appendToStatus == true) {
var section = "<p>some code for " + elem_id + "...</p>";
myClone = $(section);
myClone.appendTo("#" + elem_id + "_placeholder").trigger('create');
return false;
}
}
HTML:
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page1_placeholder">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page2_placeholder">Page 2</div>
</div>
</div>
This seem to work... with minimal changes. Only add on pagecreate event.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
$('#page1').live('pagecreate', function ()
{
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pagecreate', function ()
{
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>