I want to programmatically change my jquery mobile page. I have read stackoverflow pages here
https://stackoverflow.com/a/24173950/4278933
jQuery mobile pagecontainer load()
and failed to get my code working. Sometimes I get an error on the console, sometimes I get nothing (no url change, gui change or console log output).
(Note, I am navigating TO f.html which is an external page).
All attempts to change the page are done AFTER device ready...
First method I tried was
Front
and then I triggered
$("#front").trigger("click");
With the above, nothing worked (no error or url change). However, manually clicking on the link achieved the page change I wanted.
Then I read
http://api.jquerymobile.com/pagecontainer/#method-change and combined with the two SO posts noted above, I tried
$( ":mobile-pagecontainer" ).pagecontainer( "load", "f.html" );
and also tried
$( "body" ).pagecontainer( "load", "f.html");
I get Error: cannot call methods on pagecontainer prior to initialization; attempted to call method 'load'
Where am I going wrong?
Because you don't want AJAX loading and you really want the browser to navigate to the new page (without loading it into the current DOM), you can just use the normal JavaScript Window.location object:
location.assign("f.html");
DEMO
Related
So I'm trying to use swipe.js in congunction with jQuery mobile.
I have it setup so that the swipe.js slider thingy will start automatically on the jqm 'pageshow' event.
I'm now running into the problem that the code in the swipe function will execute one additional time when I leave the page and comeback.
This issue seems a fairly common one with jqm, and I've read many possible solutions here on SO, and elsewhere on the internets.
However, all of these solutions that seem to work wonderfully for others involve a secondary 'click' event within the 'pageshow' event.
These solutions for example: http://www.gajotres.net/prevent-jquery-multiple-event-triggering/ seem great, but where is my 'click' function, sadly I don't have one.
I'm a little lost because I do not have a click event.
I believe the function is bound to the 'pageshow' event... and have tried many different ways to get around this.
$(document).off('pageshow', '#home').on('pageshow', '#home', function() {
var home = document.getElementById('mySwipe');
window.mySwipe = Swipe(home, {
auto: 5000,
speed: 500,
disableScroll: true,
callback: function(index) {
console.log(index);
}
});
});
The code above tries to implement solution #2 from the above link by unbinding from 'pageshow' with '.off' before binding it again with '.on'.
but I'm doing it wrong, and I don't understand.
I should mention that the swipe.js appears to run perfectly, but when trying to retrieve the index value in the callback into the console the above code repeats the console.log one additional time per return to the #home page.
Also, the .js code is in the header, and I am working with one index page with multiple page ID's.
Can anyone see the dot I'm failing to connect here ??
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
I'm trying to build some custom navigation in a dynamic application, all screens are obtained from the server and thus I registered the pagebeforechange event and execute my own function.
Everything works as I expected except when I refresh the data I destroy the dynamic pages and try to call the page I was in again using the page Id, but this second time, although my code creates the HTML for the page, jQuery Mobile throws an "c.data("page") is undefined" error.
I bind the pagebeforechange event:
$(document).bind('pagebeforechange', function(e, data) {
if(typeof data.toPage === 'string') {
appobj.dynamicPage(data.toPage, data.options);
}
});
Then in the dynamicPage method I create the HTML for my page based on Underscore.js templates and let jQuery continue changing the page:
$.get('templates/page.tpl.html', function (data) {
html = _.template(data, { /* several template parameters */});
});
page = $(html);
page.appendTo('body').page();
The idea was to use as much of jQM as possible since I'm creating the destination page and injecting it into the DOM.
When I need to update the supporting data, that I store in localStorage, I just find all dynamic pages and destroy them:
var current = $.mobile.activePage.attr('id');
$('.dynamicpage').remove();
$.mobile.changePage('#' + current
When running the application I can easily navigate between various screens/pages, even for pages that don't exist when the application starts but if the data needs to be updated (because the user added elements in the application of data in the database changed) then the removal code is executed but the old page is not regenerated ending in a white page with all the DOM contents hidden, but the page I wanted to navigate too seems to be in the DOM (at least firebug tells me so).
If I were to restart development I would probably use Backbone.js to handle my model updates and view changes but for now I'll have to use only jQM. Any suggestions? I understand that jQM is not finding my page but I don't see why since my event should be called and the page regenerated, even with the allowSamePageTransition flag set.
Regards,
Sérgio Lopes
I have a jqGrid loaded by AJAX inside a jQuery UI Dialog. Everything is working fine, except the Dialog which is not closing. When I click in both buttons, it reaches the alerts, but the Dialog is not being closed.
buttons: {
'Confirm': function() {
alert('OK Confirm');
$('#test-grid').dialog('close');
},
'Cancelar': function() {
alert('OK Cancel');
$(this).dialog('close');
}
}
I've tried with $('#test-grid').dialog('close') and $(this).dialog('close'), but no one works. If I remove the jqGrid loaded by AJAX, everything works fine.
The error console on Firefox and Chrome is empty.
I'm loading the jqGrid page with:
$('#test-grid').load('/grid').dialog('open');
Can anyone help me?
UPDATE
I've tried to load a simple HTML snippet using AJAX and the problem persists.
The problem is that the call to load is interfering with the call to open the dialog. You can fix this by loading the AJAX content into a child element of test-grid. For example:
$('#test-grid-child').load('/grid');
$('#test-grid').dialog('open');
Update
I just read the docs for load and gave this a bit more thought. What is happening is that when the code $('#test-grid').load('/grid').dialog('open'); is executed, an AJAX request is started and the dialog is created immediately. But once the load's AJAX request finishes, jQuery comes back and overwrites the contents of #test-grid. This explains why the dialog could not be closed, because the underlying markup is modified out from underneath the dialog object.
Retrieving data to a child element eliminates this problem since load and dialog each now manipulates a different section of the DOM.
Note that if the AJAX request takes a long time to complete, you might want to consider implementing a complete function to give feedback to the user - maybe by displaying a spinner until the data is ready. For example:
$('#test-grid-child').load('ajax/test.html', function() {
alert('Load was performed.'); // Perform any necessary UI action here
});
Anyway, more information than you probably needed, but I just wanted to update this question while it was still fresh in my mind...
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.