Question

im new using jquery with django. Im trying to inform the user if the email introduced is available or not, using ajax and jquery.

This is the section of interest from the original template before any javascript:

<form action="/registro/usr/solicitud/" method="post" name="solicitud"> 
    <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='08f46536def8682c7fef57e3e86dfd38' /></div> 
    <table id="tabla_solUsr"> 
        <tr><th><label for="id_username">Nombre de usuario:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /><br /><span class="helptext">Requerido. 30 caracteres o menos. Letras, dígitos y @/./+/-/_ solamente.</span></td></tr> 
        <tr><th><label for="id_password1">Contraseña:</label></th><td><input type="password" name="password1" id="id_password1" /></td></tr> 
        <tr><th><label for="id_password2">Contraseña (confirmación):</label></th><td><input type="password" name="password2" id="id_password2" /><br /><span class="helptext">Introduzca la misma contraseña que arriba, para verificación.</span></td></tr> 
        <tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr> 
        <tr><th><label for="id_nombre">Nombre:</label></th><td><input id="id_nombre" type="text" name="nombre" maxlength="50" /></td></tr> 
        <tr><th><label for="id_apellido">Apellido:</label></th><td><input id="id_apellido" type="text" name="apellido" maxlength="50" /></td></tr> 
        <tr><th><label for="id_ci">Cédula de identidad:</label></th><td><input id="id_ci" type="text" name="ci" maxlength="8" /></td></tr> 
        <tr><th><label for="id_carnet">Carnet:</label></th><td><input id="id_carnet" type="text" name="carnet" maxlength="7" /></td></tr> 
        <tr><th><label for="id_oficina">Oficina:</label></th><td><input id="id_oficina" type="text" name="oficina" maxlength="8" /></td></tr> 
        <tr><th><label for="id_telefono">Telefono:</label></th><td><input id="id_telefono" type="text" name="telefono" maxlength="12" /></td></tr> 
        <tr><th><label for="id_dpto">Departamento:</label></th><td>
            <select name="dpto" id="id_dpto"> 
                <option value="" selected="selected">---------</option> 
                <option value="2">(CO) Cómputo Científico</option> 
                <option value="3">(CI) Computación y Tecnología de la Información</option> 
                <option value="4">(MA) Matemáticas</option> 
                <option value="6">(MC) Mecánica</option> 
                <option value="7">(FS) Física</option> 
            </select>
        </td></tr> 
    </table> 
    <button type="button" style="margin-left:190;margin-right:auto;width:137px;height:21px" id="newDtpo" class="flip">Nuevo Departamento</button> 
    <input type="submit" value="Registrase" /> 
</form>

This is my attempt to do what i mentioned:

$(document).ready(function(){
    $("#tabla_solUsr tr:first").append('<span id="usrSt" class="usrSt"></span>');
    $("tr:nth-child(4n)").append('<span id="emailSt" class="emailSt"></span>');

    $("#id_username").keyup(function(){
       // Grab what has been introduced and ask the server through ajax; then, show the result 
    });

    $("#id_email").keyup(function(){
       // Grab what has been introduced and ask the server through ajax; then, show the result
    });
});

The actual troublesome line is:

$("tr:nth-child(4n)").append('<span id="emailSt" class="emailSt"></span>');

Im trying to grab the fourth ‘tr’ tag in my document,

<tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr>

and i thought that would be the correct way. I cant give it an id, a name, or a class, because this is dynamically generated by django.

instead of grabbing what i expected, i get the fourth ‘tr’ tag, and the fourth ‘tr’ tag after that one:

<tr><th><label for="id_email">E-Mail:</label></th><td><input type="text" name="email" id="id_email" /><br /><span class="helptext">Introduzca un e-mail válido. La confirmación de su solicitud se enviará a este correo.</span></td></tr>

and

<tr><th><label for="id_carnet">Carnet:</label></th><td><input id="id_carnet" type="text" name="carnet" maxlength="7" /></td></tr>

Is there any way to grab just the tag i need? why is this happening? id like to know what’s happenning so i can understand the way selectors work…

I apologize for my english, and hope a you can help me! thanks in advance!

Answer 1

You could alternately do something like

$("label[for='id_email']").parent().parent().append(...

I think this would be more readable and more robust when someone changes your page later.