Este fue el tutorial que use para agregar ajax!
1.) Extracto de la raíz de todos los
2.) Abrir templates / signup.tpl
Inmediatamente después de:
{include file='header.tpl'}
Ponemos:
{literal}<script type="text/javascript" src="./include/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#usernameLoading').hide();
$('#username').blur(function(){
$('#usernameLoading').show();
$.post("check.php", {
username: $('#username').val()
}, function(response){
$('#usernameResult').fadeOut();
setTimeout("finishAjax2('usernameResult', '"+escape(response)+"')", 400);
});
});
});
function finishAjax2(id, response) {
$('#usernameLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax
$(document).ready(function() {
$('#emailLoading').hide();
$('#email').blur(function(){
$('#emailLoading').show();
$.post("check_email.php", {
email: $('#email').val()
}, function(response){
$('#emailResult').fadeOut();
setTimeout("finishAjax('emailResult', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#emailLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax
</script>{/literal}
{literal}
<script type="text/javascript" src="./include/js/jquery.pstrength-min.1.2.js"></script>
<script type="text/javascript">
$(function() {
$('.password').pstrength();
});
</script>
{/literal}
Que estamos buscando es la siguiente:
<tr>
<td class='form1' width='100'>{lang_print id=37}</td>
<td class='form2'>
<input name='signup_email' type='text' class='text' maxlength='70' size='40' value='{$signup_email}'>
<div class='form_desc'>{lang_print id=682}</div>
</td>
</tr>
Reemplace esto:
<tr>
<td class='form1' width='100'>{lang_print id=37}</td>
<td class='form2'>
<label for="email"></label>
<input name='signup_email' type='text' class='text' id='email' name='email' maxlength='70' size='40' value='{$signup_email}'>
<span id="emailLoading"><img src="./images/indicator.gif" alt="Checking E-mail Address" /></span>
<div id="emailResult"></div>
</td>
</tr>
Buscar:
<tr>
<td class='form1'>{lang_print id=29}:</td>
<td class='form2'>
<input name='signup_password' type='password' class='text' maxlength='50' size='40' value='{$signup_password}'>
<div class='form_desc'>{lang_print id=53}</div>
</td>
</tr>
Y Remplazamos:
<tr>
<td class='form1'>{lang_print id=29}:</td>
<td class='form2'>
<input name='signup_password' class="password" name="Password" type='password' class='text' maxlength='50' size='40' value='{$signup_password}'>
<div class='form_desc'>{lang_print id=53}</div>
</td>
</tr>
Buscar:
<tr>
<td class='form1'>{lang_print id=28}:</td>
<td class='form2'>
<input name='signup_username' type='text' class='text' maxlength='50' size='40' value='{$signup_username}'>
{capture assign=tip}{lang_print id=685}{/capture}
<img src='./images/icons/tip.gif' border='0' class='Tips1' title='{$tip|replace:"'":"'"}'>
<div class='form_desc'>{lang_print id=686}</div>
</td>
</tr>
Y Remplazamos:
<tr>
<td class='form1'>{lang_print id=28}:</td>
<td class='form2'>
<label for="username"></label><input name='signup_username' type='text' id="username" name="username" class='text' maxlength='50' size='40' value='{$signup_username}'>
{capture assign=tip}{lang_print id=685}{/capture}
<img src='./images/icons/tip.gif' border='0' class='Tips1' title='{$tip|replace:"'":"'"}'>
<span id="usernameLoading"><img src="./images/indicator.gif" alt="Checking Username" /></span>
<div id="usernameResult"></div>
<div class='form_desc'>{lang_print id=686}</div>
</td>
</tr>