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
Related
In my program we have Kendo Panel bar which shows menu, i want to open a dialog box/ popup window when user clicks on any menu child item.
<div>
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Events(events => events
.Select(#<text> ReportController.onSelect </text>))
.Items(panelbar =>
{
panelbar.Add().Text("Test1")
.Expanded(true)
.Items(Test1=>
{
workers.Add().Text("Sample1");
workers.Add().Text("Sample2");
workers.Add().Text("Sample3");
});
panelbar.Add().Text("Test2")
.Items(Test2 =>
{
clients.Add().Text("Book1")
.Items(costings =>
{
costings.Add().Text("Page1");
costings.Add().Text("Page2");
costings.Add().Text("Page3");
});
clients.Add().Text("Book2");
});
panelbar.Add().Text("New Page").Enabled(false);
})
)
</div>
<script type="text/javascript">
$(document)
.ready(function() {
ReportController.init("#panelBar");
});
</script>
If user clicks on Sample1 here it should open a popup window. i am new with kendo controls, how can i achieve this?
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/panelbar/events">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<ul id="panelbar">
<li class="k-state-active">
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
<li>
Empty Item
</li>
<li>
Ajax Item
<div></div>
</li>
<li>
Error Item
<div></div>
</li>
</ul>
</div>
<div id="console" class="box" style="display:none">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
<script>
$(function () {
$("#console").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
});
function onSelect(e) {
var theDialog = $("#console").dialog("open");
theDialog.dialog("open");
kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
}
function onExpand(e) {
kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
}
function onCollapse(e) {
kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
}
function onActivate(e) {
kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
}
function onContentLoad(e) {
kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
}
function onError(e) {
kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
$("#panelbar").kendoPanelBar({
expandMode: "single",
select: onSelect,
expand: onExpand,
collapse: onCollapse,
activate: onActivate,
contentLoad: onContentLoad,
error: onError,
contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]
});
</script>
</body>
</html>
In above example, you can observe that in OnSelect Event , i have opened a Div as an Dialog(Model), for which i have intialised that in its above function.
Hope it helps.. !!
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.
I must use localstorage in my phonegap (3.0) app so that I can call the specific number want by the user in each page. In order to do that I use a form and a script like that below. This script work in browser but not with phonegap build. I should have miss something but can't find what!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>local storage</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<style>
#message {
display: none;
border-radius: 10px;
padding: 10px;
background-color: #ff0000;
color: #fff;
}
#storageDemoPage h2 {
white-space: normal;
}
</style>
<script type="text/javascript">
var localStorageKey = "allo";
$('#storageDemoPage').live('pagecreate', function() {
showStoreValue();
$('#addToStorage').click(function(e) {
localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
});
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
<section data-role="header">
<h2>My app</h2>
</section>
<section data-role="content">
<p id="message"/>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Enter your number</li>
<li>
<input type="text" id="entry" name="entry" placeholder="Write digits"/>
<input type="button" id="addToStorage" value="Store value"/>
</li>
<li data-role="list-divider">Value record</li>
<li class="storeItem"/>
</ul>
<div data-role="content">
<p id="audio_position"></p>
<ul id="allRepos" data-role="listview"></ul>
</div>
</section>
</body>
</html>
Edit : add cordova script at the begining
Thanks to #QuickFix and #Chris here is the solution :
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var localStorageKey = "allo";
function onDeviceReady() {
showStoreValue();
$('#addToStorage').click(function(e) {
window.localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
}
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
Here are the possible things you would have missed
a)Cordova script file inclusion in your head tag.
b)Use and listen device ready before using local storage.
Implementing this should solve your issue.
I like to add autocomplete feature for my jquery mobile page on a text box such that when user enters it should show the results in listview format. The code below shows the results but not in the listview format. Can someone point out how to fix it. Thanks.
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text">' + item.zipcodeId + '</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You need to call the listview() function on your content after inserting the new content:
$('#suggestions').listview();
See Elijah Manor's explanation for the details.
Try calling the listview refresh method in your ajax success function.
$('#suggestions').listview('refresh');
try this one
In <li> tag remove class..... class="ui-btn ui-btn-icon-right ui-li "
Then it shows results in list view formats
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>