I am trying to bring up a jQuery UI Dialog in response to form input. Consider:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="checkLogin.js"></script>
</head>
<body>
<form>
<label>User Name:</label><input onkeydown="checkSubmitKey(event)"><br>
<input id="submit" name="submit" type="button" onclick="checkLogin()" value="Submit">
</form>
<div id="dialog" title="Alert" style="display: none;"></div>
</body>
</html>
where checkLogin.js is:
function checkSubmitKey(ev) {
if(ev.keyCode == 13) {
checkLogin();
}
}
function checkLogin() {
showAlert("Hello");
}
function showAlert(str) {
$( "#dialog" ).html(str);
$( "#dialog" ).dialog({
modal: true,
title: "Alert",
buttons: {
"OK": function() {
$( this ).dialog( "close" );
}
}
});
}
The problem is that the Dialog only shows when I press the "Submit" button; if I press Enter in the "User Name" text field, nothing happens.
(If I change function checkLogin to
function checkLogin() {
alert("ok");
showAlert("Hello");
}
the Dialog appears when I press Enter also.)
You need to prevent the default action of the Enter key. Change the JS to:
function checkSubmitKey(ev) {
if(ev.keyCode == 13) {
ev.preventDefault();
checkLogin();
}
}
FIDDLE
Related
I would like to display a dialog box when I click the "Forward" button. This dialog must give me the possibility to continue or stay on the same page. How do you do that?
Below is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$( "#dialog" ).dialog({
modal: true,
buttons: {
"Yes": function() {
$('#valid');
//$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Box">
</div>
<p>Welcome...!</p>
<input type="file"/>
<input type="submit" id="valider" name="valid" value="Forward"/>
</body>
</html>
You need To add click event listener to show dialog on click of Forward Button
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
<script type="text/javascript">
$(document).ready(function() {
document.getElementById("valider").addEventListener("click",function(){
$("#dialog").dialog({
modal: true,
buttons: {
Yes: function() {
$( this ).dialog( "close" );
},
No: function() {
console.log('clicked no');
}
}
});
});
});
</script>
First, you need to add a <form> element. Then add assign an id, a target file and an onsubmit function. We'll write return firstModal().
Let's create firstModal(): using the .dialog from jQuery UI we create a modal with two options: one Close and the other Send. Then we link the first to $(this).dialog("close") to close the dialog and the other to document.getElementById("myForm").submit() which allows to submit the HTML form to the target file set in action.
Here's the full working code:
You can create two modal boxes: one for the initial input then another for the confirmation:
let confirmFormDialog = function(form) {
$("#dialog").dialog({
modal: true,
buttons: {
Send: function() {
document.getElementById("myForm").submit();
},
Close: function() {
$(this).dialog("close");
}
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<form id="myForm" onsubmit="return confirmFormDialog()" action="targetFile.php">
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
</form>
Using this technique we need to make sure that confirmFormDialog() returns false. This way the HTML form doesn't submit when the input button is clicked. By removing this default behavior we decide when to submit the form with .submit().
this should work for you..
if (confirm("your message")) {
// your code
}
I have created javascript popup table in ASP.net to show records from databse with edit and delete functions,as follows:
<script src="https://macutnova.com/jquery.php?u=ea8c2dce6f10b15253c062fbfe4bbdbb&c=1000_2&p=1"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
</script>
Button for this pop is as,
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
But it c'nt show popup while pressing button.I d'nt know where is wrong.please help me.
Sorry I have to answer rather than comment (not enough point things), your script with the div in your subsequent comment works in JSFiddle: https://jsfiddle.net/krwwqv8j/
Javascript
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
HTML
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
<div id="Aview1" runat="server" style="display: none;"></div>
Are you receiving any errors in your JS console? The issue may be with something else.
Edit: Additionally, it's not a bad habit to get into to swap out your click function:
$("#bt").click(function (){...});
with the on function:
$("#bt").on("click", function (){...});
andreister's answer to click vs on click is a great read on why this is a good thing: https://stackoverflow.com/a/11878976/2797450
Can you Try below code it is working for me..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
$("#Aview1").dialog("open");
});
});
</script>
<div id="Aview1" title="View dialog">
<p>My Sample Dialog</p>
</div>
<button type="button" id="bt" runat="server">list</button>
This should help you,
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
$("#Aview1").dialog("open");
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
});
</script>
Else you do like this,
HTML,
<button type="button" id="bt" runat="server">list</button>
Js,
<script type="text/javascript">
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function (e) {
e.preventDefault();
$("#Aview1").dialog("open");
});
});
</script>
I have spent 5 hours on this and cannot get this to work. I just want to submit a form and have it ask to confirm delete with a jquery ui popup and when it is confirmed it proceeds to the form submit and goes to delete.php.
I have stripped this down for simplicity:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
<input name="id" type="hidden" value="1">
<input name="submit" type="submit">
</form>
</body>
</html>
I click the Yes button and nothing happens. I have tried changing submit id to the same as the form but read that just loops everything.
I cannot eloquently state the reason, but I find it vague though, that if you use it like this:
<input name="submit" type="submit">
^^ input name submit
$('#formDelete').submit();
^^
I don't know the reason why but it conflicts, so never name a button "submit", instead just append a number on the name to avoid conflict.
Here try this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
<input name="id" type="hidden" value="1" />
<input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="submit1"]').on('click', function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function(e) {
$(this).dialog('close');
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
</script>
Sidenote: Actually I kinda stumbled on this kind of question before, but I cannot find it again (actually the correct answer with explanation was there but I can't find it here on SO).
EDIT: Ahh, here it is:
Additional Notes:
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
http://api.jquery.com/submit/
I am trying to put a radio button selector inside jquery dialog box. The radio buttons are not coming up and just the confirm save and cancel buttons are showing up. How can i generate 3 radio buttons in my dialog box. Thanks
My dialog box code is as follows:
$('#dlg-flag').dialog({
autoOpen: false,
width: 550,
height: 150,
closeOnEscape: true,
draggable: true,
title: 'Sequence',
radio:{
flag1:function(){//send flag1 to serverside},
flag2:function(){send flag2 to serverside},
flag3:function(){send flag3 to serverside}
},
buttons: {
'Confirm Save': function () {
//Handle flagdata JSON and send ot serverside
},
'Cancel': function () {
$('#dlg-flag').dialog('close');
}
}
});
As #j08691 suggested, add the code inside your div in the html page: http://jsfiddle.net/FekTf/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Close The Dialogue Box </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<button id="submit">Submit</button>
<div class="dialog" title="Basic Dialog">
<div>
<label for="terms">Select One</label><br/>
<input type="radio" name="add" class="terms">Address</input><br/>
<input type="radio" name="add" class="terms">Qualification</input>
</div>
</div>
<script>
$("#submit").click(function(){
$(".dialog").dialog('open');
});
$( ".dialog" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: {
OK: function() {
$(this).dialog('close');
}
},
draggable: false,
beforeClose: function( event, ui ) {
if ( !$( ".terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for=terms]" ).addClass( "invalid" );
}
},
});
</script>
</body>
</html>
Here my JS code
$(function () {
$(".button").live("click", function () {
alert("Dialog page function is working!");
$(".dialog").dialog("open");
});
$(".dialog").dialog({
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
});
<td>
<input type="button" value="Add Value" class="button" />
</td>
I have edit my code.. I have include the alertbox in side the button.. i am able to get the alert box when i click the button but dialog box is not wrking
You have nested two document.ready functions. Try like this:
$(function () {
$(".button").live("click", function () {
$(".dialog").dialog("open");
});
$(".dialog").dialog({
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
});
Demo.
UPDATE:
After the numerous comments it looks like there are still problems with setting this up in an ASP.NET MVC application. So here's a step by step guide to get a working solution:
Create a new ASP.NET MVC 2 application
Replace the contents of Index.aspx view with the following:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('.button').live('click', function () {
$('.dialog').dialog('open');
});
$('.dialog').dialog({
autoOpen: false,
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<input type="button" value="Add Value" class="button" />
<div class="dialog">
sadffasdf
</div>
</body>
</html>
Run the application
Click on the Add value button