Response title
This is preview!
Move this topic
More than one dialog (other widgets) per page?
in Using jQuery UI
•
7 years ago
Hello, I saw an old thread on here about making the dialog widget dynamic, but it didn't have an answer and there were no other threads besides that. Is it possible to do? How can I create dialogs easier (or make it easy for the content editors on our site)? I haven't really done anything else with other widgets yet, so if commenting on using more than one of other widgets on a page is related/similar, please enlighten all for future reference! Thanks. Looking forward to your educated answers.
1
Replies(16)
That depends on what you mean by making the dialog widget dynamic. Are you talking about, creating dialog content on the fly? You can use as many individual dialog widgets as you like, on a given page. But I suspect you're leaning toward using only one dialog instance, and loading it up with content as needed, which is fine, a lot of people take that route. There are trade-offs to whichever approach you choose, so supply a little more info here if you want some help evaluating the alternatives.
Leave a comment on Adam Boduch's reply
Perhaps dynamic is not the correct word. The docs have
function myFunc(id){
SCRATCH THIS
So I am sure the solution is under my nose...?
EDIT: Please ignore the above function bit. I just meant I need my users to enter a different id for each dialog on a page, without having to change the function:
<
script
>
$(
function
() {
$(
"#dialog"
).dialog();
});
</
script
>
<
div
id
=
"dialog"
title
=
"Basic dialog"
>
<
p
>
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
</
p
>
</
div
So here can I let my content editors just create the div, its id, title, and content and not have to create a function each time?
$(
"#"+id
).dialog();
}<So I am sure the solution is under my nose...?
EDIT: Please ignore the above function bit. I just meant I need my users to enter a different id for each dialog on a page, without having to change the function:
<
script
>
$(
function
() {
$(
"#dialog"
).dialog();
//I want to avoid having to have #dialog, #dialog2, #dialog3 etc. and just have this function once at the top of our page templates.
});
</
script
>
Leave a comment on jcharlesberry's reply
Leave a comment on jcharlesberry's reply
If you want one function to create all the dialogs on your page, why not use classes instead? That way, your content editors only have to ensure that their content divs have the correct class applied to them, and no need to worry about conflicting IDs.
Something like
$( ".dialog-content" ).dialog( { /* the standard options for any given dialog */ } );
Leave a comment on Adam Boduch's reply
Thank you, but wouldn't that cause all dialogs to open at the same time? How could I avoid the below?
$( "#opener" ).click(function() {$( "#dialog" ).dialog( "open" );});$( "#opener2" ).click(function() {$( "#dialog2" ).dialog( "open" );});$( "#opener3" ).click(function() {$( "#dialog3" ).dialog( "open" );});
How would I fix this problem above?
Leave a comment on jcharlesberry's reply
None of the dialogs will open if you set the autoOpen option to false. However, it looks like you have a 1-1 with the opener and the dialog instance. Which doesn't stop you from adding a class as I mentioned earlier to create the dialogs, while using the ID selector to open specific dialogs.
Leave a comment on Adam Boduch's reply
Thanks again, but I feel I am not explaining myself correctly. My example of the 1-to-1 opener-dialog situation is my way of saying, how can I avoid this? I just need to use more than one dialog on a page and need the correct way, while avoiding my example.
Leave a comment on jcharlesberry's reply
Hello Adam, I did not mean to be rude or anything, but maybe I misunderstood you? Is using more than one widget on a page just something so simple that I am not making sense?
Leave a comment on jcharlesberry's reply
I think I've lost sight of the issue you're having. Maybe try creating a fiddle?
Leave a comment on Adam Boduch's reply
Well would this work?
$( ".dialog" ).click(function() {
$( this.id + "_div" ).dialog( "open" );
});
<a href="#" class="dialog" id="dialog1">click for dialog #1</a>
<div id="dialog1_div">My dialog content</div>
Or is there a more correct/better way?
$( ".dialog" ).click(function() {
$( this.id + "_div" ).dialog( "open" );
});
<a href="#" class="dialog" id="dialog1">click for dialog #1</a>
<div id="dialog1_div">My dialog content</div>
Or is there a more correct/better way?
- $( ".dialog" ).click(function() {
- $( "#" + this.id + "_div" ).dialog( "open" );
- });
JΛ̊KE
Leave a comment on jcharlesberry's reply
Thanks. Do you think this a best solution for our editors and in general?
It’s logical. I don’t know what you mean by "for our editors".
JΛ̊KE
JΛ̊KE
Leave a comment on jcharlesberry's reply
Sorry, meaning that this solution requires no JS for the editors, but is there an even better way other than telling them to give the class to the link and the ids to both the link and the div?
Leave a comment on jcharlesberry's reply
It’s logical and easy. It’s a common idiom used with the web.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on jcharlesberry's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jcharlesberry's question
{"z2954132":[14737000004931874,14737000004932585,14737000004932597,14737000004936173,14737000004932987,14737000004954208,14737000004954523,14737000004954525,14737000004954527,14737000004954529],"z28857385":[14737000004933837,14737000004933899,14737000004937103,14737000004955297],"z2950240":[14737000004952497,14737000004952499,14737000004952503]}
Statistics
- 16 Replies
- 6760 Views
- 1 Followers