I am new to Phonegap programming.I created one HTML page(ListScreen.html) with NavigationBar plugin.In ListScreen I displayed list of data.When I select the one list item it goes to another HTML page that is DetailsScreen.html page.I tried the code in ListScreen.html as follows:
$(document).on("click", "#lstMyList li" ,function (event) {
window.location.href='DetailsScreen.html';
});
How to send the selected item from ListScreen.html to DetailsScreen.html.Please help me.
You can use local storage. I supports any JavaScript object.
localStorage.setItem("oneKey", anObject);
var anObject = localStorage.getItem("oneKey");
It works perfectly for me. try this way -
var foo = localStorage["bar"];
localStorage["bar"] = foo;
Related
I work on Jquery Mobile/Phonegap app for android.
I´d like my app to "remember" that(if) the user has visited one of my pages. For example if he once visits "page1.html", this action should be cached in the phone memory, so that when the user opens the app again there should be possibility to navigate to this "page2.html" directly from "index.thml".
Please, if you have a code suggestion, tell me also how/where do I use it, because sometimes for starters like me it is realy hard to understand what to do with a little piece code.
Thank you very much!
You can use HTML5 local storage for this purpose.
Each time when a page is shown you can save/update the current page URL to a local storage variable, say 'lastVisit', as below:
$(document).on('pageshow', function (event, data) {
var currentPage = $('.ui-page-active').data('url');
localStorage.setItem("lastVisit", currentPage);
});
If you are not getting $('.ui-page-active').data('url'), then you can use $.mobile.activePage.attr('id') which will give you the current page id.
So next time, when the user opens the app again, you can check whether this local storage variable is set and can action accordingly.
The code will look like as below:
$(document).on('mobileinit', function(){
var lastVisit = '';
if(localStorage.getItem("lastVisit") != null){
lastVisit = localStorage.getItem("lastVisit");
}
if(lastVisit){
document.location.href = lastVisit;
}
});
You can use these codes in the header section scripts.
I'm using some AJAX (ASP.NET Web Forms) to add new selectable elements on my site but the newly created ones aren't selectable. I guess this has to do with some events. Maybe it can be solved by using .on on those functions but I don't know how to do it. Anyone know how to fix that?
Here's my code:
$(".selectable").selectable({
filter: '.ui-widget-content',
stop: function () {
var result = $("#select-result").empty();
$(".ui-selected", this).each(function () {
var index = $(this).attr('id');
index = index.substring(12, index.length);
result.append(" #" + index);
});
}
});
when you load your page, jquery assign respective functions to each html tags. when you create some new div/html tags you should re-initialize the function because jquery doesn't know about your newly created html tags,
for the respective query
try re initializing the jquery function after adding new selectable element
hope this help..
I am loading two MVC Partial Views in jQuery UI dialog using following code for editing and adding a record:
$.get(url, function(data)
{
dialogDiv.html(data);
var $form = $(formid);
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
var dat = $form.data("unobtrusiveValidation");
var opts = dat ? dat.options || '' : '';
$form.validate(opts);
//THIS FUNCTION ADDS PLUGINS ETC.
runEditCreateStartScripts();
dialogDiv.dialog('open');
});
Following is the function that wires-up chosen functionality.
function runEditCreateStartScripts(){
$("select.chzn-select").chosen(
{
no_results_text: "no match",
allow_single_deselect: true
});
}
Everything is perfect on first call. After opening one dialog say edit a few times everything is broken. There is only hyperlink available in place of chosen stuff. This also happens if I open one dialog say add and then second dialog. The bindings and other functionality from first one (add) is gone.
Any insights on why this might be happening?
The problem that caused my issue was that the modals I was loading via AJAX had inputs with the SAME ID as an input field that was already on the page (using Django that has generic ID generators for model fields). This caused collision between the two inputs when re-triggering .chosen() on the selector. When I made the ID fields unique, all worked as expected.
Hope this would have helped.
I'm trying to dynamically populate a select tag at load time (latest jQM version) using a custom template filling function.
If the fn is called in the "pagebeforechange" event, the select tag is properly initialized. Since this event is called on every page transition, I thought of moving the fn to the 'pageinit' event. This does not work, presumably because the DOM is not yet fully available. How can I coerce jQM to inject content in a page only once? Currently, I am using a kludge. There surely must be a smarter way. Thanks for any suggestions.
$(document).bind('pageinit', function () {
InitSelTagTest("#selActTag", "tplTag"); // Does not work.
});
$(document).bind("pagebeforechange", function (e, data) {
if ($("#selActTag").children().size() === 0) {
InitSelTagTest("#selActTag", "tplTag"); // Kludge, but it works
}
});
function InitSelTagTest(el,tpl) { // Append all tags to element el
var lstAllTags = JSON.parse($("#hidTag").val()); // Create tag array
// Retrieve html content from template.
var cbeg = "//<![" + "CDATA[", cend = "//]" + "]>";
var rslt = tmpl(tpl, { ddd: lstAllTags }).replace(cbeg, ").replace(cend,");
$(el).html(rslt).trigger("create"); // Add to DOM.
}
EDIT
In response to Shenaniganz' comment, it seems that the "pagebeforecreate" event could do the trick ie.
$("#pgAct").live("pagebeforecreate", function () {
// Populate tag select. Works. Traversed only once.
InitSelTag("#selActTag", "tplTag");
});
I'm not sure I fully understand your question but I'll throw a few things out there and you let me know if I can extend further.
To make something trigger only once on page load you can try to implement a regular JQuery $(document).ready(function(){}) aka $(function(){}) for the exact reason why JQuery Mobile users are told not to use it. It triggers only once on DOM load. Further pages don't trigger it because they're being switched via Ajax.
Other than that, on regular dynamic content loading you take a look at the following example I put together for someone else earlier:
http://jsbin.com/ozejif/1/edit
This is my first time with jQuery Mobile and I'm actually using it from a WP theme I got. I understand that this might be theme related but I just want to make sure.
So, it is a Wordpress jQuery Mobile theme, you plug it and it works a treat. The thing is, I've converted the Wordpress menu from an UL to a SELECT.
I have then added some jQuery to fire the select on change by getting the value of the selected option. That works, I get the loading thinggy and then the page changes with my desired effect.
But I can't get the Select menu to show the current selected item. It always reverts to the first one.
I have used:
$('#main_menu').selectmenu("refresh");
$('#main_menu').selectmenu("refresh", true);
But nothing...
You can have a look at the site here: http://avatarblog.fl1hosting.com/ and look at the source.
You will see that my mobile event are all before the jQuery Mobile include, which doesn't make much sense to me, but if I put them afterwards, nothing works.
Any help would be highly appreciated!
Thanks
You need to set which option to show in the select menu. Try this,
$("#main_menu")[0].selectedIndex = 2; // this will select the 3rd in the menu list
$("#main_menu").selectmenu("refresh");
You can add the following script your header.php:
$(document)
.unbind("pageshow.initMenuBtn")
.bind("pageshow.initMenuBtn",
function() {
$.mobile.activePage = $("div.ui-page-active");
$("#main_menu", $.mobile.activePage)
.unbind("change")
.bind("change", function() {
var page = $(this).val();
$.mobile.changePage(page);
});
var selectedIndex = 0;
$("#main_menu>option", $.mobile.activePage).each(function(index) {
if ($(this).hasClass("current-menu-item")) {
selectedIndex = index;
}
});
$("#main_menu", $.mobile.activePage)[0].selectedIndex = selectedIndex;
$("#main_menu", $.mobile.activePage).selectmenu("refresh");
});