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
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.
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 have created a dynamic jquery split button listview on a clickable button whose structure is something like this:
var Book="Book Item"
var data="hi";
//Create the listview if not created
if(!listCreated){
$("#content").append("<ul id='list' data-role='listview' data-inset='true'></ul>");
listCreated = true;
$("#content").trigger("create");
}
$("#list").append("<li data-theme='d'>"+"<a id='list_content' data-rel='popup' data-position-to='window' data-transition='pop'>"+data+"</a>"+"<a id='list_content_checkout' data-rel='popup' data-position-to='window' data-transition='pop'></a>"+"</li>");
$("#list").listview("refresh");
$("#list_content").click(function(){
alert();//
});
in given below line data is a variable whose value i want on list view click.
$("#list").append("<li data-theme='d'>"+"<a id='list_content' data-rel='popup' data-position-to='window' data-transition='pop'>"+data+"</a>"+"<a id='list_content_checkout' data-rel='popup' data-position-to='window' data-transition='pop'></a>"+"</li>");
when we click on ANKUR listview data, in alert ankur should come.
sorry for my english.
thanks
$(document).ready(function () {
Getdata();
});
function Getdata() {
var htmlcontent = "";
var strord_key = "1234";
htmlcontent += "<li data-role='list-divider'><br>";
htmlcontent += "<a href='javascript:void(0);' onclick= goToNext('" + strord_key + "') >Order Ticket: " + strord_key + "</a> </li>";
$("#result-listview").empty();
$('#result-listview').append(htmlcontent);
}
function goToNext(value) {
alert(value);
}
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);
}
});