I want to trigger a dialog modal-message script inside a yes-no logic.
Currently it works in a onclick event. Example: http://jqueryui.com/dialog/#modal-message
I want this to execute automatically (without any click) if my logic is true.
Example:
if Logic is true Then Execute
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
Any idea?
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
if ( condition )
$( "#dialog-message").dialog('open');
});
</script>
That's how you can call it with a condition.
Why not
<script>
var myFunc = $(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
$(document).ready(function() {
// Edit after comments
$(document).on('some-selector', 'some-event', function() {
if (/* your logic is true */) {
myFunc();
}
}
});
</script>
Related
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);
}
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>
I'm trying to customize confirm message using plugins. I have php tables records that has delete button every row. How I can customize the confirm pop up just like in jquery plugins below?
<?php echo'
<tr class="record">
<td align="center"><img src="images/del.png"></td></tr>';
?>
<script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you want to continue ?"))
{
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
Jquery Plugins
<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>
</head>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Hope this helps:
<?php echo'
<tr class="record">
<td align="center"><img src="images/del.png"></td></tr>';
?>
<script>
$(function() {
$(".delbutton").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
}
});
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
}); // end Dialog
return false;
}); // end .delbtn
}); // end jquery load
</script>
If you need more help, just ask.
"Delete all items": function() {
// insert your ajax here
$( this ).dialog( "close" );
},
Reference: .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();
});
I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog
So I created to Function
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
}
});
jQuery('#divPopup').dialog('open');
}
and
function createConfirmDialog(url,params)
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
show: "blind",
hide: "explode",
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
jQuery.ajax({
type: "POST",
url: url,
data: params
});
},
Cancel: function() {
jQuery( this ).dialog( "close" );
}
}
});
jQuery('#divPopup').dialog('open');
}
Problem here is when I give call to this function, It opens previously opened Dialog.
I guess previous instance is not get removed.It doesnt dynamically create Dialog
Any solution??
Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy
jquery: How to completely remove a dialog on close
http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1
Simply use a flag to check dialog state (close/open)
var Open = false;
$('button').click(function () {
if (!Open) {
Open = true;
$(newDiv).dialog({
close: function (event, ui) {
Open = false;
}
});
} else {
alert("Close opened dialog first");
}
});