I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">
Related
I've got a two page jQuery mobile app, and within the init function, the following code..
Call to the init function
$(document).on('pageinit', function(){
MyPages.init();
});
init: function() {
$('td[id$="drops"]').each(function() {
console.log("Element: " + $(this).attr('id'));
}),
};
I have elements in page one that match the above, such as '#early_drops', '#late_drops', etc. These elements do not exist on page 2, but when page 2 loads, the elements are displayed in the console just like when page 1 is loaded. What am I missing here?
Thanks very much,
-Adam vonNieda
By default jQuery loads pages using AJAX into the existing page in order to allow the animated transitions. If you don't want this you just need to 'turn off' the AJAX loading.
See description here: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/links/
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with AJAX. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via AJAX.
You can also disable AJAX across the entire app by default using global configuration: http://api.jquerymobile.com/global-config/
I am having trouble with only firefox. My page shows a tree structure that is loaded via ajax as the user clicks on the nodes they want to expand. The problem I'm having with firefox, and only firefox, is that it will expand the nodes on the first page load. But after that firefox caches it weird and the node header, not children, of the ajax request gets carried over to the new page. This is an issue because the node's header that is carried over contains information that determines if the node has retrieved it's children.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="1"/>
...
</div>
It should be as it is on the first page load.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="0"/>
...
</div>
My Javascript checks for a nonzero value on that input to do the AJAX call.
Is this a bfcache issue?
I'm lead to believe it's not because I added
window.onunload = function();
to the js file and in a script tag and neither fixed it which this article
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
says should invalidate the bfcache.
I'm using asp.net MVC 4 and I tried using the MVCdonutcaching to set this page and partial views to not cache. But that didn't work either.
Maybe it's the bfcache, maybe it's not.
I had to face the same problem some time ago. The browser caches were causing some strange behaviour on our forms, and it was affecting the expected results of the page.
Someway to solve itSomething you can do in order to make the program load always the correct value (assuming you are loading it from ) is to initialize the value through your Javascript.
If you use JQuery, you should use:
<script type="text/javascript">
$(document).ready(){
//Assign your items values here
}
<script>
You can also use the onload handler in JS.
Hope this helps.
I was able to solve the problem. Firefox caches all form data even hidden inputs. Since I was using a hidden field to store the flag that enabled the AJAX request it would reload the form data with the flag set. I moved it to a custom attribute and it works exactly as it should.
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
A question similar to this has been posted several time, but I cannot find a solution that works. Hopefully, someone can help!
I am using jQuery Mobile 1.1 and jQuery 1.7.2, so I'm on the most recent stable releases. I want to create a dynamic page header. Using this HTML code, it works fine:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
So I then go to dynamically create the title. I change the HTML to this:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
And added the following jQuery code:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
The title appears, but is not styled. I have found several posts about this. In the jQuery Mobile Documentation, it says:
"However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
So I tried several things. After the above code, I added the following:
dirHeader.trigger("create");
This had no effect. So I tried to put it on the actual append itself:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
This had no effect. I then tried the process on the parent element (in this case, the id of the parent div is "levela"). So I tried this:
$('#levela').trigger("create");
This also had no effect. At this point, I am completely lost. Every solution involves doing one of the things I have tried and is just not working. I must be missing something incredibly basic but I just can't seem to find it.
Thanks in advance for your help!
You can update the content by calling .page:
See this working Fiddle Example!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
I just solved a similar problem -- it appears that jQM headers and footers do not have the "create" method, so as far as I can tell, the css classes and roles need to be added manually.
For reference, I posted an example fix on this (old) question: JQuery Mobile trigger('create') command not working