I have a PHP-based form that will insert data into a database.
What I want to happen is when I click the submit button, a popup box would appear with a yes and no. If yes is chosen, then it will redirect to the page that will insert the form data into the database.
How can this be done? Thanks.
You can make it with js and jQuery. I don't know your context, but it might be like this:
$('<div></div>').appendTo('body')
.html('<div><h6>Do you really want to do this?</h6></div>')
.dialog({
modal: true,
title: 'Title',
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
alert("No");
$('#msg').show();
}
Related
I have a modal Window which pops up and wait for 5 seconds and then closes.
The code is as follows
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
}
});
alert("Some Text");
}
callMe() function is called on load of the HTML file. Here I want to show the alert message "Some Text" after the modal window closes in 5 second. But every time when I run this it shows both the modal window and alert box together. I want the modal window to display first , wait for 5 sec and then show the alert box.I tried using sleep but its still coming the same way.
You have 2 options
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
},
close: function(){
alert("Some Text");
}
});
$('#dialog').on('dialogclose', function(event) {
alert('Some Text');
});
}
USE "close" method
use on dialogueClose event both examples are given in code above
It would be nicer if you can tell us what plugin you use for the dialog. I'm guessing the dialog has a close option that accepts a function. So try this:
...
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
close: function() {
alert("Some Text");
},
...
You can put the alert inside the setTimeout, just after you close the window.
JAVASCRIPT
open: function (event, ui)
{
setTimeout(function () {
$("#dialog").dialog("close");
alert("Some Text");
}, 5000);
},
I have a HTML page which has a model as follows:
#model ViewModel.Ekranlar.ModelVM
I call a Confirm Dialog written with JavaScript in the html page as in the following:
<script type="text/javascript">
$(document).ready(function () {
$(".confirmDialog").on("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
}, "Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
}); </script>
And the controller is as in the following:
public ActionResult DUDBaskaniBuro2GidenIptal(ModelVM model)
How can I pass ModelVM model to the Action in the controller?
Thanks for your helps.
Though not sure if you are using jquery modal or your custom one, but:
1) If you want to do full page postback, you may make the 'OK' button a 'submit' button type so that on click it will postback to the url mentioned in the form tag.
<input type="submit" value="OK" .../>
2) If you want to do partial postback, you may use something like:
"OK": function () {
$.post('#Url.Action("ActionMethod","ControllerName")',
<captured values via jquery/javascript as json>, //E.g. {"Id":1,"Name":"My Name"}
function(data){
//Code you want to do here
$(this).dialog("close"); //Just an example
window.location = data.url; //Just an example
});
}
Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.
I use the following code to use default javascript confirm by jquery ui dialogue.
jQuery.extend({
confirm: function(message, title, okAction) {
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
}
});
jQuery.confirm(
"LogOut",
"Do you want to log out",
function() {
});
Now I need to use this same code in a log out action. So that I can replace the javascript confirm in the code.
<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>
The problem I am facing now is, when I replace the confirm with another function and wait for its return value to make the decision, the dialogue box doesn't return the value to a variable. These two functions are executed simultaniously(its showing the alert, but it also get directed to the href target). Is there any way that the method can return a true or false value and hence proceed to the href target.
reference: jQuery Extend,jQuery UI Replacement for alert
related question : js override confirm
I don't know if you could actually do that as the jQuery.dialog function is asynchronous.
You could use a promise library to setup the button click events. But then you cannot simply specify a method in the onclick attribute and have to do it through code
var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise
jsFiddle
jQuery.extend({
confirm: function(message, title, okAction) {
var d = jQuery.Deferred();
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
d.resolve(true);
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
d.resolve(false);
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
return d.promise();
}
});
For more info about jQuery promise library see jQuery reference
Edit: Another way to to set it up: jsFiddle
The problem is that default confirm dialog is synchronus and block the whole browser UI. JQuery dialog is asynchronous and does not block UI (because it needs it to render).
So the answer to your problem is following. You need to change:
buttons: {
"Ok": function() {
window.location = "/future/myhome/head?$event=logout"
},
and
<a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>
Personally, I use confirm more for conditional execution of a function or posting a form...
So, using your example, I'd have made the following small changes:
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
okAction();
},
And then called the Confirm as follows:
onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>
here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery