hey folks,
i have created a login page, where i wanna implement jQuery if the user name and password is wrong, it should popup a alert msg box which fades away after prompting of wrong password. how can i do it?
If he does that, won’t the non-scripting environments be unable to see it? It’s a false assumption that JavaScript will always be available.
The standard way is to have the content normally shown on the page, and then to use scripting to hide it, on or before page load. Then you can attach the mechanisms to show it. Isn’t that right?
$(function(){
$("#myDiv").hide();
$("button").click(function(){
$("#myDiv").show("normal");
});
});
With no CSS styling to hide it, which prevents problems when JavaScript is not available.
You could create a separate update function where you pass it a reference to the last log entry on the page, and the new content for the log. The update could create a new (hidden) log below the current one, and then reveal it.[/quote]
[ot]
Give a man a fish and he eats for a day. Teach a man to fish he eats for the rest of his life.
I’m not religious, but that’s a part of the reason why I try to encourage you to do these these things for yourself.[/ot]
So, your page needs to remember that for when someone returns. Cookies are commonly used for that. There is a good set of cookie-management functions at http://www.quirksmode.org/js/cookies.html
so as log.php is opened. should i define another dialog functon in log.php, which will open the next dialog at bottom of log.php?
Off Topic:
ur answers are like riddles
p.s i don’t want my dialog to close when reloaded/refreshed. how can i do that?
Good point pmw
Below is the same code but with comments. Maybe this helps you understand what’s going on.
<html>
<head>
<title>Enter Information</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/*
* The following performs ajax request and shows the alert.
* I recommend it is placed in a seperate file and be referenced from here
*/
$(document).ready(function(){ //this function is used to make sure that dom is loaded before any action is taken
$("#ajax-form").submit(function(event){ //used to modify the behavior of the form when submitted
event.preventDefault(); // prevents default behavior of the submit button so that we can take matter into our own hands
$.ajax( { //submits ajax request (i.e. request without changing the web page)
type:"post", //we want the ajax request to be a "post"
url:"summary.php", //this is self-explanatory
data:$("#ajax-form").serialize(), //the data we want to send to the php file is found in the inputs of the form of id: ajax-form
success: function(data){showAlert(data);} //on success, call function showAlert and supply it with the data returned from the php file summary.php
});
});
});
function showAlert(data) //function we created to show the alert box (which in this case is the div with id:alert
{
$('#alert label').html(data); //fill the label inside the div of id:alert with the data returned from php
$('#alert').show().fadeTo(0,1).fadeTo(5000,0); //show the div of id:alert, then fade it out in 5 seconds (5000 milliseconds)
}
</script>
<style>
/*
* This is to style the div of id:alert which in this case is our alert
* it's simple css. You can modify it any way you like
* Of course i would recommend it to be in a seperate css file and references from here
*/
#alert {
width:400px;
height:90px;
position:absolute;
left:100px;
top:100px;
border:solid 10px black;
display:none;
text-align:center;
padding-top:80px;
background:#cccccc;
}
</style>
</head>
<body>
<!-- This is the div used to display the "alert" -->
<div id="alert"><label></label></div>
<form id="ajax-form" action="summary.php" method="post">
First Name:<input type="text" name="fname" />
<br/>
Last Name:<input type="text" name="lname" />
<br/>
<button type="submit">Go!</button>
</form>
</body>
</html>
totally, wicked!, but i am all lost as i am newbie to jQuery, all i understand is
$("p").dialog(){
});
kind of thing, can u explain me what’s going on
ok here is a little code i made
<html>
<head>
<title>Enter Information</title>
</head>
<body>
<form action="summary.php" method="post">
First Name:<input type="text" name="fname" />
<br/>
Last Name:<input type="text" name="lname" />
<br/>
<button type="submit">Go!</button>
</form>
</body>
</html>
and this page
<html>
<head>
<title>summary</title>
</head>
<body>
<?php
$_POST['fname'];
$_POST['lname'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
?>
<?php
if($fname == "Adam"){
echo "welcome ". $fname;
}
else{
echo "Hello There!";
}
?>
</body>
</html>
this is fairly a very easy script of passing variables for my example. now what i want is the echo statement to be showed in alert box or dialog box. which after prompting disappears (if applicable).
Off Topic:
I am new to php, so i am learning and applied what i have learned till now
Forgive my messy code 
<html>
<head>
<title>Enter Information</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ajax-form").submit(function(event){
event.preventDefault();
$.ajax( {
type:"post",
url:"summary.php",
data:$("#ajax-form").serialize(),
success: function(data){showAlert(data);}
});
});
});
function showAlert(data)
{
$('#alert label').html(data);
$('#alert').show().fadeTo(0,1).fadeTo(5000,0);
}
</script>
<style>
#alert {
width:400px;
height:90px;
position:absolute;
left:100px;
top:100px;
border:solid 10px black;
display:none;
text-align:center;
padding-top:80px;
background:#cccccc;
}
</style>
</head>
<body>
<div id="alert"><label></label></div>
<form id="ajax-form" action="summary.php" method="post">
First Name:<input type="text" name="fname" />
<br/>
Last Name:<input type="text" name="lname" />
<br/>
<button type="submit">Go!</button>
</form>
</body>
</html>
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
if($fname == "Adam")
echo "welcome ". $fname;
else
echo "Hello There!";
?>
Let me know if that’s what you want
Firebug would be my choice…
The first problem is the premature closing of the object before the open line. (as pmw57 has already noted).
The second problem is that you are initializing dialog() on the button. When actually it should be initialized on a div and called from a click event of the button.
Maybe the code below will make it more clear:
$(function(){
$("#dialog").dialog({
autoOpen:false,
modal:true,
height: 400,
width: 400,
title: 'Dynamically Loaded Page',
open: function ()
{$(this).load('log.php');}
});
$("#viewlog").click(function()
{$("#dialog").dialog("open");});
});
<button id="viewlog">Click here</button>
<div id="dialog"></div>
Ah! ok, but one problem remains, the button isn’t showing up, so i have to remove its autoOpen option, though that is what i need to be opened when clicked.:mad:
<script type="text/javascript">
$(function () {
$('#viewlog').dialog({
modal: true,
open: function ()
{
$(this).load('test.php');
},
height: 529,
width: 1200,
title: 'Dynamically Loaded Page'
});
});
</script>
<button id="viewlog">Click here</button>
The section that specifies the options for the dialog, finishes before the open option is specified. You need to close off the dialog options not before the open options, but after the open options instead.
Uncaught SyntaxError: Unexpected token (
but as i told i am new to JS, if u can point me my mistake, i can get along
No, it’s won’t, because DW5 is not a web browser.
Try it out on Google Chrome, or Mozilla Firefox, or Safari or Opera. Since you test on mainly all browsers, you should have at least one of those available.
if u can help me with that pls?
In most browsers then (not IE) you can use ctrl+shift+j to bring up the javascript console, which reports on many types of errors.
You can also find the javascript console (or error console) in the Tools menu.
With IE8 you can use developer tools instead.
well thats the problem. DW5 is not saying any syntax error.
i use mainly all browsers. coz i have check for compatibility personal i like firebug. so whatever firebug comes in handy i use that
Which web browser are you using? We’ll help you find its error console so that you can find out where the error is, though it’s likely to be with the premature closing of the object just before the open line.