在HTML中显示$ .post的结果

Question

I have a following HTML structure, which is a modal pop-up like following:

<!-- Left side of the pop up-->

     <div class="pop-state">
               <!-- state -->
               <?php foreach ($users as $user) { ?>
                   <div class="pop-first-btn">
                       <a class="check-user" value="<?=$user['id']?>"><?=$user['username']?></a>
                   </div>
               <?php  } ?>
           </div>

<!-- Right side of the modal popup-->
       <div class="pop-brands" >

           <?php for ($i = 0; $i < count($brandList); $i++) { ?>
               <div class="pop-city-co" id="brands">
                   <label>
                       <input class="check-city" type="checkbox" name="" value="<?=$brandList[$i]['id']?>" data-id="<?=$i ?>"><?=$brandList[$i]['name']?>
                   </label>
               </div>
           <?php  } ?>
       </div>

And when a user clicks on the a link I do the following jQuery event:

$('.check-user').click(function() {
    var user_id = $(this).attr('value');
    $.post("/user/usersBrands", {userId:user_id}, function(data){
        //console.log(data);
        var brands = $('<div />').append(data).find('#brands').html();
        $('#brands').html(brands);
        console.log(brands);
    });
});

I pick up the userId, send it to my function, and then I'd like to update the right side of my popup with the user list, in form of checkbox list... And this is my function that I'm calling:

 public function usersBrandsAction(){
        $userId = $this->getRequest()->getPost("userId");
        if(!empty($userId))
        {
            $brandList = $this->getBrandModel()->brandList();
            $this->dieCustomCode($brandList); // it can be echo instead of this or anything that would return me the array of brands...

        }
    }

So when I click on the a link, nothing shows up... the console says the #brands is undefined for some reason... Can someone help me out with this ? :/

Answer 1

1) I suggest to use append() instead of html() until you really need to replace all the previous data with .html() method.

So, instead of

$('#brands').html(brands);

use

$('#brands').append(brands);

Also, instead of:

var brands = $('<div />').append(data).find('#brands').html();

write:

var brands = $('<div />').append(data);

Because, once you append your data to the DIV element, you do not need traverse the DOM anymore in your case.

2) Make sure, that you don't have duplication of elements with id "brands" in the DOM.

3) Check if your "#brands" or ".pop-city-co" are not hidden with CSS.

4) I also suggest to use json_encode on your PHP side and then parse it on client side.