We Keep Coding

Stop javascript from executing on page load and execute from ASP.NET codebehind

First; I'm trying to do two things in my ASP.NET / JavaScript code.
1) open a jQuery dialog from ASP.NET codebehind. (Works only when the javascript also executes on startup)
2) stop the same javascript/jQuery dialog as mention in 1) from showing on every pageload.
So the code below works great, but executes on page load which I try to stop. In addition this format (without function name) won't let me call the function from codebehind if I understand this How can I prevent this jQuery function from being executed on every page load? correctly:
$(function() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
});
and this doesn't work (just shows the div on the page and not as a jQuery dialog):
$(function showConfirmDialog() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
});
The only difference is the lack of function naming in the first.
So, can anyone point me in the right direction as to how to just make a script that I can call from codebehind that won't execute on page load?

Add a function with a name like "showDialog" in your aspx page.
function showDialog(){
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
}
Then call it from your codebehind using the function name:
ScriptManager.RegisterStartupScript(this, typeof(Page), "", "showDialog", true);

Change your js function to this:
function ShowDialog() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
}
Then in your .cs file, put this in the Page_Load
if (IsCallback)
{
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:ShowDialog();", true);
}

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>

embed swf in jquery ui modal dialog

I'm embed a swf into jquery ui modal dialog, when i open the dialog swf played, and when i close dialog, and reopen dialog without refresh the page, the swf did not loaded from the first.
I want swf reopened from the first when i close and open the dialog
this is the code of dialoge:
$( "#quiz" ).dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350
});
$( "#quiz-link" ).click(function( event ) {
$( "#quiz" ).dialog( "open" );
event.preventDefault();
});
});

Try rebuilding the HTML of the dialog each time you open/close it. I think you're just showing & hiding it currently, so it never resets.
Try out something like this instead:
$( "#quiz-link" ).click(function( event ) {
// create a clone of your dialog
var quiz_clone = $( "#quiz" ).clone().appendTo(body);
quiz_clone.dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350
});
// destroy the clone when it's closed
quiz_clone.on('close', function() {
quiz_clone.dialog( "destroy" ).remove();
});
// show the clone
quiz_clone.dialog( "open" );
event.preventDefault();
});

$("#quiz").dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350,
close: function(){
$("#quiz").html(document.getElementById('quiz').innerHTML) ;
}
});
// Link to open the dialog
$( "#quiz-link" ).click(function( event ) {
$( "#quiz" ).dialog( "open" );
event.preventDefault();
});