Home » Blog » john's blog

Quick AJAX example

18 Mar 2008 john

There are many ways to make the ajax request. This probably isn't the best, but it's the one I am most comfortable using. This example requires that you have the json extension for php. It can be done without it, but json makes the data transfer from php to javascript much cleaner.

testAjax.tpl:

{zoop_file_js files="ajax/dojo/dojo.js"}
<form id="main_form" name="main_form" method="POST" action="{$VIRTUAL_URL}" enctype="multipart/form-data">
<script type="text/javascript">
{literal}
function submitForm(action)
{
    if(window.verifyFormFunction)
    {
        if (!verifyFormFunction(action))
            return false;
    }
 
    document.main_form.actionField.value = inAction;
    document.main_form.onSubmit();
    document.main_form.submit();
}
 
function checkUserName()
{
    dojo.io.bind({
        {/literal}
        url: "{$SCRIPT_URL}/checkUserName",
        {*url: "{$zoneUrl}/checkUserName",*}
        {literal}
        mimetype: 'text/json',
        method: 'post',
        formNode: document.main_form,
        handler: function(type, data, e){handleUsernameData(data);}
    });
}
 
var usernameOk = false;
function handleUsernameData(data)
{
    if(data.exists == true)
    {
        div = document.getElementById('usernameExists');
        div.style.display = '';
    }
    if(data.bad == true)
    {
        div = document.getElementById('usernameBad');
        div.style.display = '';
    }
    if(data.ok == true)
    {
        div = document.getElementById('usernameExists');
        div.style.display = 'none';
        div = document.getElementById('usernameBad');
        div.style.display = 'none';
        usernameOk = true;
    }
}
 
function verifyFormFunction(action)
{
    if(action == 'submit' && !usernameOk)
    {
        alert('Please enter a valid username.');
        return false;
    }
    return true;
}
{/literal}
</script>
 
<input type="text" name="username" onBlur="checkUserName();">
<div id="usernameExists" style="color: red; display:none">This username already in use.</div>
<div id="usernameBad" style="color: red; display:none">This username is too short, or contains invalid characters.</div><br/>
<input type="password" name="password"><br/>
<input type="password" name="password2"><br/>
<input type="submit" onclick="submitForm('submit'); return false;">
<input type="hidden" name="actionField" value="default">
</form>

zone_default.php:
function pageTestAjax($p)
{
    $this->guiDisplay('testAjax.tpl');
}
 
function postTestAjax($p)
{
    //save the user
}
 
function postCheckUserName($p)
{
    $username = getPostText('username');
    $answer = array();
    if(strlen($username) < 2)
        $answer['bad'] = true;
    else
        $answer['bad'] = false;
    if(sql_check("select id from user where username = '$username'"))
        $answer['exists'] = true;
    else
        $answer['exists'] = false;
    $answer['ok'] = !$answer['bad'] && !$answer['exists'];
    echo json_encode($answer);
}

Header Missing

I also send a header with my JSON data which will help Prototype decode the data automatically. I am not sure it this helps DOJO or not. Just thought I would add this if others needed to know

function postCheckUserName($p)
{
    $username = getPostText('username');
    $answer = array();
    if(strlen($username) < 2)
        $answer['bad'] = true;
    else
        $answer['bad'] = false;
    if(sql_check("select id from user where username = '$username'"))
        $answer['exists'] = true;
    else
        $answer['exists'] = false;
    $answer['ok'] = !$answer['bad'] && !answer['exists'];
    //Header to indicate JSON data
    header('Content-type: application/x-json');
    echo json_encode($answer);
}

jmorant@cloud9l... 23 Jul 2008

Bad

The example is not working correctly, fix it. It`s not a good idea to post something witch not working properly.

Look at this : $answer['ok'] = !$answer['bad'] && !answer['exists'];
what is this????????????

some81 31 Oct 2008

Typo

Thank you for pointing out that typo.

john 31 Oct 2008

Hi

Good info!!

dominicgaines 29 Jun 2008

My favorite tool we created

My favorite tool we created is tracksession.php. It uses the profile.log to see exactly what requests were made during a session from start to finish, and then we can diagnose any performance problems the user may see. It greps the profile.log file for a string that you give it, returning the rows that match. It's quite simple, but very helpful. It can be used Corporate Gifts to either track a session, or simply to see all the requests that are similar, or were made in the same minute.

goldleaf 20 Jul 2010

tracksessions

I've seen some different versions of tracksession.php tools out there, which track sessions, and ups some of your efficiency. Its not unlike many kinds of quick fixes, but any help with diagnosing performance problems is certainly a step in the right direction

JerryD 23 Jul 2010