I am creating multiple jquery ui accordions dynamically on a page.
The render of the page takes a realllly long time and it gets stuck on the creations of the accordions.
Is there a way to create multiple accordions on the same moment?
Thank you
EDIT
Think I have a few hundered h3 & divs on my screen and on load of the page i call this function:
function createAccordion(accordion) {
if (typeof accordion == 'undefined')
accordion = '.accordion';
$(accordion).accordion({
active: false,
collapsible: true,
animate:false,
heightStyle: 'content'
});
}
You could try using Html5 web workers. This is designed to free up the UI thread when doing large amounts of processing. See example on w3c schools
Alternatively you might want to look at setTimeout patterns. A good example here.
Related
I have seen many techniques and advice for getting deep linking to work in jQuery Mobile, but my situation requires just the opposite.
I have a multi-page document, completely self-contained. I want the entry point to the app to be the first page, and to disable any deep links (edit: by "deep links" I mean bookmarks , or simply the ability to return) to the other pages in the document. I also do NOT want navigation within the app to affect the hash tag. In other words, if the user is in my app, and they hit their browser's back button, I want them to go to whatever page they were looking at before they entered my app, even if they are not on my first page.
What I have tried is to set the changeHash option on the mobile.changePage method to "false" on all my internal backward and forward navigation. But the result is that when they use their browser's back button, they go TWO pages back. Furthermore, this technique has not disabled deep linking, as I wanted it to do.
I'm hoping that someone else can advise without the necessity of me providing code examples, since my code is otherwise rather complex.
You can disable changeHash completely on mobileinit event. Modifying global defaults should be placed in head after jQuery.js and before jQuery Mobile.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="jquery.mobile.js"></script>
And then, you need to listen to back button on navigate event and take user through history, using window.history.back().
$(window).on("navigate", function (event, data) {
if (data.state.direction == 'back') {
window.history.back();
return false;
}
});
Demo
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
I'm having a lot of pain understanding how jQuery Mobile handles pages refresh after an ajax update.
I'm having a two pages - unique file site: a search engine.
First page is a search field. Submit triggers a JSON call and parser which updates the second page: results.
for now i'm using: $.mobile.changePage( $('#result') ); which does the job great from search field to result page.
However:
If I reuse it from result page for next/prev pages ( new json call, new parse, new added nodes in the DOM );
Jquery Mobile just don't "paint" the newly added nodes.
can anyone explain, please the use and distinction of
1- $.mobile.page()
2- $.mobile.changePage()
3- $.mobile.refresh()
or give me a hint on how I should handle page changes.
thanks!
function refreshPage()
{
jQuery.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
}
Taken from here http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/ also tested on jQuery Mobile 1.2.0
Please take a good look here: http://jquerymobile.com/test/docs/api/methods.html
$.mobile.changePage() is to change from one page to another, and the parameter can be a url or a page object. ( only #result will also work )
$.mobile.page() isn't recommended anymore, please use .trigger( "create"), see also: JQuery Mobile .page() function causes infinite loop?
Important:
Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.
$.mobile.refresh() doesn't exist i guess
So what are you using for your results? A listview? Then you can update it by doing:
$('ul').listview('refresh');
Example:
http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/
Otherwise you can do:
$('#result').live("pageinit", function(){ // or pageshow
// your dom manipulations here
});
I posted that in jQuery forums (I hope it can help):
Diving into the jQM code i've found this solution. I hope it can help other people:
To refresh a dynamically modified page:
function refreshPage(page){
// Page refresh
page.trigger('pagecreate');
page.listview('refresh');
}
It works even if you create new headers, navbars or footers. I've tested it with jQM 1.0.1.
I found this thread looking to create an ajax page refresh button with jQuery Mobile.
#sgissinger had the closest answer to what I was looking for, but it was outdated.
I updated for jQuery Mobile 1.4
function refreshPage() {
jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
// 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406
});
}
// Run it with .on
$(document).on( "click", '#refresh', function() {
refreshPage();
});
I solved this problem by using the the data-cache="false" attribute in the page div on the pages I wanted refreshed.
<div data-role="page" data-cache="false">
/*content goes here*/
</div>
In my case it was my shopping cart. If a customer added an item to their cart and then continued shopping and then added another item to their cart the cart page would not show the new item. Unless they refreshed the page. Setting data-cache to false instructs JQM not to cache that page as far as I understand.
Hope this helps others in the future.
This answer did the trick for me http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php.
In the context of a multi-pages template, I modify the content of a <div id="foo">...</div> in a Javascript 'pagebeforeshow' handler and trigger a refresh at the end of the script:
$(document).bind("pagebeforeshow", function(event,pdata) {
var parsedUrl = $.mobile.path.parseUrl( location.href );
switch ( parsedUrl.hash ) {
case "#p_02":
... some modifications of the content of the <div> here ...
$("#foo").trigger("create");
break;
}
});
I am using a master page on a JQuery-Mobile app that have few controller , and I want to set up a Javascript call to an initialize function on every page even when it loads through Ajax,
Iam sure there are few ways to do that, but whats the best approach and what would be the alternative to $(document).ready when the page is called through ajax instead of being directly loaded without that.
takepara's answer is correct, but...
If you want to modify the content of the page you will have to bind earlier.
Take a look at beforepagecreate event.
If your handler for this event returns false, then no JQM widgets and styles will be applied and you can work with it manually.
jQuery Mobile Docs - Events
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
or
$(document).bind("pageshow".function(){
// initialize code here
});
I'm just not getting event delegation with jquery ui tabs, or at all!
I got the code for jquery ui tabs and loading the pages with ajax working perfectly. However I'm having trouble understanding event-delegation. I load 4 tabs with external content, depending on the tab which is opened. Inside those tabs I would like to attach the same widgets to the input buttons and links. So far my code looks like this
JS for rest of page already loaded
$("button, input:submit, a", ".create_button").button();
$("a.edit_button").button({
icons: {primary: 'ui-icon-pencil'}
});
$("a.delete_button").button({
icons: {primary: 'ui-icon-circle-close'}
});
$("a.active_button").button({
icons: {primary: 'ui-icon-lightbulb'}
});
JS For Tabs:
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {error: function(xhr, status, index, anchor)
{$(anchor.hash).html("Could not load");}},
selected: 0})
});
</script>
HTML
<div id="tabs">
<ul>
<li>Pass Information</li>
<li>Entries</li>
<li>Event Administration</li>
<li>Profile</li>
</ul>
</div>
I've learned here on stack overflow that I have to attach a click event to my #tabs div with live(). Best guess anyway.
however I cannot find any examples that work for me and my limited understanding of event delegation.
Any help is appreciated.
Rick
Right now, you have "error" being handled, but nothing else. You need to handle "success" or "complete"... actually, why are you using AJAX at all? You don't appear to be requesting any data from off of the page?
It seems like the key to your question is this:
Inside those tabs I would like to attach the same widgets to the input buttons and links.
Sounds like you want to use the "show" method of the tabs widget:
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {error: function(xhr, status, index, anchor)
{$(anchor.hash).html("Could not load");}},
selected: 0,
show: function() {
$([selectors for buttons or jQuery UI widgets in your tabs]).button();
}
})
});
FWIW, this question is not really about event delegation. That article is useful in understanding the concept.
Turns out that .live() only works on events. So though I could bind something to the links, it would not actually take affect until the link has an event take place, i.e. click or hover.
A workaround would be to dynamically add events to the links with the loaded content, but that is quite tricky and adds a lot of overhead to the application. Instead I chose to style things within loaded content in a different way. In the process of learning about this, I did end up using live() for form submission and a reload of the content after the submission takes place.
Thanks guys for your help. RwL. You ended up not actually answering the question, but your prodding sent me in the right direction and I learned a lot. I was ultimately able to solve the problem myself. You know, give a man fish or teach him to fish, yadi yadi yadi...
Thanks!