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 UI Modal Dialog Closes Immediately on JSP

We are opening a simple jQuery UI dialog from a JSP.
We see it for a split second, and it closes immediately. The dialog needs to stay open.
JSP code:
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function openPopUp() {
alert('OpenPopUp() called');
$("#dialog-1").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
});
}
});
}
</script>
Down below in the JSP, the Div and then the button that opens the popup:
<html:html>
<div id="dialog-1" title="Dialog Title goes here..." style="display: none;">This my first jQuery UI Dialog!</div>
...
<button id="disregard_1" onclick="openPopUp();">Open Dialog</button>
</html:html>

Your initialization should be separate imo.
Check the API/examples on jQuery UI and more in detail the modal form.
// init
var dialog = $('#selector').dialog({/*your options*/});
// bind event
$('#event-trigger').click(function(){
dialog.dialog('open');
});
To wrap this up in your situation:
// dom ready
$(function(){
var myPopup = $('#dialog-1');
// custom function
function openPopUp() {
alert('OpenPopUp() called');
myPopup.dialog('open');
}
// init
myPopup.dialog({
autoOpen: false, // prevent it from opening by default
width: 600,
height: 400,
open: function(event, ui){
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
});
}
});
});
I hope you see the difference between initializing onClick and calling something that has been initialized already.

JQUERY dialog Uncaught Error: cannot call methods on dialog prior to initialization

I have the following javascript which opens a JQUERY Dialog box which contains a partial view:
html
<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>
javascript
$(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
});
$('#addressLookupBtn').click(function () {
$('#dialog').dialog('open');
});
});
When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'
I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:
var $this = $(this);
But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.
edit
If I add this:
$('#addressLookupBtn').click(function () {
$('#dialog').dialog().dialog('open');
});
The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.

The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.
Add and empty DIV inside the dialog then call .load on that.
<div id="dialog" title="Address Finder">
<div style="overflow: hidden;"></div>
</div>
Then the JS:
$('> div', this).load("#Url.Action("AddressLookup")");

I needed to initialize a new dialog each time I clicked the botton, this did the trick:
<script type="text/javascript">
$(function () {
$('#addressLookupBtn').click(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
width: 700,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
}).dialog('open');
});
});
</script>

How to open jQuery modal dialog using <input type="button"> instead of anchor tag?

We previously have:
<input type='button' value='Some Button' onClick="window.open('somefile.php')">
Now we want to activate jQuery UI modal dialog instead of having a pop-up. We can trigger the modal dialog if we use an anchor tag like so: Open Dialog.
But what if it's an input button?
I am using this script to call the dialog (and so that it can open a file into the dialog box):
$(document).ready(function() {
$('.classfordialog').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

You can use anything to activate the opening of the jQuery Dialog.
For example.
$(function(){
$('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});
You can add the class to either a button, input, anchor, image, etc...

Well you obviously cant get the link and title from the "Link/A" if it isnt there?
$(document).ready(function() {
$('.classfordialog').each(function() {
var $dialog = $('<div></div>')
.load('somefile.php #content')
.dialog({
autoOpen: false,
title: 'Some title',
width: 500,
height: 300
});
$('.inputdialog').click(function(e){
e.preventDefault();
$dialog.dialog('open');
});
});
});

jQuery UI Dialog with an embedded video problem in IE

I have a link which when clicked opens up a jQuery UI dialog, the data is loaded in the dialog through ajax which is an embedded flash video(using flowplayer). The probelm in ie is that when i click on the link the dialog opens and the videos starts to play and when i close the dialog, the video still continues to play. If i click on the link again the dialog opens up and the video plays but not from the start.
The main html file has the following code
<script type="text/javascript">
$(document).ready(function(){
var $dialog = $('<div> </div>');
var dialogOpts = {
title: "My Videos",
modal: true,
autoOpen: false,
height: 500,
width: 800
};
$('.videobox').one('click', function(){
$dialog.load('data.html').dialog(dialogOpts);
});
$('.videobox').click(function(event){
event.preventDefault();
var url = event.target;
$dialog.dialog('open');
return false;
});
})
</script>
Click me!
and the remote file has the following code
<div id="player" style="width:640px;height:360px;"></div>
<script>
$f("player", "flowplayer-3.2.2.swf", "004.flv");
</script>
Everything works fine in FF, Safari and chrome, but in ie the video does not stop and continues to play even after the dialog is closed. I have spent a lot of time debugging but nothing seems to work. Cna anybody help please!!

replace code with this...
<script type="text/javascript">
$(document).ready(function(){
var $dialog = $('<div> </div>');
var dialogOpts = {
title: "My Videos",
modal: true,
autoOpen: false,
close: function() {
$(this).dialog('destroy').empty();
},
height: 500,
width: 800
};
$('.videobox').one('click', function(){
$dialog.load('data.html').dialog(dialogOpts);
});
$('.videobox').click(function(event){
event.preventDefault();
var url = event.target;
$dialog.dialog('open');
return false;
});
})
</script>

On dialog close you need to call the pause and then the unload methods of the player.
Something like
$f().pause().unload();