I am using jQuery Mobile with Yii Framework.
Yii framework allows easy partial render for Ajax requests.
jQuery Mobile on the other hand will not display anything that is not within the data-role="page" container. Even though it does an Ajax request, a full page refresh ensues because it appears to only be able to refresh all the content within this container (what's the point???).
How can I specify the container that jQuery Mobile will refresh, rather than the container with data-role="page"?
One would EXPECT that the container flagged with data-role="content" would be the Ajax container, but it's not. I can see a JS hack coming on.
The above can be done like this:
Create your header outside the container flagged as data-role="page".
Use the following jQuery to initialise the header (otherwise you will not see it):
$(function(){
$( "[data-role='header']" ).toolbar();
});
Related
I am using jQuery Mobile as a mobile framework. I use jQuery to dynamically populate my pages with custom content. jQuery Mobile does not apply styling to element created after page load. For that reason, I am using
$('[data-role=content]').trigger('create');
so jQuery Mobile re-evaluates the page styling after my new content has been created.
I also use SammyJs to load the routes and handle the dynamic content creation. I found that if I put the trigger(create) inline with my JSON request, the code does not work. However, if I execute the code from a console (adding time between the JSON request and the trigger), jQuery would correctly apply styling...
My workaround is to use setTimeout :
setTimeout(function() {
$('[data-role=content]').trigger('create');
}, 100);
However, I don't feel it is the best solution because the content appears unstyled for miliseconds (user can see it) and then gets refreshed with correct styling...
Is there a way to monitor DOM changes with jQuery mobile or Sammy?
I have a two page application. Both pages have all content created dynamically on the client.
Problem is, if I go page A > page B > page A > page B, on the second+ visit, page B does not get enhanced by Jquery Mobile anymore, although pagecreate triggers correctly. I'm stuck with a page of un-enhanced markup.
I can't call create on the separate widgets of the page, because widgets will be of random type and because I cannot call create prior to initialization. After receiving this error I called pagecreate manually on the un-enhanced page, which fixed all widgets.
Problem is, how can I detect if the page has been enhanced by JQM? Because I don't want to call this on an already enhanced page.
So, seemingly easy question:
How can I test if a page has been enhanced by Jquery Mobile?
Thanks for inputs!
It is pretty simple.
In case you were using trigger('pagecreate') to enhance page markup then use this to check if page container has been enhanced:
$(document).on('pagebeforeshow', '#index', function(){
alert($.mobile.activePage.hasClass('ui-page'));
});
Live example: http://jsfiddle.net/Gajotres/HthYd/
In case you are using trigger('create') to enhance only page content div use this to check if content container has been enhanced:
$(document).on('pagebeforeshow', '#index', function(){
alert($.mobile.activePage.find('[data-role="content"]').hasClass('ui-content'));
});
Live example: http://jsfiddle.net/Gajotres/8jcGb/
Of course, this cases will work only in case you are enhancing whole page or whole content.
EDIT :
And here's a real live example with a dynamically added page: http://jsfiddle.net/Gajotres/8jcGb/
OK. Let me try to explain my problem. I have three pages index, profile, contact and three links or navigation buttons in the header. When user clicks on profile button profile.html is loaded dynamically from the server using jquery load() method and place it in the div called container. Same goes for all pages. Now I also load all of my jquery plugins including jquery shadow plugin, script.js and jquery library on the index page only once. Now what I have is that on profile page I have a div tag on which I want to apply a jquery shadow plugin in my script.js which is loaded in index page. But it does not work this way(no idea why). What I have to do to make it work is to add a script tag in profile page and inside this I apply this shadow plugin to div tag which is inside profile page.
So this is what I want to ask is, Is there a better way to load pages through ajax using jquery so that whatever javascript code I am applying to all of the pages should be applied to all pages?
Thanks in advance
In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?
Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.
I want to reload on the content area of my website with jQuery/AJAX $().load() function. But my problem is that the header and footer needs to be displayed on all pages no matter your entry URL.
My site is build using templates, so my first thought was to remove the output of the layout above and below the unique content, as I would then prevent ie. the menu from being displayed twice. But I realized that if the user is not entering my site through the first page, lets say index.php, he won't ever see header or footer just an unstyled text page.
My question is, how would you work around this issue? JavaScript (+ jQuery) and HTML5 is allowed.
page.php:
<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>
js:
$("#content").load("page.php #mainContent"); //that will only load mainContent
or:
$.get('page.php', function (data) {
data = $(data).find('#mainContent').html();
$("#content").empty().append(data);
});
For more information, see the section in the jQuery documentation on load() and page fragments
It seems like you could have a couple of different options. If a user is visiting your site but not going to the first page, then you could just check to verify that the header and footers are showing after the page is loaded. If they are not found, then the initial site layout should be created. You could even decide to build the first page (index.php) this way so that every page would be handled the same way
$(document).ready(function() {
// If an element of id "header" isn't found in the DOM
if (!$("#header").length() > 0) {
// Generate the header and insert it as the first element of the DOM
}
if (!$("#footer").length() > 0) {
// Generate the footer and append it to the last element of the DOM
}
});
There are no doubt other solutions that you could entertain as well; you could probably have an include on each page that only gets included if the page is requested via a GET rather than an AJAX request.
The technique that you're looking for is known as Hijax, where you intercept the response from an AJAX request and only pull out the part of the DOM that you intend to replace on the rendered page.
The general idea is that the actual URL's themselves will still return the full page content, so if the request is coming from a new visitor, the entire DOM will load, but if the request is coming from the user clicking a hijaxed link on your page with a CSS selector specified, then only the part of the page identified by the selector is replaced.
Take a look at Hijax - jQuery Plugin. The actual site itself is built using the plug-in, and if you watch your network tab and look at the inspector in your Chrome or Firebug tools, you can see the content is swapped out without replacing the menus, header, or other elements that aren't being replaced.