Home

With QuTags AJAX for PHP one PHP/HTML page can appear as multiple pages to the end user.


The below source code is used to demostrate the powerful features incorporated into QuTags, multiple HTML forms and multiple PHP script usage/support.

- QuTags auto-magically sends the correct HTML form to the server, based on the user's request.
- QuTags handles all the redirection during the asynchronous call to the server side script


With theses two features QuTags provides increased scalability and maintainability to your web applications, by allowing you to split up code and HTML forms.

QuTags is AJAX for PHP, at it's finest. And easiest.

<?
 /* C. Bess Creation - Quantum Quinn - QuTags.com */
        require_once("../QuTags/qutags.php");
        init_qutags(array('qucomm'=>"../QuTags/"),
        "qufunctions"=>array(
                # only these functions can be called by QuTags::qurpc (directly)
                "attemptLogin",
                "showReg",
                "regUser",
                "logoutUser",
                "getMsgs",
                "sendMsgToUser",
                "getUserUpdates"
                ));

?>
<style>
.sendMsgPnl, .updatePnl, .recvMsgPnl, .sendUpdatesPnl {
        border: 1px outset black;
        background-color: silver;
}
#sendMsgPnl_caption, #updatePnl_caption, #recvMsgPnl_caption {
        background-color: #777;
        border: 1px groove blue;
        color: white;   
}
.sendMsgPnl {
        top: 370px;
}

.updatePnl {
        width: 300px;
}
.recvMsgPnl {
        width: auto;
}
.err {
        background-color: yellow;
        color: red;
}
.succ {
        background-color: white;
        color: green;
}
a:hover {
        color: orange;
}
.messagesTbl, TD {
        border: 1px groove white;
}
.updateMsg {
        font-size: 16px;
}
.updateDate {
        font-size: 12px;
}
</style>
<script>
        QuComm.onError = oops;

        function oops(msg, requestObj)
        {
                alert("custom error func:" +msg +" obj: "+requestObj);
        }
</script>
<body>
<? qustatus("Please Wait...");?>

<div id='loginDiv' align="center" style='display:inline;'>
        <form action='loginScript.php' method='post' onsubmit="return false;">
                <p>
                Username: <input type='text' name='username' maxlength='77' />
                <div class='err' id='userspan'></div>
                <br>
                Password: <input type='password' name='pass' />
                <div class='err' id='passspan'></div>
                <p />
                <input type='button' name='btLogin' href="javascript:void(0);" onclick="qurpc('btLogin','attemptLogin')" qudisabled value='Login...'>
                <p />
                <a style="font-size:14px" href='javascript:void(0);' name='lnkReg' onclick="qurpc('lnkReg','showReg')">Register</a>
        </form>
        <p />
                <a href="/">Home</a>
</div>

<div id='registerDiv' align="center" style='display:none;'>
        <form action='registerScript.php'>
                <div class='err' id='regErr'></div>
                Email: <input type='text' name='email' maxlength='253' />
                <br />
                First Name: <input type='text' name='fn' maxlength='76' />
                <br/>
                Last Name: <input type='text' name='ln' maxlength='76' />
                <p/>
                Username: <input type='text' name='un' maxlength='76' />
                <br/>
                Password: <input type='password' name='pass' />
                again: <input type='password' name='pass2' />
                <p/>
                <input type='button' value='Register' onclick="qurpc('regBt','regUser')" name='regBt' />
        </form>
</div>

<div id='regUserEnvDiv' style='display:none;'>
<form action='regUserScript.php'>
       
        <div style='background-color:silver;text-align:center;z-index:1000'>
                <input type='button' value='Logout' name="btLogout" onclick='qurpc("btLogout", "logoutUser")' />
        </div>
       
                <? # used to show the received messages (from other users)
        qufloatingdiv_start("recvMsgPnl", array(quclass=>"recvMsgPnl", 'caption'=>"Received Messages", 'position'=>"relative"));?>

        <div id='messages' >
        You have no new messages.
        </div>
        <br />
        <input type='button' value='Check Messages' onclick='qurpc("btCheckMsg","getMsgs")' name='btCheckMsg' qudisabled />

        <?qufloatingdiv_end();?>
       
        <? # used to allow users to send messages to other users
        qufloatingdiv_start("sendMsgPnl",array(quclass=>"sendMsgPnl", 'caption'=>"Send Message"));?>
       
        <div class='err' id='sendErr'></div>
        <div class='succ' id='sendSucc'></div>
        To User: <input type='text' name='toUser' maxlength='77' />
        <br />
        <textarea rows='4' cols='37' name='msgTxt'></textarea>
        <br />
        <input type='button' value='Send Message' name='btSendMsg' onclick="qurpc('btSendMsg','sendMsgToUser')" qudisabled />
       
        <?qufloatingdiv_end();?>
       
        <? # used to show any updates to the user
        qufloatingdiv_start("updatePnl", array(quclass=>"updatePnl", 'caption'=>"QQ News/Updates", 'position'=>"relative"));?>
       
        <div id='updates'>
        No updates available.
        </div>
        <br />
        <input type='button' value='Get latest News / Updates' name='btUpdates' onclick='qurpc("btUpdates","getUserUpdates")' qudisabled />
       
        <?qufloatingdiv_end();?>
       
        <div id='sendUserUpdatesPnl' style='display:none'>
        <? # used to allow users to send messages to other users
        qufloatingdiv_start("sendUpdatesPnl",array(quclass=>"sendUpdatesPnl", 'caption'=>"Send Updates", "position"=>"relative"));?>
       
        <div class='err' id='sendUpdateErr'></div>
        <div class='succ' id='sendUpdateSucc'></div>
        To User: <input type='text' name='toUpdateUser' />
        <br />
        <textarea rows='4' cols='77' name='updateTxt'></textarea>
        <br />
        <span id='updateSpanBt'></span>
        <?qufloatingdiv_end();?>
        </div>
       
</form>
</div>

</body>