better alternative to jquery .change?
<p>i'm having a little trouble using the right way of "firing" a piece of script.</p>

<p>I have created a login script which validates the user without having to reload the whole page.
I've done this with a piece of JavaScript asissted by jQuery.
The login part is working, but one other thing isn't.</p>

<p>I want my menu bar to update when a user succesfully logged in, this is done by reloading the file menu.php, which checks the "userlevel" each time it loads and displays all links the user has the right to see.</p>

<p>The visible part of the login script is contained in a DIV tag, when a user logs in succesfully, the contents of this DIV get changed to a "welcome user" text and a logout link.</p>

<p>my menu is also contained in a DIV tag.</p>

<p>I've set my "update menu" script to use the jQuery .change function,  but this does not work, because it seems that .change looks at forms instead of my DIV content.</p>

<p>Is there a better way of doing this ? (probably, but i'm just a beginner when it comes to this)</p>

<p><em>perhaps the code will explain better:</em></p>

<p><strong>My JS File (main.js)</strong></p>

<pre><code>$(document).ready(function(){

$("form#loginform").submit(function()
    {

        var FormUserName;
        FormUserName = $("input#loginform_username").val();

        var FormPassword;
        FormPassword = hex_md5(document.getElementById('loginform_password').value);
        document.getElementById('loginform_password').value = "";

        var LoginOK;
        LoginOK = new XMLHttpRequest();
        LoginOK.open("POST","login.php?req=validate",true);
        LoginOK.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        LoginOK.send("username=" + FormUserName + "&amp;password=" + FormPassword);

        LoginOK.onreadystatechange = function()
        {
            if (LoginOK.responseText == "ok")
                {
                    var response;
                    response = new XMLHttpRequest();
                    response.open("GET","login.php?req=loginOK",true);
                    response.send();
                    response.onreadystatechange = function()
                    {
                        if (response.readyState == 4 &amp;&amp; response.status == 200)
                        {
                            document.getElementById("login").innerHTML = response.responseText;
                        }
                    }
                }
            if (LoginOK.responseText == "failed") 
                {
                    document.getElementById("loginresponse").innerHTML = "&lt;font color=\"red\"&gt;Login Failed, try again&lt;/font&gt;";
                }
        }
        return false;
    });

$("div#login").change(function()
    {
        $('#menu').fadeOut('slow').load('menu.php').fadeIn("slow");
    });
});
</code></pre>

<p><strong>My PHP login script: (login.php)</strong></p>

<pre><code>&lt;?php
include_once ("dbsetup.php");

if (!isset($_SESSION['status']))
    {
        session_start();
        $_SESSION['status'] = "started";
    }

function validate($user, $pass)
    {
        $result = mysql_query("SELECT username, password, userlevel FROM users WHERE username = '$user'");
        if (mysql_num_rows($result) &gt; 0)
            {
                    $row = mysql_fetch_array($result);
                    $correctuser = $row['username'];
                    $correctpass = $row['password'];
                    $userlevel = $row['userlevel'];

                if ($user == $correctuser &amp;&amp; $pass == $correctpass)
                    {
                        $_SESSION['username'] = $user;
                        $_SESSION['userlevel'] = $userlevel;
                        echo "ok";
                        exit;
                    }
                else 
                    {
                        echo "failed";
                        exit;
                    }
            }
        else
            {
                echo "failed";
                exit;
            }
    }

if (isset($_GET['req'])) $req = $_GET['req'];
else $req = NULL;

switch ($req)
    {
        case validate:
            $user = strtolower($_POST['username']);
            $pass = $_POST['password'];
            validate($user, $pass);
            exit;
            break;

        case loginOK:
            echo "&lt;font id=\"welcomeuser\"&gt;Welkom " . $_SESSION['username'] . "&lt;/font&gt; &lt;br /&gt; &lt;br /&gt;";
            echo "&lt;a id=\"logout\" href=\"login.php?req=logout\"&gt;Uitloggen&lt;/a&gt;";
            exit;
            break;

        case logout:
            session_destroy();
            header('Location: index.php');
            exit;
            break;

        default:
            if (!isset($_SESSION['username']))
                {
                    ?&gt;
                        &lt;form id="loginform"&gt;
                            &lt;table border="0"&gt;
                                &lt;tr&gt; &lt;td&gt;Gebruiker: &lt;/td&gt; &lt;td&gt; &lt;input id="loginform_username" name="username" type="text" placeholder="Gebruikersnaam ..." /&gt; &lt;/td&gt; &lt;/tr&gt;
                                &lt;tr&gt; &lt;td&gt;Wachtwoord: &lt;/td&gt; &lt;td&gt; &lt;input id="loginform_password" name="password" type="password" placeholder="Wachtwoord ..." /&gt; &lt;/td&gt; &lt;/tr&gt;
                                &lt;tr&gt; &lt;td&gt; &lt;input id="loginform_submit" type="submit" value="Inloggen" /&gt; &lt;/td&gt; &lt;td id="loginresponse"&gt; &lt;/td&gt; &lt;/tr&gt;
                            &lt;/table&gt;
                        &lt;/form&gt;
                    &lt;?php
                }
            else
                {
                    echo "&lt;font id=\"welcomeuser\"&gt;Welkom " . $_SESSION['username'] . "&lt;/font&gt; &lt;br /&gt; &lt;br /&gt;";
                    echo "&lt;a id=\"logout\" href=\"login.php?req=logout\"&gt;Uitloggen&lt;/a&gt;";
                    exit;
                    break;
                }

    }
</code></pre>

<p>?></p>

<p><strong>the PHP home-page (index.php)</strong></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
</code></pre>

<p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</p>

<pre><code>&lt;head&gt;
    &lt;title&gt; Test &lt;/title&gt;
    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jshash/md5-min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;div id="login"&gt;
        &lt;?php include("login.php"); ?&gt;
        &lt;br /&gt;
    &lt;/div&gt;

    &lt;div id="menu"&gt;
        &lt;?php include ("menu.php"); ?&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p><strong>And last but not least, the PHP menu (menu.php)</strong></p>

<pre><code>&lt;?php

include_once("dbsetup.php");

if (isset($_SESSION['userlevel'])) $userlevel = $_SESSION['userlevel']; // Get userlevel from _SESSION variable if it exists, when userlevel is not set in _SESSION variable assume guest (userlevel 0)
else $userlevel = 0;
echo $userlevel;

$result = mysql_query("SELECT item_name, item_link, userlevel FROM menuitems WHERE userlevel &lt;= $userlevel ORDER BY userlevel, item_order"); // Get menu items for the current userlevel or lower

while ($row = mysql_fetch_array($result)) // Now we loop through the results from our query and display the menu items the user has the right to see
    {
        echo "&amp;nbsp;||&amp;nbsp;&lt;a class=\"lvl" . $row['userlevel'] . "\" href=\"" . $row['item_link'] . "\"&gt;" . $row['item_name'] . "&lt;/a&gt;";
    }
echo "&amp;nbsp;||"; // display the last item divider as closure
</code></pre>

<p>?></p>
