Develop Reference

how to display multiple modals as you click a button in each consecutive modal

i'm trying to ajax multiple dialogs onto the page and then display the first and subsequent dialogs when the user clicks on the okay button within each dialog. i've got pretty close but it doesn't quite work. The problem i have is that i'm not sure how to close the clicked modal and then display the next modal in sequence. any help much appreciated!???
thanks,
mark up
<div class="mymodal" style="display: none">
<!-- inject modal content into here -->
</div>
javascript code
(function(ns) {
var modalArray = [];
ns.calculateWhatModalsWeNeed = function () {
$.ajax({
url: serviceUrl,
cache: 'testurl',
data: myData,
type: 'post',
success: function (data) {
// based on the response an array is built up
// i.e.
modalArray.push('modal1');
modalArray.push('modal2');
ns.loadModals(modalArray, ns.showModal());
},
dataType: 'json',
contentType: "application/json; charset=utf-8"
});
};
ns.loadModals = function(modalsToShow, callback) {
// call and load the modal mark up into the DOM
for (var i = 0; i < modalsToShow.length; i++) {
var successCallBack = function (html) {
$('.mymodal').append(html);
};
// Load modal window onto page
var modalUrl = 'myurl' + modalsToShow[i];
// ajax command to call the mvc controller
// the modalsToShow array are the view names
// i.e. 'myurl' + '/' + modalsToShow[i];
ajaxcommand.get(...);
}
if (callback && typeof (callback) === 'function') callback();
};
ns.showModal = function () {
// this is the problem i think - how to
// trigger each modal here as you click okay on each one..?
$('mymodal:first').dialog({
width: 633,
closeOnEscape: true,
modal: true
});
};
})(namespace('stackoverflow.problem'));

You will want to use the close event for the dialog.
$('mymodal:first').dialog({
width: 633,
closeOnEscape: true,
modal: true,
close: function(event, ui) {
// do something...
}
});
You can also bind event listener like so:
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );
On a side note, you are missing a . before your mymodal class.

Redirect not always working with JQuery UI Dialog

