jQuery form validations

It does not affect the other validations. Anyway, I’m going to forget that. It is only a login form. It is not that important.
This method will not display the Error or Info Message. Note the second line. Anyway it is working fine and should not mess with a wining team. :slight_smile:

The code I posted is only intended to replace the section of JS code that does the redirect, you obviously still need to add the message to the page as well. The problem with using JS for your redirect is that it will break if the user has JS disabled.

Also, the way your code is written, it throws an error the pages where you’re not doing a redirect. Try visiting your login.php page with the browser console open and you can see the error for yourself.

It gives an error but works. It is the easiest way I found to display an error or info message without have to go to the server and display a page. I tried jQuery alerts but did not work. That was my first choice. I will not change anything else, unless I can make jQuery alert to work

Well I find a good jQuery Alert / Information boxes. But could not understand how it works and how I would replace those two lines. would it be possible for you to help me out with it?

The link for the AlertbBox is http://plugins.jquery.com/?s=jquery+alert+box.

I would much appreciate

Thank You

OK, so how do you want this to work? If there is an error, you want to display the alertbox with your message, and when the user clicks ‘OK’ then the page will redirect to another URL, is that correct? And how do you want to trigger the alert?

When there is an error, or an operation success, display the message for, lets say 3000 ms, and redirect the user to another page, without the user intervention. Needs to be possible to change layout (with CSS?).

When there is an error, or an operation was concluded with success and the user needs to be modified, a message is displayed for a certain amount of time, and the user gets redirected to another page. The message is on a language file.

So, one way to do this using the plugin you suggested (Zebra_Dialog) would be like this:

  1. Include the following files in your page

<script type="text/javascript" src="path/to/zebra_dialog.js"></script>
<link rel="stylesheet" href="path/to/zebra_dialog.css" type="text/css">

  1. Use an IF statement in your PHP to include the following JS on the page (just before the </body> tag) when needed:

<?php if ($checkToDisplayAlert): ?>
<script>
new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', {
    'buttons':  false,
    'modal': false,
    'type': 'error', // You could set this via PHP too
    'auto_close': 3000,
    'onClose':  function() {
        window.location.href = '<?php echo $redirectUrl ?>';
    }
});
</script>
<?php endif; ?>

I’ve not had chance to test this on my machine, but it’s all taken from the plugin documentation, so should work as expected.

I tried it from the documentation and couldn’t make it to work. I will give it a try. It can’t be inserted before the body tag. It needs to be called where the error occurred or where the info needs to be passed to the user. A single page can have from one to ‘n’ depending of what is going on on the page. Accessing the database for example, yeou can have an error connecting to the server/database, an error on the query, another retrieving the rows, and so on

As I said. Tested it (without the if … endif loop) and does not work. Here is the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
    <script type="text/javascript" src="js/zebra_dialog.js"></script>
    <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">  
</head>
  <body>
<script> 
new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', { 
    'buttons':  false, 
    'modal': false, 
    'type': 'error', // You could set this via PHP too 
    'auto_close': 3000, 
    'onClose':  function() { 
        window.location.href = '<?php echo $redirectUrl ?>'; 
    } 
}); 
</script> 
  </body>
</html>

You need to include jQuery, as the plugin won’t work without it.

I included everything as you email. I’m sorry but I don’t know nothing about jQuery
The new code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/zebra_dialog.js"></script>
    <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">  </head>
  <body>
<script> 
new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', { 
    'buttons':  false, 
    'modal': false, 
    'type': 'error', // You could set this via PHP too 
    'auto_close': 3000, 
    'onClose':  function() { 
        window.location.href = '<?php echo $redirectUrl ?>'; 
    } 
}); 
</script> 
  </body>
</html>

is this correct now?

Here’s the code for the whole page, based on what you posted. This works fine for me on my machine:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="js/zebra_dialog.js"></script>
  <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">
</head>
  <body>
    <script>
    new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', {
        'buttons':  false,
        'modal': false,
        'type': 'error', // You could set this via PHP too
        'auto_close': 3000,
        'onClose':  function() {
            window.location.href = '<?php echo $redirectUrl ?>';
        }
    });
    </script>
  </body>
</html>

This is what I need. Now, do you see any way of reduce this to a two line code (leave most of the code in the header, and just include two lines where the message is to be included: One for the message itself and another one for the redirection). Also how would all the parameters be changed externaly (by PHP?). I would have one script for the error and another one for the info messages.

You could do something like this:

notification.js

function showNotification(message, type, url){
    return new $.Zebra_Dialog(message, {
        'buttons':  false,
        'modal': false,
        'type': type,
        'auto_close': 3000,
        'onClose':  function() {
            window.location.href = url;
        }
    });
};

then just include the file on your page:

<script type="text/javascript" src="js/notification.js"></script>

and to call it (for both errors and info messages) would be like this:


// For errors
echo "<script>showNotification($errorMsg, 'error', $url);</script>";
// For info
echo "<script>showNotification($infoMsg, 'information', $url);</script>";

Man… You are a Genius. Exactly what I was looking for. It is perfect!!!

Sorry for getting back to the post. Just one question> The box appears out of nowhere, and disappears going up. Do you have any idea how to make it fade in, fadeout?

I changed a lot on the CSS, just to keep the essential for me, and did not see anything to change this.

Sorry to bother you again, but you are my jQuery/javaSript Guru

:slight_smile:

To have the message fade in is easy enough:

return new $.Zebra_Dialog(message, {
    'buttons':  false,
    'modal': false,
    'type': type,
    'auto_close': 3000,
    'animation_speed_show': 500,  // Add this line here
    'onClose':  function() {
        window.location.href = url;
    }
});

Unfortunately, making the box fade out at the end instead of sliding up isn’t that easy, and you’d have to modify the plugin itself

That it is great. I would modify the plugin myself if I knew anything about java Script and the plugin were in a readable form.

But Thank You anyway.