I have a multi-page layout document where each all pages have the same header:
How can I update all pages at once with a certain text after the page has loaded?
The below code will replace old header of all pages with a new header. All you need is to specify when you want to do this? pageshow, pagebeforeshow, pagehide, pagebeforehide, etc...
Demo
var header = '<div data-role=header><h1>new header</h1></div>';
$('[data-role=page]').each(function () {
$(this).find('[data-role=header]').replaceWith(header);
$('[data-role=page]').trigger('pagecreate');
});
Related
I'm using some AJAX (ASP.NET Web Forms) to add new selectable elements on my site but the newly created ones aren't selectable. I guess this has to do with some events. Maybe it can be solved by using .on on those functions but I don't know how to do it. Anyone know how to fix that?
Here's my code:
$(".selectable").selectable({
filter: '.ui-widget-content',
stop: function () {
var result = $("#select-result").empty();
$(".ui-selected", this).each(function () {
var index = $(this).attr('id');
index = index.substring(12, index.length);
result.append(" #" + index);
});
}
});
when you load your page, jquery assign respective functions to each html tags. when you create some new div/html tags you should re-initialize the function because jquery doesn't know about your newly created html tags,
for the respective query
try re initializing the jquery function after adding new selectable element
hope this help..
I am using cordova 2.2.0 with Xcode 4.5.2. On one of my pages I have a select component and once a particular option is selected I want to display a table within a div. My html looks like this: <div class="hero-unit" id="#facprog"></div>
The javascript/jquery looks like this:
<pre><code>
$(function() {
$('#selFaculty').change(function() {
var facultyName = $('#selFaculty').val();
var progDetails = app.fillFacultyProgramme(facultyName);
alert(progDetails);
$('#facprog').append(progDetails);
});
});
</code></pre>
Note that #selFaculty is the id of the select object. However, when the select option changes, everything in javascript executes except for the append. Nothing shows up in the div. Is there a different way to add html element to a div in jquery under cordova 2.2.0 in iOS?
Thanks in advance,
José
With jquery you can refresh a div.
This is a good example:
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>
from http://designgala.com/how-to-refresh-div-using-jquery/
and there is another example here:
refresh div with jquery
The first example is useful when you need to load a script and refresh and the second one is useful when you need to make a change, e.g. append html and then refresh as in your case.
I have a multi-page document and I'm binding to the pageshow event of page "myId":
$('#myId').live('pageshow', renderMyIdTempalates);
I'm applying my JSON templates with PURE like this
function renderMyIdTempalates(event) {
$.mobile.showPageLoadingMsg();
var $page = $("#myId");
// do ajax call
$page.children( ":jqmData(role=header)" ).directives(...).render(data);
$page.children( ":jqmData(role=content)" ).directives(...).render(data);
$.mobile.hidePageLoadingMsg();
}
Initially I was using
$('#myId').directives(...).render(data);
to apply my templates. This caused problems since the selector didn't include the jqm attributes. So I used the jqmData method to grab the header and content to apply my templates. This works fine, but how do I select the entire document that I'm working with? I would prefer to apply my templates to the entire document once.
I tried:
$(":jqmData(role=page)") // selects all pages
$(":jqmData(id=myId)") // no luck
Any ideas?
the selector
div:jqmData(id="myID")
should work. just remember that myID should not be the id of that div.That page div should have a parameter data-id="myID"
On a page I have an iframe. In this iframe is a collection of items that I need to be sortable. All of the Javascript is being run on the parent page. I can access the list in the iframe document and create the sortable by using context:
var ifrDoc = $( '#iframe' ).contents();
$( '.sortable', ifrDoc ).sortable( { cursor: 'move' } );
However, when trying to actually sort the items, I'm getting some aberrant behavior. As soon as an item is clicked on, the target of the script changes to the outer document. If you move the mouse off of the iframe, you can move the item around and drop it back by clicking, but you can not interact with it within the iframe.
Example: http://robertadamray.com/sortable-test.html
So, is there a way to achieve what I want to do - preferably without having to go hacking around in jQuery UI code?
Dynamically add jQuery and jQuery UI to the iframe (demo):
$('iframe')
.load(function() {
var win = this.contentWindow,
doc = win.document,
body = doc.body,
jQueryLoaded = false,
jQuery;
function loadJQueryUI() {
body.removeChild(jQuery);
jQuery = null;
win.jQuery.ajax({
url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
dataType: 'script',
cache: true,
success: function () {
win.jQuery('.sortable').sortable({ cursor: 'move' });
}
});
}
jQuery = doc.createElement('script');
// based on https://gist.github.com/getify/603980
jQuery.onload = jQuery.onreadystatechange = function () {
if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) {
return false;
}
jQuery.onload = jQuery.onreadystatechange = null;
jQueryLoaded = true;
loadJQueryUI();
};
jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
body.appendChild(jQuery);
})
.prop('src', 'iframe-test.html');
Update: Andrew Ingram is correct that jQuery UI holds and uses references to window and document for the page to which jQuery UI was loaded. By loading jQuery / jQuery UI into the iframe, it has the correct references (for the iframe, rather than the outer document) and works as expected.
Update 2: The original code snippet had a subtle issue: the execution order of dynamic script tags isn't guaranteed. I've updated it so that jQuery UI is loaded after jQuery is ready.
I also incorporated getify's code to load LABjs dynamically, so that no polling is necessary.
Having played with their javascript a bit, Campaign Monitor solves this by basically having a custom version of jQuery UI. They've modified ui.mouse and ui.sortable to replace references to document and window with code that gets the document and window for the element in question. document becomes this.element[0].ownerDocument
and they have a custom jQuery function called window() which lets them replace window with this.element.window() or similar.
I don't know why your code isn't working. Looks like it should be.
That said, here are two alternative ways to implement this feature:
If you can modify the iframe
Move your JavaScript from the parent document into iframe-test.html. This may be the cleanest way because it couples the JavaScript with the elements its actually executing on.
http://dl.dropbox.com/u/3287783/snippets/rarayiframe/sortable-test.html
If you only control the parent document
Use the jQuery .load() method to fetch the content instead of an HTML iframe.
http://dl.dropbox.com/u/3287783/snippets/rarayiframe2/sortable-test.html
Instead of loading jQuery and jQueryUI inside the iFrame and evaluating jQueryUI interactions both in parent and child - you can simply bubble the mouse events to the parent's document:
var ifrDoc = $( '#iframe' ).contents();
$('.sortable', ifrDoc).on('mousemove mouseup', function (event) {
$(parent.document).trigger(event);
});
This way you can evaluate all your Javascript on the parent's document context.
I saw a lot of related questions, but none that directly have this issue...
I have a very large site for which I am building a jquery mobile theme. I don't have much control over the content though, and when it was built for desktop, a lot of #anchor tags were used to move to positions on the page.
I have fixed this for links on the same page with the following (jqm is a stand-in for the jquery object, I need to clean up the $/jqm references...
This is bound into the mobileinit event, and works if there are anchors on the page:
jqm('div').live('pagebeforecreate', function(e, data)
{
if(location.hash.length>0){
if($(location.hash).length>0){
if ($(location.hash).attr("data-role") != "page")
{
$.scrollTo(location.hash, 800);
};
}
}
//Check to see if there are any internal links on page
$("a[href*='#']").each(function()
{
//make sure they aren't legit jqm pages
if($(this.hash).length){
if ($(this.hash).attr("data-role") != "page")
{
//Disable jqm behavior, instead scroll down the page
$(this).click(function(event)
{
event.preventDefault();
$.scrollTo(this.hash, 800);
return false;
});
};
}
else {
$(this).attr('data-ajax','false');
}
});
});
});
So, if a user is on foo.php, and there's a link to #bar and #baz, it will nicely scroll to them, knowing that they aren't data-role="page"
But if the user is on foo.php and there's a link on that page to qux.php#bar it chokes because when the page loads, it is trying to to a changePage to #bar, but #bar on qux.php is really just an id for a regular old div.
It seems to me that something like the on-page solution above would work for this as well, but maybe I would need to bind to the actual page load instead of the pagebeforecreate?