I am calling a AJAX web service, In the success callback function, I am adding options to a Dropdownlist dynamically. We are using JQuery Mobile in this application.
$("#mylist").append(
$('<option id="myoption' + index + '"></option>').val(myobject.id).html(myobject.description)
);
});
$('#mylist').trigger('change');
But, these options are not getting displayed immediately. Only when i click on any of other static options, Dynamic Options are getting visible.
I saw in few threads, suggesting to use trigger() or refreshmenu. But none of them are working. Is it due to callback function I am using?
Thank you ezanker,
.selectmenu('refresh',true) is working. In my case, I was referring JQuery JS file twice. Once in higher version and second in lower version. It took lower version. In the lower version, selectmenu is not supported.
As soon as I remove the second incorrect JS reference, it worked.
Related
I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).
Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.
I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.
So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.
I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.
Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.
I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.
Using the JQM router you should be able to do something like this
var router;
var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
var params = router.getParams(matchObj[1]);
//use your params to pull data from localStorage
};
router = new $.mobile.Router({
'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
, {orderHandler: orderHandlerRoute }
});
You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline.
This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)
Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach:
- write your target link as file.html#pagename_itemvalue
- bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page
When creating a jquery mobile / phonegap app, is it ok to pass variables through the url from one page to another
page.html?var1=foo&var2=bar
or is does it create a problem when compiling the code?
It should be just fine to pass variables to external pages. Just know that URL variables will only be passed to external pages. Meaning that if you already have an external page in the DOM, you will have to re-load the page to pass it variables again.
I believe that older versions of jQuery Mobile hamper this behavior but you should be good to go with anything 1.0 or later.
Also read the bottom of this page, "Known Limitations": http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-navmodel.html (specifically the second from the bottom bullet)
Update
To reload a page with jQuery Mobile you can use the $.mobile.changePage() function and set the reloadPage option to true:
$(document).delegate('#my-link-id', 'click', function () {
$.mobile.changePage({ reloadPage : true });
return false;
});
Docs: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
it "works", however it's not the best way.
Apps should be all one page with dynamically retrieved and displayed content.
I have seen many people asking this question and have tried it all (such as: Why is jqueryUI datepicker throwing an error?).
Well i have an asp.net app; i am referring jquery-ui-1.8.16.custom.min.js which has all the jquery UI plugins with its css and jquery-1.6.2.min.js
Now when i say
$(document).ready(function () {
$('._txtReviewDate').datePicker();
});
I get an error : $("._txtReviewDate").datePicker is not a function; on firebug. i checked whether the js files have loaded etc.
Please suggest how i can get it working.
There was an old jquery library added deep down somewhere long back which was just ignored over a period. Removing that resolved the issue.
I am using the DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) plugin for a page with the latest build of JqueryMobile but am finding an odd bug.
When I open my app on index.html and navigate through the pages to the page with the date picker is I get this - http://cl.ly/19022K40472e3k0D0D2H
However if I go direct to the page via the address bar it works fine and shows up as it should.
So just wondering is anyone else having problems with this? Or any idea how to fix it?
Also I might add does anyone know how I can have the current date show in the text field?
Thanks.
1) Looks like it is a problem with the css of datebox not being loaded properly.Are you loading the CSS of datebox in index.html?.In that case,when you directly go to the page with the datepicker,CSS might not be loaded.You can check if datebox css is loaded by using firebug for firefox or the in built developer tool in Chrome/Safari.(Check the resources tab to see all the loaded resources)
2)Check this example - http://jsfiddle.net/BNsPB/. In this example I wrote the code in document ready,in your case you might have to write it in pageinit or pagecreate event handlers
After checking your actual code I think you have to add the above code snippet in the pageshow event handler like this:(Assuming bookingPage is the id of the page)
$("#bookingPage").live( 'pageshow',function(event, ui){
var today = new Date();
var todayStr = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
$('#mydate').trigger('datebox', {'method':'set', 'value':todayStr});
});
});
You need to load the files in the actual file that your site navigates to in the first instance (index.html presumably). It sounds like you have only referenced the CSS and plugin code in your date picker page, but in default mode jQM uses an ajax hash-based navigation system, so you need to reference assets in such a way that they are available right from the get-go.
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;