jtsage/jquery-mobile-datebox — Issue #146: Issue with datebox added dynamically during pageshow
Author: MikeHollick
Created: 2012-01-13 14:25:22+00:00
State: open

Hello, My first post on here so apologies if I don't get this right!

I am adding a series of dateboxes to a form during the pageshow event (based on some json data returned from a webservice making a dynamic form) but if I run in portrait mode (i.e. narrow browser) then when returning from the popup the dateboxes all duplicate themselves. Come to think of it so does the element called 'thinghdr' that I also set in pageshow. This doesn't happen if I run in landscape or on a desktop (wider).

Here is how I'm adding them:

$('#editthing').live('pageshow', function (e, info) {
var listurl = "/someurl";
//Add a cache 'buster' parameter
var date = new Date();
listurl = listurl + '?p_uid=' + date.getTime();
$.ajax({
url: listurl + "&p_physid=" + getUrlVar("p_physid") +
"&p_pubid=" + getUrlVar("p_pubid") +
"&p_attribute=" + getUrlVar("p_attribute"),
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
var form = $("#formcontent");
form.html = "";
//Add the fields defined in the results from the database call
$.each(data.editfields, function (index, item) {
//Set the global field type
fieldType = item.fieldType;

if (item.fieldtype == 'date') {
inputType = 'date';

var dateValue = getFormattedDate(item.fieldvalue);
var timeValue = getFormattedTime(item.fieldvalue);

//This messes up on narrow browsers
form.append('

' +
'' + item.fieldlabel + ' (Date)' +
'' +
'

' +
'

' +
'' + item.fieldlabel + ' (Time)' +
'' +
'

');
/**/
}
});

var thinghdr = $("#thingheader");
thinghdr.html = "";
//Update the heading on the page to show the details
$(data.details).each(function (index) {
thinghdr.append("

" + this.operator + " " +
this.thingnumber + " " + this.origdesc + "

");
});

$("#editthing").page("destroy").page();
}
});

Any ideas?
Thank you in advance.
Mike