CODEWITHSUNDEEP
jquery
AnonyMouse
AnonyMouse

Reputation: 18630

Jquery multiple person search on one page why won't results populate?

I have this page which has three peson searchs on them. Basically it's a textbox and button. When you click the button it takes the text in the associated textbox and should populate the associated results with list data.

    <div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

<div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

<div class="personcontainer">
        <div class="peoplesearchdiv" >

        <input type="text" class="searchpersontxtbox" />
        <input type="button" value="Find" class="findpersonbtn" />
        <div class="peopleresultsdiv"></div>
    </div>
    <input type="hidden" class="personguid" />

Ok, so the jquery to try to get this working is:

$(document).ready(function () {

    $('.findpersonbtn').click(function () {

    var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

    $.get('/People/GetPeople/', { 'query': query }, function (data) {         

        $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html(data);

    });

});

Returned from GetPeople is basic list data eg.

<ul>
  <li>Cat</li>
  <li>Dog</li>
</ul>

So what I was wanting to happen was the list data to populate the html to the peopleresultsdiv within the same personscontainer.

Doesn't work though.

To eliminate it being the GetPeople method I changed the jquery to:

$(document).ready(function () {

        $('.findpersonbtn').click(function () {

        var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

        $.get('/People/GetPeople/', { 'query': query }, function (data) {         

            $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html("<ul><li>Cat</li><li>Dog</li></ul>");

        });

    });

Still doesn't work.

So I tried:

$(document).ready(function () {
    $('.findpersonbtn').click(function () {

        var query = $(this).closest('.personcontainer').find('.searchpersontxtbox').val();

        $(this).closest('.peoplesearchdiv').find('.peopleresultsdiv').html("<ul><li>Cat</li><li>Dog</li></ul>");

        $.get('/People/GetPeople/', { 'query': query }, function (data) {


        });

    });

Hmmmmmm. Now the list is appearing. Obviously not what I want though because I'm not getting to populate from the method.

So it appears the closest find won't work inside the get?

Anyone know why how to fix?

Upvotes: 0

Views: 71

Answers (1)

Samba
Samba

Reputation: 605

Inside $.get having $(this) doesn't return peopleresultsdiv.

So, you can get the required div outside $.get and have it in a variable, and use that inside $.get

Upvotes: 2

Related Questions