CODEWITHSUNDEEP
javascriptphpjqueryajax
J. Grunder
J. Grunder

Reputation: 143

Finding an element with Javascript into an Ajax response

I have a form with some inputs, selects and other, and I wrote a "Search bar" that will send an Ajax request for result to find a contact to attach to the form :

index.php - Form

<p><label for="q">Rechercher un contact</label>
<input type="text" class="form-control" name="q" id="q" />
</p>
<div id="results">Veuillez saisir un élément de recherche</div>

index.php - Ajax

$(document).ready( function() {
    $('#q').keyup( function(){
        $field = $(this);
        $('#results').html('Veuillez saisir un élément de recherche');
        $('#ajax-loader').remove();
        if($field.val().length > 2 ) {
            $.ajax({
                type : 'GET',
                url : 'contact.search.php',
                data : 'q='+encodeURIComponent($(this).val()),
                beforeSend : function() {
                    $field.after('<img src="assets/img/ajax-loader.gif" alt="loader" id="ajax-loader" />');
                },
                success : function(data) {
                    $('#ajax-loader').remove();
                    $('#results').html(data);
                    console.log(data);
                }
            });
        }       
    });
});

The file contact.search.php is treating request and will echo a table with following elements : Table : <table id = contactResult> Result TR : <tr class = select>

contact.search.php

while ($ligne = sqlsrv_fetch_object($query)) {
    $body .= "
            <tr class='select'>
                <td class='item-nom'>".$ligne->nom."</td>
                <td class='item-prenom'>".$ligne->prenom."</td>
                <td class='item-tel'>".$ligne->tel."</td>
                <td class='item-division'>".$ligne->division."</td>
                <td class='item-direction'>".$ligne->direction."</td>
            </tr>";
}

Then user has to click one of the TR to select needed contact, and I need this selection to be show into other inputs that will be used to save form. But when I try to catch these data with this script :

Javascript

<script type="text/javascript">
    $("#contactResult tr").click(function(){ 
        var nom=$( "td.item-nom" );
        var prenom=$( "td.item-prenom" );
        var tel=$( "td.item-tel" );
        var division=$( "td.item-division" );
        var direction=$( "td.item-direction" );
        console.log(nom + " / " + prenom + " / " + tel + " / " + division + " / " + direction + " / ");
        });
</script>

console show me "[object Object] / [object Object] / [object Object] / [object Object] / [object Object] / "

I tried to follow this tips :

http://jsfiddle.net/65JPw/2/

But it's only working when data are on initial page, not when content is loaded by Ajax query.

Can someone help me to make it working ? I would like by clicking tr from the Ajax result display data of each of its td into console. Thanks for your help.

Upvotes: 0

Views: 125

Answers (1)

imvain2
imvain2

Reputation: 15847

unless you use THIS you are just referencing ALL of the specified classes.

 $(document).on("click","#contactResult tr",function(){ 
        var nom=$(this).find( "td.item-nom" ).html();
        var prenom=$(this).find( "td.item-prenom" ).html();
        var tel=$(this).find( "td.item-tel" ).html();
        v.ar division=$(this).find( "td.item-division" ).html();
        var direction=$(this).find( "td.item-direction" ).html();
        console.log(nom + " / " + prenom + " / " + tel + " / " + division + " / " + direction + " / ");
        });

Upvotes: 2

Related Questions