Develop Reference

How to include jquery ui widgets inside a 2nd stacked modal dialog?

I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.
Code I've been trying for 2nd modal dialog (not working):
$(document).on("click", ".view_dialog_2", function(event) {
$dialog_2.load($(this).attr('href'), function()
{
$('#accordian').addClass('accordian2');
$('#meeting_date').addClass('date2');
$('#follow_up_date').addClass('date2');
$(function() {
$( ".accordian2" ).accordion();
collapsible: true;
});
$(function() {
$( ".date2" ).datepicker();
});
$dialog_2.dialog('open');
});
return false;
});
Code that is currently working for 1st modal dialog:
$(".view_dialog").click(function(){
$dialog.load($(this).attr('href'), function()
{
$(function() {
$("#addPartNum, .order-button")
.button();
});
$(function() {
$( "#meeting_date" ).datepicker();
});
$(function() {
$( "#follow_up_date" ).datepicker();
});
$dialog.dialog('open');
});
return false;
});
I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well.
This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)
EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)
var $dialog_2 = $("#view_dialog_2").dialog(
{
autoOpen: false,
height: 800,
width: 800,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$dialog_2.dialog("close");
},
"Cancel": function() {
$dialog_2.dialog("close");
}
}
});
EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/

Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/
HTML
<div id="start-box" title="First Form">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
<a id="add" href="#">Add/Edit</a>
<div id="add-box">
<label>Next</label>
<input type="text" />
</div>
<script>
$("#add-box").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
</div>
<a id="start" href="#dialog-conf">Start Here</a>
JQuery
$(function() {
$("#start-box").dialog({
autoOpen: false,
resizable: false,
height: 340,
modal: true,
buttons: {
"Save": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#start").button();
$("#start").click(function() {
$("#start-box").dialog("open");
});
$("#start-box").on("click", "#add", function(e) {
console.log("Launching Add Box.");
$("#add-box").dialog("open");
});
});
So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).
I hope that helps.
EDIT
You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/
$("#accordian").accordion();
Make sure your selector is correct and you call the right methods.

jquery dialog title and close bar remove

I have a jquery dialog with title and close bar. After that I am loading an another dialog called for confirmation. In my confirmation dialog UI I don't want the 'title' and 'close' button. If I remove title and close button using dialog 'open' method, in my confirmation dialog it's working fine with the title remove changes. But my backend dialog also getting removed with the title and close button. I only need that for the current dialog not for the parent one.
I am here attaching the UI for your reference.
In the first image, I am initializing with the jquery dialog with the title and close button.
In the second one, I am removing title and close with open function while init the dialog.
In my second dialog init,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).remove();
$(".ui-dialog-titlebar", ui.dialog | ui).remove();
},
If, I do remove like this, I am getting removed title all the dialog. I need to remove title for the specific dialog.Kindly help me out of this.

Okay, I found your issue. You were generalizing the title. You need to specifically do it. Try this:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false,
height:'300', // No I18N
width: '300', // No I18N
resize: false,
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
$( "#dialog2" ).dialog({
autoOpen: false,
height:'100', // No I18N
width: '100', // No I18N
resize: false,
open: function (event, ui) {
// Do not generalize here!
$("#ui-id-2").closest(".ui-dialog-titlebar").remove();
},
});
$("#opener1").click(function() {
$("#dialog2").dialog('open');
});
});
Preview
Album: http://imgur.com/a/xinCe#0
Fiddle: http://jsfiddle.net/PTXZV/65/

Multiple buttons call JQuery, need to know which one was clicked

I have multiple buttons which can call the same JQuery function. Example of html:
<tr><td>...</td>
<td><button class="modify" name="8">Modify</button></td>
</tr>
<tr><td>...</td>
<td><button class="modify" name="9">Modify</button></td>
</tr>
and so on...
And my JQuery function:
$(function() {
var id = $("button").attr("name");
$("#dialog").dialog({
autoOpen: false,
height: 250,
width: 240,
modal: true,
buttons: {
"Submit": function() {
$( this ).dialog( "close" );
$.ajax({
url: 'my_http',
type: 'POST',
data: $my_data,
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$(".modify").click(function () {
$("#dialog").dialog("open");
}
});
As you can see I need to now which button was clicked (I retrieve it's name at the beginning of the dialog function). But since its "clickability" is determined by the class, not id, I get the first id in the list (8 in this case, even though the 9th was clicked).
How can I know which one was clicked? If I use classes, I do not know ids (names), if I use ids, how can I know that it was clicked?

Inside the click() method:
$(".modify").click(function () {
/* 'this' is the clicked DOM node,
'$(this)' is the clicked DOM node wrapped in a jQuery object. */
var clickedButtonName = this.name;
/* or $(this).prop('name'), but don't use jQuery to access a property that
can be returned by the DOM API, it's needlessly expensive. */
$("#dialog").dialog("open");
}

You can use the first parameter of the click function like so:
Click here for live demo!
$(".modify").click(function (e) {
console.log(e.target);
});

javascript/jQuery: how to use var from click event in jQuery dialog?

Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).
//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')
//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
alert(fName); /* this gives me the right username */
dialog_ignore.dialog('open');
return false;
});
How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??
Any help is highly appreciated, thank you in advance!! :)

Try this:
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$(".name", dialog_html_ignore).text(fName);
dialog_ignore.dialog('open');
return false;
});
Example fiddle

Use the following code in your click event,
dialog_html_ignore.attr("name", fname);
In dialog box you can access like this
dialog_html_ignore.attr("name");

I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.
I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.
<script>
$(function() {
//set up the jQuery dialog
var dialog_ignore=$("#dialog-confirm").dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$("#ignore-dialog-fname").text(fName);
dialog_ignore.dialog('open');
return false;
});
});
</script>
<div id="dialog-confirm" title="Ignore Friend Request?">
<p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>

how to retrieve href value for an onclick event based on "class" selector in Javascript?

I have
Click to proceed
and following javascript. When I click on above link it displays the dialog box with 2 buttons. "return false;" stops the default event of link tag. But I need the functionality in which when I click "Yes, delete" to take me to other page by choosing href value of a onclicked anchor. I tried alert($(this).attr('id')); (as I thought I could pick up HREF value using "this.attr('href')") but it displays "dialog".
How do I make it work so that when I click on a link having class name "confirm_delete" it displays me dialog, and if I click cancel it stays on the page otherwise takes me to page according to href value.
$(".confirm_delete").click(function(){
$('<div id="dialog">Are you sure you want to delete?</div>').appendTo('body');
$("#dialog").dialog({
bgiframe: true, resizable: false, height:140, modal: true,
overlay: {
backgroundColor: '#000', opacity: 0.5
},
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($(this).attr('id'));
},
Cancel: function() {
$(this).dialog('close');
$(this).remove();
}
}
});
return false;
});
Thank you.

First off: try not to use underscores in class names. I've read somewhere they may cause problemsn...
Well, here:
$('a.confirm-delete').click( function(event) {
if( !confirm('are you sure you want to go?') ) return false;
});
here I've usedd the javascript confirm dialog. You can easily replace that with a jquery modal dialog.
jrh

OK, I can retrieve value of HREF
by var url = $(this).attr('href'); just after the $(".confirm_delete").click(function(){
line. It gives me "test.php?id=123" Only thing left is create/retrieve full url and redirecting to that url.
Thanks

This should do the trick:
$(".confirm_delete").click(function(){
var $delete = $(this);
...
$("#dialog").dialog({
...
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($delete.attr('id'));
}
}
});
return false;
});