We Keep Coding

Bootstrap Modal instead of jQuery Dialog

i have a custom php script that uses jQuery Dialog for confirmation diaglog boxes.
The js that initates the dialog looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#dialogDelete').dialog('open');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#dialogDelete").length > 0) {
$("#dialogDelete").dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}
});
})(jQuery);
I have done serval modifications for replacing it with Bootstrap modal, so at this moment it looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#myModal').modal('show');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#myModal").length > 0) {
$("#myModal").modal({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).modal('hide');
},
'Cancel': function() {
$(this).modal('hide');
}
}
});
}
});
})(jQuery);
It seems that it has helped, and the dialog is now a modal as desired, though my buttons is not working.. i have made sure that the buttons have the role of button, but the js is not using my buttons as in the Dialog box.. im pretty sure that the error is somewhere around the last time the #myModal id is used..
Thank you.

Using Bootstrap modals gives you a lot of flexibility in modal design and function. The "downside" to this is that you have to do a little more work yourself. If you look at the Bootstrap modal documentation you will see that, while you are calling the modal correctly, it takes a completely different set of options than the jQuery dialog. First and foremost, you cannot pass buttons and button-actions as options to the modal. What you can do instead is create the structure you need in HTML with the buttons in place, then add javascript to control their actions. This bootply should work as a basic framework for what you want.

jQuery UI Dialog: Close when Click Outside

I have a jQuery UI Dialog. I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function(e) {
e.preventDefault();
$.ajax({
url: $('form.addEdit').attr('action'),
type: $('form.addEdit').attr('method'),
data: $('form.addEdit').serialize(),
open: function(){
$('.ui-widget-overlay').bind('click', function(){
$('div.deleteImageDialog').dialog('close');
})
},
success: function(html) { }
});
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});

Then you have to bind an event to the overlay.
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
// your code...
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('.overlay_sector').bind( 'click', function() {
$("div.deleteImageDialog").dialog('close');
$('.overlay_sector').unbind();
} )
});

I had a similar problem. Went with a simpler code solution based on this thread's answer:
Use jQuery to hide a DIV when the user clicks outside of it
$(document).mouseup(function (e)
{
var myDialog = $("#dialog-confirm");
var container = $(".ui-dialog");
if (myDialog.dialog( "isOpen" )===true)
{
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
myDialog.dialog( "close" );
}
}
});

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.

You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle

<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Javascript Confirm change into jquery modal dialog

I have here a delete record via ajax. I add confirm message if I want to delete the record or not. What I need is change the confirm message into modal dialog http://jqueryui.com/dialog/#modal-confirmation.
I want to change this javascript code
if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))
into this jquery modal dialog. Any help?
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
Ajax delete
<script>
$(function () {
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

You will override confirm method of javascript in your html code as follow
<script>
function confirm(message) {
var myTitle =
"<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
$('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
modal: true,
width: 300,
height: 'auto',
bgiframe: false,
//position: ['top', 5],
draggable: true,
closeOnEscape: true,
minHeight:20,
buttons: [{
text: "Cancel",
"style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
click:function(){
$(this).dialog('close');
return false;
}
},{
text: "Ok",
"style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
click:function(){
$(this).dialog('close');
}
}
],
close:function(){ $(this).dialog('destroy').remove(); }
}).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
//$("#dlgTest1").dialog("open").dialog("moveToTop");
};
and then use it , But be careful don't use html submit button on it, Use html normal button

//try this code
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

//replace your script with this code and try
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
$("#dialog-confirm").dialog();
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

how can i close the Model popup window jquery

i have a button on my view page whenever its get clicked,a pop up modal appears ... now i want to close that modal ...
here is my code
function openSirenModal() {
var timeout;
var progress;
var status;
$.modal({
contentAlign: 'center',
width: 240,
title: 'Loading',
content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
buttons: {},
scrolling: false,
actions: {
'Cancel': {
color: 'red',
click: function (win) {
win.closeModal();
}
}
},
onOpen: function () {
// Progress bar
var progress = $('#modal-progress').progress(100, {
size: 200,
style: 'large',
barClasses: ['anthracite-gradient', 'glossy'],
stripes: true,
darkStripes: false,
showValue: false
}),
// Loading state
loaded = 0,
// Window
win = $(this),
// Status text
status = $('#modal-status'),
// Function to simulate loading
simulateLoading = function () {
};
// Start
//timeout = setTimeout(simulateLoading, 2500);
},
onClose: function () {
// Stop simulated loading if needed
clearTimeout(timeout);
}
});
var siren = "siren";
$.ajax({
type: "POST",
data: {
value: siren
},
url: "http://localhost/siren/siren/",
success: function (data) {
alert(data);
if (data == 1) {
var auto_refresh = setInterval(
function () {
$.get('siren/sirenjson', function (datas) {
if (datas == 1) {
$('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
$('#modal-status').text('success!');
setTimeout(function () {
clearInterval(auto_refresh);
win.closeModal();//here i want to close the popup modal
}, 1500);
}
});
}, 1000);
} else {
}
//clearTimeout(timeout);
},
error: function () {
alert("error");
progress.hideProgressStripes().changeProgressBarColor('red-gradient');
setTimeout(function () {
win.closeModal();
}, 1500);
status.text('error!');
}
});
};
i have written code win.closeModal();but it isn't working because i cant access the win variable in setInterval..i dont know how can i access it

<div id="modal">Modal text <br /><button type='button' class='close'>CLOSE</button></div>
$('.close').on('click', function(){
$.modal.close();
$('#modal, #open_modal').toggle();
});
Try This if you can skip the closeModal();
JSFIDDLE TRIAL