The alert() works when the Send button is clicked but the dialog never shows. I have been going crazy trying to figure out why this is. What am I doing wrong? Please see code below:
Thanks, TD
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIALOG TEST</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body onload="loadMsg()">
<div id="dg"></div>
<div id="#dialog_login" title="Login Status">
<br />
<div id="dialog_text" style="text-align: center;"></div>
</div>
<script type="text/javascript" src="dg.js"></script>
</body>
</html>
form.html
<div class="panel panel-default">
<div class="panel-heading">TEST</div>
<div class="panel-body">
<form method="post" action="javascript:msg();">
<div class="form-group">
<input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
</div
</form>
</div>
</div>
</div>
dg.js
function msg(){
$("#dialog_login").text('Login Successful');
$("#dialog_login").dialog('open');
alert('Login Successful');
}
function loadMsg(){
$("#dg").load("form.html");
}
Hi I changed a little bit the code, I hope this works for you
function msg(){
$("#dialog_text").text('Login Successful');
$("#dialog_login").dialog({
show: { effect: "blind", duration: 800 }
})
};
And you have other error
<div class="form-group">
<input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
</div
close the div with ">"
<div class="form-group">
<input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
</div>
OK, after many hours of looking at this I found the problem; I had added '#' to the id:
<div id="#dialog_login" title="Login Status">
I corrected this:
<div id="dialog_login" title="Login Status">
Next I added this line to dg.js:
$('#dialog_login').dialog({autoOpen: false});
So dg.js looks like this now:
function msg(){
$('#dialog_login').dialog({autoOpen: false});
$("#dialog_login").text('Login Successful');
$("#dialog_login").dialog('open');
alert('Login Successful');
}
function loadMsg(){
$("#dg").load("form.html");
I want to thank everyone who tried to help!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.