How can I fix the code to work on mobile?
<script>
$(document).on('swipedown', '#page1', function () {
location.reload();
});
</script>
Related
I have a mobile layout page that loads a js file and it works fine.
#RenderBody()
<script>
$(document).ready(function () {
var moonth = $("#getcurrmonth").val();
var yeear = $("#getcurryear").val();
$("#hiddenyearval").val(yeear);
$("#hiddenmonthval").val(parseInt(moonth) - 1);
$("#caltab").collapsible("expand");
LOCAL.LoadMore();
LOCAL.LoadMore();
LOCAL.LoadMore();
$("#caltab").collapsible("collapse");
});
</script>
<script>
LOCAL = {
LoadMore: function () {...}
}
</script>
#Html.Partial("~/Views/Shared/_Tabs.mobile.cshtml")
But when I change to a page that uses the same layout the script never fires.
I have tried $(document).on('pagebeforeshow', '[data-role="page"]', function{..} as well as other suggestions I have found on here but no luck.
Thanks for your time.
his question is asked earlier here, but I didn't get those answers to work. I work with a button:
<div data-role="popup" id="test_popup">
<p>this is a test</p>
</div>
test
And I tried putting
<script type="text/javascript">
$(document).on('popupafteropen', '.ui-popup', function() {
setTimeout(function () {
$(this).popup('close');
}, 2000);
});
</script>
in the head section, but that didn't work. What am I doing wrong?
(I have multiple popups/buttons on the page)
By the time setTimeout executes the function, $(this) doesn't return popup. Instead, you should retrieve popup before running setTimeout.
$(document).on('popupafteropen', '.ui-popup', function () {
var popup = $(this);
setTimeout(function () {
popup.popup('close');
}, 2000);
});
Demo
Im using a jQuery UI button and I want to point it to specific url.
How is that possible?
<button>Button</button>
<script>
$(function() {
$( "input[type=submit], button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
Html:
<button id="btYourButton">Button</button>
Javascript:
<script>
$(function() {
$( "#btYourButton" ).button().click(function( event ) {
window.location = "http://google.com"
});
});
</script>
I have made lots of research on this topic but I did not find an appropriate answer.
My problem is that when I use Cordova/Phonegap with JQM, the $(document).ready is fired but not the $(document).on('pageinit') which is recommanded to use with JQM.
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).on("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
console.log('device ready');
$(document).on("pageinit",function(){
console.log("document pageinit fired");
}
}
</script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="js/buttonset.js" type="text/javascript"></script>
This page is hosted on a remote server. In this case, device ready appears in the console but not document pageinit fired. If I replace $(document).on("pageinit",function(){ by $(document).ready(function(){, both logs appear but I dislike this solution.
Could you please tell me where I got wrong ?
Thanks beforehand.
try this sequence of code in script tag.
/* Initialization of PhoneGap and jQM */
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
//initialize PhoneGap
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
}
//initialize jQM
$(document).on("mobileinit", function () {
//hack to fix android page transition flicking issue
if (navigator.userAgent.indexOf("Android") != -1){
$.extend( $.mobile , {
defaultPageTransition: 'none'
});
}
setCustomThemeAndOptions();
jqmReadyDeferred.resolve();
});
//When both PhoneGap and jQM are ready, initialize language setting
$.when(deviceReadyDeferred, jqmReadyDeferred).then(function(){
deviceDeferred = true;
});
Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does