Dojo Dynamically add form elements - javascript

I am trying to add form fields dynamically with a template html. I have managed to get the dojo/Declaration to write to the DOM, but calling parser.parse(new element) does not seem to parse the elements.
The code I have now is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
var dojoConfig = {
async: true,
parseOnLoad: false,
has: {
"dojo-debug-messages": true
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require(["dojo/parser",
"dojo/domReady!"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<form>
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
<div id="formContents">
<div>
<button id="add">Add</button>
</div>
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script>
var jsp_row = 0;
require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
ready(function() {
on(dom.byId("add"), "click", function(e) {
e.preventDefault();
console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
var newForm = domConstruct.place(form, "formContents", "after");
parser.parse(newForm);
});
});
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>
How would I get it so that if I click add, I can add the Declared fieldset below the current displayed one?
Thank you very much!


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
var dojoConfig = {
async: true,
parseOnLoad: false,
has: {
"dojo-debug-messages": true
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require(["dojo/parser","dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/Fieldset", "dijit/form/TextBox", "dijit/Declaration",
"dojo/domReady!"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<form>
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="contentTab" title="My first tab" data-dojo-props="selected:true">
<div id="formContents">
<div>
<button id="add">Add</button>
</div>
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[0]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<div data-dojo-type="dijit/Declaration" data-dojo-props="widgetClass:'formBlock', defaults:{row_id:0}">
<fieldset data-dojo-type="dijit/Fieldset">
<legend style="align:left">
<label>Form</label>
</legend>
<table>
<tbody>
<tr>
<td>
<input type="text" name="formItem[${row_id}]" data-dojo-type="dijit/form/TextBox" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script>
var jsp_row = 0;
require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/parser", "dojo/query", "dojo/dom-attr"], function(ready, dom, on, domConstruct, parser, query, domAttr) {
ready(function() {
on(dom.byId("add"), "click", function(e) {
e.preventDefault();
console.log("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "></div>");
var form = domConstruct.toDom("<div data-dojo-type='formBlock' data-dojo-props='row_id:" + (++jsp_row) + "'></div>");
var newForm = domConstruct.place(form, "formContents", "after");
parser.parse(newForm);
});
});
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>

Related

textbox is not showing on first click

I have input textbox that shows on click search button , but it does not show on first click it shows after first click or on double click. How to solve that.
My code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$(this).focus()
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>

Use show() before focus.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="loaction-search" style="background-color: red; padding: 5px; width:100px; border-radius:5px;"> search </div>
<table>
<tr>
<td>
<div style="position:relative;">
<span class="clear-search"> X</span>
<input type="type" placeholder="search here" name="name" value=" " id="locationsearchbox" style="display:none;" />
</div>
</td>
<td>
<a title="Zoom to India" id="loaction-search" class="map-icon-search">
click
</a>
</td>
</tr>
</table>
<script>
$('#loaction-search').click(function() {
$("#locationsearchbox").animate({
width: 'toggle'
}, 350, function() {
$()
$(this).show();
$(this).focus();
});
})
$(document).on('click', function(e) {
var $target = $(e.target);
if (!$target.closest('.clear-search').length && !$target.closest('#locationsearchbox').length) {
$('#locationsearchbox').hide();
}
});
$(".clear-search").click(function() {
$('#locationsearchbox').val('');
})
</script>
</body>
</html>

The main issue with tghe code was the logic that you handled to hide the #locationsearchbox was wrong. You have to exclude the #loaction-search element aswell since we are already handling the click event of the same, or else the action will trigger twice
$("#loaction-search").click(function () {
$("#locationsearchbox").animate(
{
width: "toggle",
},
350,
function () {
$(this).focus();
}
);
});
$(document).on("click", function (e) {
var $target = $(e.target);
if (
!$target.closest(".clear-search").length &&
!$target.closest("#locationsearchbox").length &&
!$target.closest("#loaction-search").length
) {
$("#locationsearchbox").hide();
}
});
$(".clear-search").click(function () {
$("#locationsearchbox").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div
id="loaction-search"
style="
background-color: red;
padding: 5px;
width: 100px;
border-radius: 5px;
"
>
search
</div>
<table>
<tr>
<td>
<div style="position: relative">
<span class="clear-search"> X</span>
<input
type="type"
placeholder="search here"
name="name"
value=" "
id="locationsearchbox"
style="display: none"
/>
</div>
</td>
<td>
<a
title="Zoom to India"
id="loaction-search-2"
class="map-icon-search"
>
click
</a>
</td>
</tr>
</table>

Datepicker not working after jQuery.load execution

I've got a problem trying to display datepickers in a new JSP, after called it with Jquery.load function. No datapcikers are showing up unless I use this command:
$("#ui-datepicker-div").remove();
But if I do, the others datepickers that I have in the main jsp stop working.
The new JSP is called from the main like this:
$('#divNewJSP').load("myServlet?OP=1, function() {
$('#divNewJSP').slideDown();
The servlet executes correctly and I have the following code running in the new JSP, at the beggining fo the document:
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show")
...
I've been trying several options but no one seems to work...Any ideas please?
Thx in advance.
EDIT
<link type="text/css" rel="stylesheet" href="/css/monitor.css"/>
<link type="text/css" rel="stylesheet" href="/css/jquery.dataTables.css" />
<script type="text/JavaScript" src="/js/jquery-1.11.1.js"></script>
<script type="text/JavaScript" src="/js/jquery.form.js"></script>
<script type="text/JavaScript" src="/js/jquery-ui.js"></script>
<script type="text/JavaScript" src="/js/jquery.ui.datepicker-es.js"> </script>
<script type="text/javascript" src="/js/jquery.dataTables.js?ver=a0.8185263484592263"></script>
<script>
$(document).ready(function() {
createDatatable();
// Datepickers
/*$("#ui-datepicker-div").remove();*/ <------ IT WORKS WITH THIS
//*** ORIGINAL DATEPICKERS INIT ***//
/* $('#dateField1').datepicker($.datepicker.regional["es"]);
$('#dateField2').datepicker($.datepicker.regional["es"]);
$('#dateField3').datepicker($.datepicker.regional["es"]);
$('#dateField4').datepicker($.datepicker.regional["es"]);*/
});
<body>
<div id="blockResult">
<div id="formCriteraRC"><br/>
<fieldset style="float:left;border:1px solid #007E3A;padding:0.5em;margin-bottom:0.5em;width:98%;">
<legend class="caption">Search Criteria</legend>
<table>
<tr>
<tr>
<div class="intrnot_small">
<span class="labelDateField">Date 1:</span>
<input type="text" class="bloquesinmargen campo" id="dateField1" value="" />
<span class="labelDateField">Date 2:</span>
<input type="text" class="bloquesinmargen campo" id="dateField2" value="" />
</div>
</tr>
<tr>
<div class="intrnot_small>
<span class="labelDateField">Date 3:</span>
<input type="text" class="bloquesinmargen campo" id="dateField3" value="" />
<span class="labelDateField">Date 4:</span>
<input type="text" class="bloquesinmargen campo" id="dateField4" value="" />
</div>
</tr><br/>
<tr>
<div class="intrnot_small">
<input type="button" id="search value="Search" disabled>
<input type="button" id="clean" value="Clean">
</div>
</tr>
</table>
</fieldset>
</div> <!-- end form -->
<div id="listData">
<table id="datatableReg" class="display nowrap" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
<thead>
<tr>
<th width="15px">Sel.</th>
<th width="120px">Id</th>
<th width="90px">Origin</th>
<th width="80px">Códe</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- end -->
</div>
<div id="divDetailResult" class="bloquesinmargen" style='overflow-x: hidden; height: 99%; width: 99%; max-width:99%; display: none; top:0px;'> </div>
</body>
</html>
EDIT 2: MAIN JSP CALLING (from its .js)
function openNewJSP(){
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField1').datepicker($.datepicker.regional["pt"]);
$('#dateField2').datepicker($.datepicker.regional["pt"]);
$('#dateField3').datepicker($.datepicker.regional["pt"]);
$('#dateField4').datepicker($.datepicker.regional["pt"]);
});
}

You have to execute the datepicker function inside of your callback:
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
Remove the following code from your JSP (servlet response):
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});

Issues with Jquery timepicker change event

I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.
I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.
Thanks in advance.

You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old.
So you can try this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
<script>
$('document').ready(function(){
$('#time').timepicker();
$('#time').on('changeTime', function() {
var x = $("#time").val();
$('#d_time').val("Maintenance Tonight - " +x);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if ($('#default').is(':checked')) {
$('#default_subject').css('display','block');
$('#custom_subject').css('display','none');
}
else if ($('#custom').is(':checked')) {
$('#custom_subject').css('display','block');
$('#default_subject').css('display','none');
}
}
</script>
<td>
<input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="default" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" type="text" value="custom"/>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

put the on change function on a document ready
$( document ).ready(function() {
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
}
the thing is that the element is not created in the time you fire the functon so you need to wait untill the document is ready or put this function at the end of the document.

$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
try this
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
because getElementByName is not function use getElementsByName instead with index of first element

jQuery UI Sortable Not Working With Dynamic Table

I'm dynamically creating a table and trying to make each row (tr) sortable. I've followed the various documentation on the jQuery UI site and thought I understood. However, I can't quite seem to figure it out.
Where did I go wrong? Thanks!
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript>" href="jquery-ui.js"></script>
<script type="text/javascript" href="bootstrap-2.2.2.min.js"></script>
<script>
$(function() {
$( "tr" ).sortable();
$( "tr" ).disableSelection();
});
</script>
</head>
<body>
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<tr>
<td>Session Title</td>
<td>Start Time</td>
<td>End Time</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr />');
$tr.append($("<td />", { text: $("#session_title").val()} ))
$tr.append($("<td />", { text: $("#start_time").val()} ))
$tr.append($("<td />", { text: $("#end_time").val()} ))
$tr.appendTo("table");
$("#agenda_form").each(function (){
this.reset();
});
});
</script>
</body>
</html>

You need to use tbody instead of tr in your jquery selection. i would also suggest makeing your headers in a theader block --- http://jsfiddle.net/rcottkqx/1/
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time
<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<thead>
<th>Session Title</th>
<th>Start Time</th>
<th>End Time</th>
</thead>
</table>
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr class="t" />');
$tr.append($("<td />", {
text: $("#session_title").val()
}));
$tr.append($("<td />", {
text: $("#start_time").val()
}));
$tr.append($("<td />", {
text: $("#end_time").val()
}));
$tr.appendTo("table");
$("#agenda_form").each(function () {
this.reset();
});
$("tbody").sortable();
$("tbody").disableSelection();
});

Unable to parse JSON in my code

Please help me out with my code. Am trying to populate the table in html with the getJSON. Am getting alert which is inside of getJSON but not the one which is inside of $.each(jso,function(i,j). Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#{name}</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/cordova-2.5.0.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/database.js"></script>
<script src="js/FileAPI.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/filesystem.js"></script>
<script src="js/listutils.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" data-overlay-theme="d">
<div data-role="header" class="ui-bar-b">
<a onclick="onBackKeyDown();" data-icon="back" id="back">Back</a>
<h1 id="header">Outlet Visit Report</h1>
<a onclick="onUploadPhoto();" data-icon="check" id="send">Send</a>
</div>
<form action="#" method="post" enctype="multipart/form-data">
<table id="myTable">
<th>Item Code</th>
<th>Item Description</th>
<th>MRP</th>
<th>Initial Quantity</th>
<th>Current Quantity</th>
<th>Refill Quantity</th>
<th>Out of Stock</th>
</table>
<div style="display: none">
<input type="hidden" name="user" id="user" />
<input type="hidden" name="data" id="data" />
</div>
</form>
<a data-transition="pop" id="busypop" style="display: none"
href="#positionWindow" data-rel="popup" data-position-to="window">
</a>
<div data-role="popup" id="positionWindow" data-dismissable="false"
data-theme="d" data-tolerance="15,15" class="ui-content"
data-position-to="window">
<ul data-role="listview" data-theme="d" data-divider-theme="b"
data-inset="true">
<li data-role="list-divider">Update Status</li>
<li data-role="fieldcontain">
<p>Please wait.Upload is in Progress........</p>
</li>
</ul>
</div>
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
Close
<iframe id="imframe" src="" seamless></iframe>
</div>
<a id="opM" href="#popupMap" data-rel="popup" data-position-to="window" data-theme="b" data-inline="true"></a>
</div>
<script>
var user = "KBM";
var base="";
$(document).ready(function(){
window.onload = devideReady();
fetchData();
});
function devideReady(){
document.addEventListener("backbutton", function(){
$("#back").click();
}, false);
initDatabase();
readProperty(function(data){
if(data!=null){
user = data['user'];
}
});
}
document.addEventListener("deviceready",devideReady, true);
function getUser() {
if(!isMobile.any()){
return "admin";
}
return user;
}
var backHtml="";
function onBackKeyDown() {
window.open('mainpage.html',"_self");
}
function fetchData(){
alert("before getJSON");
$.getJSON("http://appkbm.appspot.com/jsp/index.jsp?action=json&user="+user+"&name=Item",function(jso){
alert("After the query");
var arr = new Array();
$.each(jso,function(i,j){
alert("Inside the Loop");
var obj = (jQuery.parseJSON(j.data))[0];
arr.push(obj);
});
$.each(arr,function(i,j){
$("#table").append("<tr><td><input type="hidden" name="itemCode" id="itemCode" value ="+j['ITEM CODE']+" /></td><td><input type="text" name="itemDescription" id="itemDescription" value ="+j['ITEM DESCRIPTION']+" /></td><td><input type="text" name="mrp" id="mrp" value ="+j['SKU MRP']+" /></td><td><input type="text" name="initialQuant" id="initialQuant" /></td><td><input type="text" name="currentQuant" id="currentQuant" /></td><td><input type="text" name="refillQuant" id="refillQuant" /></td><td><input type="text" name="outOfStock" id="outOfStock" /></td></tr>");
});
});
}
</script>
</body>
</html>

Categories

Resources