I'm trying to create a jQueryUI Dialog and have it insert itself into the dom within a specific element. We have a content section that is the parent of a number of styles so items within the dialog are not styled since jqueryUI does an append to body. Is there a way to tell jqueryUI to append to a selector of my choosing?
What it does
<section id="content">
</section>
<div class="dialog"> the dialog </div>
what I want
<section id="content">
<div class="dialog"> the dialog </div>
</section>
I know this question is a little old but I wanted to make sure any new comers were pointed in the right direction. The option "appendTo" was added in version 1.10.0.
$( ".selector" ).dialog({ appendTo: "#someElem" });
You can read about it here
From Custom CSS scope and jQuery UI dialog themes
// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
autoOpen: false
// other dialog options
});
// Take whole dialog and put it back into the custom scope
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen)
d.dialog('open');
This link maybe of some use.
But the thing you'd like to achieve seems to me a bit against the model of jQuery UI library. You can style the dialog using the CSS classes specified in the Theme tab on this page.
If you can transfer the id of the element, you want to make into a dialog, to a class, you can use the following code
$( ".dialog" ).dialog({ dialogClass: 'content' });
and you should update your CSS to reflect the change. Thus you do not introduce duplicate id-s (which may lead to problems in future work and is semantically incorrect), if you duplicate the #content tag inside the dialog content
You can use jquery's append method.
$('#content').append('<div class="dialog"> the dialog </div>');
Related
I have a jquery UI dialog on my page thusly:
$(function() {
$("#dialogDone").dialog({
closeOnEscape: true,
modal: true,
width: 350,
autoResize:true,
show: "drop",
hide: "drop",
autoOpen: false
});
});
<div id="dialogDone" title="Activity Done?" class="RNDDialog">
<div style="text-align: left;">
You are about to stamp this activity as DONE. Notifications may be sent out, and only Project Admins can reverse this.
<br><br>
<input type="checkbox" id="chkKeepShowingDoneWarning" class="RNDCheckbox" checked>Keep showing me this
</div>
<br><br>
<center>
<button class="GreenButton" onclick="stampActivityDone()">Yes, it is DONE</button>
<button class="GrayButton" style="margin-left: 10px" onclick="cancelDone()">Cancel</button>
</center>
</div>
After launching the dialog, nothing inside it is clickable. The grayish layer that normally covers the whole screen (but not the dialog normally) and makes everything in the background disabled, is also for some reason covering the dialog itself. I cannot click either button, nor check/uncheck the checkbox.
You can see it for yourself here.
I created the test page in the link above as a bare-bones reproducible minimal example. I have used jquery dialogs many times in this web app and others, but for some reason on this particular page, I get this strange behavior and cannot figure it out.
After launching the dialog, even though everything on the page including the dialog contents is disabled, you can still hit ESC, which dismisses the dialog and makes the page accessible again. This tells me that the fundamental jquery UI dialog wiring and event model is still working.
I read this other post that suggested setting the z-index of the dialog, so I experimented with that but it did nothing.
Any ideas?
I ran an HTML formatter on your test page source code and it looks like you have a lot of unclosed tags. Some of those unclosed tags are likely causing elements to have parents that you don't expect. I would recommend very carefully reading your code and making sure that every opening tag has a matching closing tag at the position you expect.
I found the problem. I was referencing an older jquery UI css file (1.9.1) instead of the newer one that goes with jquery 1.12.1. This is an edge case admittedly, but maybe it will help someone in the future who references an incorrect jquery UI css file.
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
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've been trying to get a Dojo (1.6) dijit.Tooltip to work when defined in a wijit template.
So, if I have wijit template that includes the following:
<a data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I can see the link of course, but nothing happens when I hover. Scouting round the newsgroups it seems there might be a problem with defining tooltips in wijit templates, but it's not mentioned in the Dojo docs.
Is it possible to define tooltips inline like this? Or am I just doing something wrong, it seems like the obvious place to do it.
If not, is there an accepted approach for creating and linking tooltips to DOM nodes defined in wijit templates?
Tooltips connectId property has to be the id of a DOM node. data-dojo-attach-point is not an id, it just creates a reference in the instantiated widget.
So in your case you need to assign an id to the a-node and use the same id in connectId. To avoid id clashes when creating multiple instances of your widget you can use the ${id} variable substitution to ensure that all ids are unique:
Your code should look something like this:
<a id="${id}_link" data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'${id}_link'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I've had problems doing it this way before. I used script to create them on my page after I had done some other work, maybe something like this will help you out if you use it in the template postCreate method.
var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
new dijit.Tooltip({
connectId:node,
position:"above",
label: toolTipLabel
});
});
Responding to an old thread here, but just wanted to share a solution for people looking to use tooltips without IDs on their custom widget elements. It's not as pretty as just using tooltip, but it works. It uses the "dijit/popup" and "dijit/TooltipDialog" modules.
this.editTooltipDialog = new TooltipDialog({
content: "<p>I love tooltips</p>",
onMouseLeave: function(){
popup.close(this.editTooltipDialog);
}
});
on(this.targetDiv, 'mouseover', lang.hitch(this, function(){
popup.open({
popup: this.editTooltipDialog,
around: this.targetDiv
});
}));
I tried to replicate the issue in jsFiddle: http://jsfiddle.net/phusick/EcLLb/.
I found out that dijit.Tooltip widget from the template is instantized, but it does not connect mouse events, presumably because DOM node it attempts to connect to does not exist yet (i.e. has not been added to document DOM tree).
To prove the aforementioned I tried to connect the tooltip in widget's postCreate method, when all DOM building is done and it worked:
postCreate: function() {
this.inherited(arguments);
this.tooltip1.set("connectId", this.tooltipMe); // w/o this the tooltip won't show
}
So you can instantize tooltips via a template markup and then just connect then to DOM nodes in postCreate method.
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!