I have a mobile app where I use Jquery Mobile v. 1.3.1 and PhoneGap.
On a page there're a bunch of checkboxes. When I run the app the list with checkboxes respond very slow when you check/uncheck a checkbox.
What to do?
I used this in Cordova/PhoneGap but I wasn't using jQuery Mobile, just jQuery.
$('input[type="checkbox"]').on( 'touchstart', function(){
$(this).prop("checked", !$(this).prop("checked"));
});
$('input[type="checkbox"]').click(function(event){
event.preventDefault();
event.stopPropagation();
});
You could technically do it by using trigger() and pass custom data to the click event handler, but I couldn't get the parameters to go through for some reason. The above works tho.
Related
I have a jQuery Mobile 1.3.0 app that is making Ajax calls to dynamically load data. I have seen various options for doing this in previous versions of jQuery Mobile (see Show Page Loading Spinner on Ajax Call in jQuery Mobile), but have not found an answer for 1.3.
The Ajax calls are similar to:
$.getJSON(url, function(data) {
console.log(JSON.stringify(data));
$.each(data.cards, function(index, card) {
$('#card-name').text(card.title);
});
});
What is the best approach for displaying the loading spinner for each Ajax call?
After some research and trying several options, I found that this worked well for every Ajax call in the app. I added the following code toward the top of my JavaScript:
// Load the spinner if an ajaxStart occurs; stop when it is finished
$(document).on({
ajaxStart: function() {
$.mobile.loading('show');
},
ajaxStop: function() {
$.mobile.loading('hide');
}
});
In this way, no matter how many places I load data via Ajax, the jQuery Mobile loader (spinner) is displayed by adding this snippet of code one time.
If anyone knows of a better approach, please let me know.
I'm using FullCalendar jquery pluging in my MVC3 project.
For some reason events aren't rendered when the calendar is first loaded. The strange thing is that they do appear if I open IE developer or if I change the agenda view.
Any suggestions?
Thanks
Looks like your calendar div is in a hidden element like a tab. You will need to render the fullCalendar on show of this hidden element to load your events properly in the calendar.
In case of jQuery tabs, you can do something like this:
$('#tabs').tabs({
show: function(event, ui) {
$('#calendar').fullCalendar('render');
}
});
Let me know if this helps!
How do I register an pinch or pull event in an mobile webapp.
Is it build in the browser (if so, how can I acces it) or there an jQuery-plugn for this
(using HTML5, jQuery en jQuery mobile)
Check out http://jgestures.codeplex.com/.
(Also, just Google 'jquery gestures')
Related questions:
Catch browser's "zoom" event in JavaScript
javascript event for a mobile pinch/zoom action
Touchy is jQuery plugin that provides support for pinch (in or out), swipe, drag, longpress, and rotate across all browsers that support the touchstart, touchmove and touchend events.
With JQuery Mobile and MVC3 ASP.NET, on an iPad, created a home screen bookmark.
The app pulls up with no problems, it does not show safari's bar.
I login to my app and click a link, THE LINK OPENS SAFARI, NOT INTENDED.
My question is how to prevent the clicked link from opening outside of my bookmarked app?
I've tried:
$(document).bind("pageinit", function () {
$("a").click(function (e) {
e.preventDefault();
$.mobile.changePage($(this).attr('href'));
});
});
The code above seems like it should work based on the docs from jquery mobile.
When I click the link/button the link/button highlights but no error or page load.
Also, another question is why when I leave the app and come back the session dies?
iOS will treat links where you have stipulated data-ajax="false" as a link that should be opened by Safari. I had the same problem in my MVC site that is using jQueryMobile. I found this post very helpful and the following piece of code works very well in my application.
$("a[data-ajax='false']").live("click", function (event) {
if (this.href) {
event.preventDefault();
location.href = this.href;
return false;
}
});
Is this webpage you are linking to being packaged with the app? You need to do so. The app cannot find it and goes out to the browser.
The code itself is fine.
http://jsfiddle.net/m35BU/5/
Session variables are stored on a server...are you talking about a javascript cookie?
If so, unless you set an expiration date for the cookie (mktime()+3600*7 for 7 days) or whatever, it will expire when the app is closed.
Here is the case.
I have a website built in asp.net mvc3 with custom CMS.
Is there any way by clicking a button from cms to reload the page of the website visitors?
For example, here in stackoverflow, if an admin from the backend pressed a button my page would reload automatically (or even a lightbox would appear, or redirect me to a different page).
Can we do that?
With HTML5 you can use web workers to do this for you: http://html5demos.com/worker
Without HTML5, you can set up some basic polling code in your javascript. It would call a method on the server that would tell it whether or not to reload. You can run this every 30 seconds let's say:
$(document).ready(function(){
var doRefresh = function(){
$.get('checkForRefresh', function (data) { ... handle response ... });
};
setInterval(doRefresh, 30000);
});
And then just have your checkForRefresh server side code read a value set by that CMS button.
Forcing a reload on a button click boils down to something like this (using jQuery and javascript):
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
The first answer on the following question shows two ways to refresh the page, one forcing a reload like above, and the second, much like #Milimetric describes in his answer:
Refresh (reload) a page once using jQuery?.