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
Related
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.
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
I copied some code from the jQuery UI site and appended it to my own:
$('.field_values') // class that all input fields are a member of in my html
// here I am skipping .autocomplete, which works
// next comes the copied code
.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
return $( '<li>' )
.append( '<a>' + item.label + '<br>' + item.value + '</a>' )
.appendTo( ul );
}
;
I cannot find any documentation on this _renderItem function. Another stackoverflow question/answer suggested that the problem might be having a class instead of an id. But I must have a class, because there are many fields.
How can I get this to work with my class?
Look what I tried. It seems to work for me. I hope I understood your question right.
$(document).ready(function () {
//...here is the projects source
$(".field_values").autocomplete({
source: projects,
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.append('<a>' + item.label + '<br>' + item.value + '</a>')
.appendTo(ul);
};
}
});
});
Here is a working example.
With your method it seems like the custom rendering only gets applied to the first autocomplete input you click but with the create event it gets applied to each autocomplete with the class .field_values when it's created.
Created this fiddle with jQuery v 1.9.3 and jQuery UI 1.10.3 (works fine too with UI 1.9.1)
Here's the source code of the _renderitem function on github.
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
This is how it works for me.
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.