Question

so i have a dynamically generated set of links:

<a class="link"href="linkto/1" id="1">link 1</a>
<a class="link"href="linkto/2" id="2">link 2</a>
<a class="link"href="linkto/3" id="3">link 3</a>

and then these links calls an action that returns a list of data and populates a div (which is also dynamically generated right under the link)

<a class="link" href="linkto/1" id="1">link 1</a>
<div class="container" id="1"></div>
<a class="link" href="linkto/2" id="2">link 2</a>
<div class="container" id="2"></div>
<a class="link" href="linkto/3" id="3">link 3</a>
<div class="container" id="3"></div>

this is my jquery

var url;
        var id;
        $('a.link').click(function () {
            url= $(this).attr('href');
            id = $(this).attr('id');
            $.ajax({
                url: url,
                dataType: 'JSON',
                success: function (data) {
                    var list = '';
                    var listcontainer = $('div.container').attr({ id: id.toString() });
                    $.each(data, function (i, client) {
                        list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                    });
                    $(listcontainer).addClass("box-list-small");
                    $(listcontainer).html(list);
                },
                error: function (data) {
                    console.log('Cant load client list.');
                }
            });
            return false;
        });

so what I’m trying to achieve is that there would be a link and when it gets clicked a box under it opens up to show the list. the problem is, everytime i click the link of one, it populates ever “container” in the page. Does that make sense?

Appreciate the time!

Thanks!!

EDIT: modified pseudo code.

<div class="row">
    <a class="link" href="linkto/1" id="1">link 1</a>
    <a class="someotherlink">someotherlink</a>
  </div>
 <div class="row">
    <div class="container" id="1"></div>
</div>
<div class="row">
    <a class="link" href="linkto/2" id="2">link 2</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="2"></div>
</div>
<div class="row">
    <a class="link" href="linkto/3" id="3">link 3</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="3"></div>
</div>

Answer 1

The line: var listcontainer = $('div.container').attr({ id: id.toString() });
queries the DOM for every div with class “container”, then sets all of their ids to the clicked link’s id.. and returns the collection of divs into listcontainer variable. Then you call .html(list) on it so it sets all the containers.

You probably want something more like this:

$('a.link').click(function () {
        var el = $(this),
            url= el.attr('href'),
            id = el.attr('id');
        $.ajax({
            url: url,
            dataType: 'JSON',
            success: function (data) {
                var list = '';
                $.each(data, function (i, client) {
                    list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                });
                el.next('.container').addClass("box-list-small").html(list);
            },
            error: function (data) {
                console.log('Cant load client list.');
            }
        });
        return false;
    });