I am building a phonegap application. IIt works fine for iOS and Android , but in Windows Phone 8, the application does not load the page for the second time. I have a list on Page 1. When I click at each list item,it opens up its details on the second page.
The code of Page 1 is as follows-
//Each list item belongs to class 'stores-list'
$(document).on("click", '.stores-list', function() {
if (storage.getDataForKey('storeDetails') != null) {
storage.clearData('storeDetails');
}
storage.setDataForKey('storeDetails', stores[$(this).index()]);
$.mobile.changePage('store-details.html', {
transition: 'slide',
// data: stores[$(this).index()],
});
});
The code of Page 2 is as follows-
$(document).on("pagebeforecreate", '#store-details', function () {
var storeDetailsQuery = storage.getDataForKey('storeDetails');
displaystoredetailsdata(storeDetailsQuery);
});
function displaystoredetailsdata(data1) {
var htmlstoredetails = "";
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Store Name</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeName + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Type</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeType + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Mobile</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.mobile + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Address</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.address + ', ' + data1.city + ' - ' + data1.pin + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Week Off</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.weekOff + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Timings</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.timings + '</div></div>';
$('#page-store-details-display').html(htmlstoredetails);
}
The problem that I am facing is that when I click on a list item , it opens up the next page and display the details. But when for the second time, if I click on any list item, it redirects to other page and even create correct dynamic html, but page is not displayed for any reason that I am not able to get. (I also tried firing "pageshow" event. It executed for the first time. But didnot fire when I clicked any list item the second time.)
Please help. Thanks in advance.
I have found solution to my question. Actually localStorage when was getting cleared,it raised an unexpected event handling. So instead of clearing the storage, I simply updated the value of key.
Related
I have the following code:
var rkIssueDatabaseManager = new RkIssueDatabaseManager();
rkIssueDatabaseManager.listRiskLevels().done(function (riskLevels) {
var optionsHtml = "";
$.each(riskLevels, function () {
if (this.default_val) {
optionsHtml += "<option value='" + this.id + "' selected=''>" + this.description + "</option>";
} else {
optionsHtml += "<option value='" + this.id + "'>" + this.description + "</option>";
}
});
$("<select>").attr({id: "rk-issue-risk", name: "risk_level_id", "data-native-menu": "false"}).html(optionsHtml).appendTo("#rk-issues-content");
$("#rk-issue-risk").selectmenu();
});
This code is executed in the pagebeforeshow event and appends the selectmenu into a hidden popup that will be shown only when the user clicks a button.
When the popup is shown, the selectmenu is initialized properly whith the right selected value, but when pressed, its menu is show in the native L&F even if I have set the "data-native-menu" to false and also in my application init I've set the global property to false.
$.mobile.selectmenu.prototype.options.nativeMenu = false;
I tested this same code, but appended the selectmenu directly to an element in the page instead of the popup and the L&F was the right one.
Any known issue with none-native L&F on selectmenu inside a popup?
EDIT
I was able to create a Fiddle
Please see:
http://jsbin.com/xebaxiya/3/edit
Pop up works in first listview, but after clicking "Add Date" I can't see how to get the popup to work on the subsequent listviews.
Any advice?
Many thanks
In your code which adds the dynamic datepicker, remove the class="hasDatepicker" from the content string and then after appending the elements, call the datepicker() function on the new input to initialize the widget:
$("#add").click(function() {
nextId++;
if (nextId<21) {
var content = '<li class="ui-field-contain"><label for="datechosen' + nextId + '">Date ' + nextId + '</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" id="datechosen' + nextId + '" name="datechosen' + nextId + '" data-role="date" placeholder="Pop up doesnt work :( " readonly="readonly" /></div></li>';
$( "#set" ).append( content ).listview( "refresh" );
$("#datechosen" + nextId).datepicker();
}
});
Here is your updated jsBin
I'm creating the below which is doing fine except for one problem:
function showDevices() {
for (var i = 0; i < devices.length; i++) {
var value = devices[i].Value;
var geraete_id = devices[i].Key;
if (value.Name != "") { // if name exists, use that as heading, else, use UDID
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p id='geraete_DID'>" + geraete_id + "</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
else {
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5 id='geraete_DID'>" + geraete_id + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p>Anonymous User</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
}
$("#geraete-list").listview("refresh");
}
The problem is that class='deleteListItem'gets turned into class='deleteListItem ui-btn ui-btn-icon-notext ui-icon-delete'
Is this just the way Chrome is reading it or is jQuery Mobile adding this into my class?
The problem is I want to run the below code but the getDeviceIDforRemoval() isn't doing anything...
function getDeviceIDforRemoval(){
$(".device_to_remove").text($("#geraete_DID").text()); // sends the device ID into confirm submission dialog
}
function removeDevices(){
var geraetID = $(this).find('span').text(); //retrieves the DID inserted by above function
removeDevice(geraetID,loadDevices);
}
function removeDevice(udid,onSuccess){
Server.removeDevice(udid,onSuccess);
}
Elements can have multiple classes and when these are shown in the HTML they appear as
class="class1 class2 class3"
Order is largely unimportant.
This code...
$(".device_to_remove").text($("#geraete_DID").text());
...will select all elements with class device_to_remove regardless of whether other classes are also applied to those elements. It will then attempt to set the text of those elements to the text of the element with id geraete_DID.
Which of your elements actually has the class device_to_remove? I see no other reference to this in your code?
Using jQuery Mobile the code below works, however when I click on a menu item then click 'back' all my menu items have duplicated/appended etc.
$.each(siteData["pages"], function(i,v) {
$.mobile.activePage.find('[data-role=content]').append('' +
'<a href="#' + v["id"] +
'" data-role="button">' + v["name"] +
'</a>').trigger('create');
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
"data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
How can I stop this behavior?
I will make you a solution from your last question, it will be easier to understand
Take a look at working example: http://jsfiddle.net/Gajotres/3kPTf/
Basically before you add content you need to check if that constant already exist.
In your case each time you add a new button/page check if that button/page already exist like this:
if(!$('#second').length){
// In this case this code block will execute if button with an id second don't exist
}
And here's a code example:
$(document).on('pagebeforeshow', '#index', function(){
if(!$('#second').length){
$.mobile.activePage.find('[data-role=content]').append('Second').trigger('create');
var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
}
});
I have script similar to this:
$.each( data.d, function( index, data ) {
$("#results").append( data.col1 + ' - ' + data.col2 + '<br />' );
});
If this runs the first time, I get 10 rows. When it runs the second time, it adds another 10 rows to the existing ten rows. How do I make the newly added 10 rows stand out for a short period of time?
Maybe colour the text red or something then fade out to the default colour without affecting the old 10 rows?
You could use a delay() with a class:
// Something like this
$cols.addClass('red').delay(2000).removeClass('red');
First, I would buffer your output so you only have to mess with the DOM once:
var output = [];
$.each( data.d, function( index, conflict ) {
output.push( data.col1 + ' - ' + data.col2 + '<br />' );
});
$("#results").append(output.join(''));
Then what I would do to highlight your newly added DOM elements is add a wrapper around them with a class that I can target later to remove the highlight:
var output = [];
$.each( data.d, function( index, conflict ) {
output.push( data.col1 + ' - ' + data.col2 + '<br />' );
});
$("#results").append('<div class="highlighted">' + output.join('') + '</div>');
var timer = setTimeout(function () {
$('#results').children('.highlighted').removeClass('highlighted');
}, 5000);
And then you would just have a CSS class with a background-color or something set:
#results .highlighted {
background-color : gold;
}
You can use jQuery's fadeIn animation:
$.each( data.d, function( index, data ) {
var $results = $(data.col1 + ' - ' + data.col2 + '<br />');
$("#results").append($results);
$results.fadeIn('fast');
});
This will start out the new results as invisible and quickly fade them in.
Note that 'fast' is shorthand for '200ms', or 1/5 of a second. You can put in exact milliseconds or some other shorthand names if you prefer. Also, you can optionally pass an easing (the quality of the fade in) and a callback if you want to do something when the animation is finished.