I am having some issues getting the jquery ui dialog redirecting always. When I click a delete link it asks if you are sure. If you click the delete button it should be redirected. THe problem is it doesnt always redirect the first time. It usually only works after you click the dialog window delete the second time. Does anyone know why this might happen? I have tried using the redirect in multiple places including after the query happens and before and after the delete query closes.
Page where dialog redirects(at bottom);
Delete
<script>
var id = "";
//run function after jquery dialong confirm
//step 1 - the action
$(".delete").click(function(e) {
e.preventDefault();
id = $(this).parent().attr('id');
//console.log(id); // check you get it first
$('#dialog').dialog('open');
});
//step 2 - the dialog modal
$("#dialog").dialog({
resizable: true,
height: 100,
modal: true,
autoOpen: false,
buttons: {
"Delete": function() {
//console.log(id + " made it to dialog"); // make sure our id makes it this far
deleteUser(id); // run delete photo function
window.location.href = "http://www.speechvive.com/adminSLP.php";
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
//step 3 - php function
function deleteUser(user_id) {
//console.log(user_id + " made it to function"); // make sure our id makes it this far
$.ajax({
type: "POST",
url: "/adminSLP.php#delete",
data: {user_id: user_id}
}).done(function(msg) {
console.log(msg);
//no message bc we did a fadeOut
//var msg would show any errors from our php file
});
}
;
</script>

Ajax Based Display Not Accurate

I'm building a Joomla module that uses slideDown and ajax of jQuery.
The way it works is that it populates the slideDown div, compute the div child element with highest height, and resizes the containing div height for display.
Problem is if the page is not cached (i.e. if it is on first load of the page) the height is not displayed properly as below
But on second click and so on, it displays correctly as follows
I'm thinking it is because the contents of the div child element are not completely populated before the height is computed, hence a false height is generated. I've tried some things to ensure that does not happen - right now I'm using a callback function along with the function that populates the div tag.
Quick help will be highly appreciated, thanks!
Edit - here's the code that populates
menuItemAjax: function (urlContent, dataContent) {
jQuery.ajax({
type: "POST",
url: urlContent,
data: dataContent, // data to send along with url
complete: function () {
//console.log("Process completed");
},
success: function (returnedData) {
WetvCreateHtml.popDropDownDiv(returnedData, function() {
var ddChildren = dropdownDiv.children(), highestHeight = 0;
ddChildren.each(function(){
if (jQuery(this).height() > highestHeight) {
highestHeight = jQuery(this).height();
}
});
dropdownDiv.animate({ height: highestHeight });
});
},
error: function () {
//console.log("Error occured");
},
statusCode: {
404: function() {
//console.log("Page not found");
}
}
});
},
popDropDownDiv: function(returnedData, callback) {
dropdownDiv.html(returnedData);
if (typeof(callback) == "function") {
callback();
}
}

Delete table row with JQuery animation in Firefox

I have an HTML table which uses jQuery DataTables (https://datatables.net/). The rows are rendered with html links to delete a row. I have used the following code to handle the click event of link, delete the row on the server and then animate deletion of the row on the front end.
$(document).on("click", ".delete-operation", function (e) {
e.preventDefault();
var oTable = $('#alloperations').dataTable();
var operationId = $(this).data('id');
// Get the parent table row and mark it as having been selected
// due to the fact rowindex does not work in order in datatables
var tableRow = $(e.toElement).parents('tr').addClass('row_selected');
bootbox.confirm("Are you sure?", function (answer) {
if (answer) {
// send request to delete operation with given id.
$.ajax({
type: 'delete',
url: "/operations/" + operationId,
success: function () {
var anSelected = fnGetSelected(oTable);
//Get all the row cells and animate a deletion
tableRow.children().animate({ backgroundColor: "red", color: "black" }, 300, function() {
tableRow.fadeOut(2000, function() {
oTable.fnDeleteRow(anSelected[0]);
});
});
},
error: function(result) {
$("#messageContainer").html(result.responseJSON.ResponseView);
}
});
return true;
}
else {
// User clicked cancel
return true;
}
});
});
QUESTION: This works perfectly in Chrome but does not work at all in Firefox, does anyone know how I would get it to work in Firefox as well?

You should use the cross browser property 'target' of event object:
var tableRow = $(e.target).parents('tr').addClass('row_selected');

JQuery confirmation dialog after pressing the submit button but before POSTing with .ajax()

I have a very simple scenario where I want to POST the form using JQuery's ajax() method but perform request some confirmation from the user before actually performing the post.
I have a JQuery UI dialog with localized buttons in place in case you wonder what all the code with buttons below is about.
This is my code so far:
var i18n_deleteButtons = {};
i18n_deleteButtons[i18n.dialogs_continue] = function () {
return true;
$(this).dialog('close');
};
i18n_deleteButtons[i18n.dialogs_cancel] = function () {
return false;
$(this).dialog('close');
};
$('#delete-dialog').dialog({
open: function () {
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
},
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: i18n_deleteButtons
});
$("form#form_attachments").submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this), url = $form.attr('action');
// build array of IDs to delete (from checked rows)
var jdata = { 'attachmentIdsToDelete': [] };
$('input:checked').each(function () {
jdata['attachmentIdsToDelete'].push($(this).val());
})
$.ajax({
beforeSend: function (request) {
// Return false if you don't want the form submit.
$('#delete-dialog').dialog('open');
},
url: url,
type: "POST",
dataType: "json",
data: jdata,
traditional: true,
success: function (msg) {
$('#msg').html(msg);
}
});
});
The dialog actually opens up fine but clicking at any of the buttons results in nothing happening. The post doesn't happen and the dialog does not close regardless of which button was clicked.
How can I make this work?

Why not move the actual ajax call from the submit handler and trigger it when pushing a button in the delete dialog?
You could store you ajax call in a separat function and pass this functions and the url as parameters to the confirmation routine.
[pseudo code]
function callAjax() {
...
}
function submitHandler() {
confirmDialog({callback:callAjax,param:you_url});
}
function confirmDialog(obj) {
$('#yes_btn').click(function() {
// call the callback
obj.callback(obj.param);
});
$('#no_btn').click(function() {
// just close the dialog
});
}
This way the confirmDialog don't have to know anything about the ajax call, it will just execute the callback with the given parameter when the user clicks ok.

Because the default jquery UI dialog is a bit cumbersome for regular use and trouble to configure in some custom scenarios I looked around and found this Easy Confirm plugin which is based upon jquery&jquery UI default stuff. It also allows for very simple internationalization.
https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin