I am trying to create a JQuery UI Accordion, but with the HTML within an accordion being generated by some jQuery code.
I also have some example accordion items in the base HTML; these are working fine.
The problem is that the (sample 1)
$(function(){
$("#accordion").accordion({
event: "click hoverintent"
});
});
code puts accordion-specific class, role etc. tags into the
<div id="accordion">
<h3>Heading</h3>
<div>
<p>
Stuff
</p>
</div>
...
tags, but these are not being inserted into the HTML code I generated with jQuery.
The items above '...' are working fine.
Similar tags generated by jQuery below the '...' do not work, as they don't receive the accordion tags.
I guess the problem lies in when to call the (sample 1) code, so that it is executed after my HTML has been generated. At present it is in the head of my page, as with the accordion examples. I have tried it in other places, and also tried but without success.
Any suggestions, please?
You need to destroy then recreate the accordion for it to be able to work with appended items.
Here is a demo
Related
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
I have Jquery Mobile working and have found the best way to get it to work is by including it in the /client/ directory. So, I have the following files in my /client/ directory
jquery.js
jquery-mobile.js
jquery-mobile.css
Then I include this in my index.html
<script type="text/javascript">
$( document ).bind( "mobileinit", function( event, data ){
$.mobile.autoInitializePage = false;
}
</script>
I tried creating a smart package but then the loading order invalidated jquery plugins for some reason. I tried just using references in the HEAD but that do invalidated jquery plug ins for some reason. The above works, pages transition, views render and I can even use the Meteor auth branch and render subscriptions.
The problem I am having now is when Meteor updates the DOM with data and renders the data it is not rendered with JQM.
For example, if I try to use a JQM Listview to display a Meteor subscription it just formats like a regular un-ordered list .
Here is the template code.
{{#each get_groups}}
<ul data-role="listview" data-theme="a">
<li>{{name}}</li>
</ul>
{{/each}}
Which just renders as bulleted items. If I use static data like the JQM tuts show it renders fine.
<ul data-role="listview" data-theme="a">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
I am suspect I may need to call some kind of refresh, which means I would have to use observe on the collection subscriptions I imagine.
I am having the same problem with a custom login button. I use a template helper to return the Meteor.user().username and the button doesn't get formatted by JQM. If I don't use return the username the button of course renders find through JQM.
I also have the same problem when I try to access the Handlebars current user. If I try to do the following the publicPage will load.
{{#if currentUser}}
{{>privatePage}}
{{else}}
{{>publicPage}}
{{/if}}
Once I login the privatePage flickers quickly and then just a white screen. If I remove the references to currentUser then I can login and use the JQM changePage method to load the privatePage.
$.mobile.changePage("#privatePage");
I only have a rough understanding but I believe it is related to how and when JQM formats data for rendering vs. how and when Meteor formats data for rendering.
Does anyone has any ideas on how I might get JQM to behave nicely with Meteor? or if I should even bother and maybe use another mobile front end alongside Meteor?
Thanks
Steeve
You do have to refresh when data changes. Here's a full sample app with Meteor and JQM:
http://jqm.meteor.com/
Source code here:
https://github.com/snez/jqm-meteor
Notice on lines 17 and 38 that when an element is rendered, you have to refresh it and rebind any custom events to it.
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
I am trying to understand how the integration between jQueryUI and Emberjs should be done. I am new to both libs and to javascript so this might be a newbie question.
I have this jsfiddle set up: http://jsfiddle.net/pSKgV/1/ and it renders this resulting document:
<body class="ember-application">
<div id="ember129" class="ember-view">
<div id="ember163" class="ember-view ui-draggable"></div>
</div>
</body>
The code is mostly taken from this blog post: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Questions: How do I put something inside the inner div? I want to put some content that i can bind to something.
I have tried the following:
{{view App.Draggable}}Drag Me{{/view}} but that gives an error. I’ve also tried
adding this to the App.Draggable object:
didInsertElement: function() {
this.$().html(“Drag Me”)
}
but that did not give the expected results. How is the best way to use/access the jquery/jqueryui functions such as .html() in this situation?
Also, is the outer div necessary or can I make this view only render one div element?
regards
Oskar
http://jsfiddle.net/ud3323/XMgwV/
You forget the # symbol {{#view App.Draggable}}Drag me{{/view}}. You should also create namespaces in Ember using Ember.Namespace.create() instead of just using an empty {}
I'm working on a site that has a dynamically generated FAQ and I'm trying to get nested accordions working. The problem is, only the first collection of questions take on the ui-accordion class.
Here's my code:
http://jsfiddle.net/SmFdt/
(I just copied the source of the page and stripped out most of the text)
What am I doing wrong?
You've got the same id assigned to multiple divs. Try the following instead:
HTML
<h1>Frequently Asked Questions</h1>
<div id="faqs-container" class="accordian">
<h3>One</h3>
<div class="accordian">
<h3>A</h3>
<div>AAAAAAAAAA</div>
<h3>B</h3>
<div>BBBBBBBBBB</div>
</div>
<h3>Two</h3>
<div class="accordian">
<h3>A2</h3>
<div>AAAAAAAAAA2</div>
<h3>B2</h3>
<div>BBBBBBBBBB2</div>
</div>
</div>
JavaScript
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false
});
Link to example: http://jsfiddle.net/SmFdt/1/
Try this http://jsfiddle.net/SmFdt/3/
The reason it was not working was you were using the same id for multiple divs. I have changed the ids to classes.
On a side note, you have lot of code to display the accordion. You may possibly want to consider reducing some code. (e.g. no need of <p> inside <div>. You can control the spacing using CSS margin and padding properties.)