problem with serialize

Question

I dont think I could explain it in the title. Its very hard to explain it. There is an area where there are multiple forms and I use serialize there. When a user responds to one of the forms, an output comes and replaces the form. But I want it to replace the friendlist div.

I needed to create a facebook like social network for a school project. I use serialize on friendship requests page because users may have multiple forms at that page. Problem here is, when user submits one of the forms, it takes the response and replaces all forms with same response where I want it replace the form that is submitted.

I hope I could explain it better here.

My jquery code

    $("[name='respond']").live('click', function() { 
        var RequestForm = $(this).closest('#REQUESTFORM');
        $("[name='action']").val($(this).val());
            $.ajax({
                type: "POST",
                data: RequestForm.serialize(),
                url: "index.asp?Process=RespondRequests", 
                success: function(output) { 
                    $(".friendlist").html(output);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $(".friendlist").html(output);
                }
            }); 
    }); 

example

                        <div class="friendlist">

                            <a href="#"><img src="images/btn_icon_friendlist.jpg" alt="EfeTuncel" class="profile" /></a>
                            <div class="userinfo">
                                <span><strong><a href="#">Efe&nbsp;Tuncel</a></strong></span>
                                <span>Istanbul, Türkiye</span>
                            </div>
                            <div class="commonfriends">13 common friends</div>
                            <div class="tools">

                                <form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">
                                    <p>
                                        <input type="button" name="respond" value="Confirm" class="btn_confirm" />
                                        <input type="button" name="respond" value="Ignore" class="btn_ignore" />
                                    </p>
                                </form>                                  
                            </div>                        
                        </div>


                        <div class="friendlist">
                            <a href="#"><img src="images/btn_icon_friendlist.jpg" alt="talipkösem" class="profile" /></a>
                            <div class="userinfo">
                                <span><strong><a href="#">talip&nbsp;kösem</a></strong></span>
                                <span>Istanbul, Türkiye</span>
                            </div>
                            <div class="commonfriends">13 common friends</div>

                            <div class="tools">
                                <form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">
                                    <p>
                                        <input type="button" name="respond" value="Confirm" class="btn_confirm" />
                                        <input type="button" name="respond" value="Ignore" class="btn_ignore" />
                                    </p>

                                </form>                                  
                            </div>                        
                        </div>

Answer 1

Ideally what you will want to do is also assign an ID to each of the divs that have the class friendlist.

Next, you must return the ID of the div in some way back from the server in the Ajax request. Then, it's just a matter of hiding the correct div via the ID when the request comes back.

Another simpler way is to just add another parameter in the Query String for each of your forms that will have the ID for the div that you have to hide at the response.