problem with serialize

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>
                      开发者_StackOverflow中文版      <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>

The problem is that you're targeting every element with the class "friendlist":

$(".friendlist").html(output);

Always be aware of where you are in the DOM when working with jQuery. When you click the button, that's the starting point. First you wanted to find the form. You used traversing, although this isn't necessary when the form already has an ID, because then you can also target it directly.

var RequestForm = $(this).closest('#REQUESTFORM');

Would be the same as:

var RequestForm = $('#REQUESTFORM');

Just make sure that there is only one id with "REQUESTFORM". Now both forms have the same ID, which is invalid; an ID should always be unique. But what if it's REQUESTFORM_123? Then you need to know that it's "123" opposed to "456" or something else. So in this case it's easier to remove the ID from the form altogether since it's not needed. Just use traversing to get to the form.

This is basically where you are when you clicked the button:

div (friendlist) => div (tools) => form => button

So how can you target all these elements? Like so:

var button = $(this);

you are here: div (friendlist) => div (tools) => form => button

var form = $(this).parent();
  // or button.parent();

you are here: div (friendlist) => div (tools) => form => button

var tools = $(this).parent().parent();
  // or $(this).parents('div.tools');

you are here: div (friendlist) => div (tools) => form => button

var friendlist = $(this).parent().parent().parent();
  // or $(this).parents('div.friendlist');

you are here: div (friendlist) => div (tools) => form => button

You simply go up one step at the time; just look at the HTML and see where the element is that you're trying to reach, and then find it using the best suitable traversing function in jQuery.

In your case, first define the div that contains the form you're working with, e.g.:

var friend = $(this).parents('div.friendlist');

Then, when your ajax post was successful, simply target the 'friend' variable:

friend.html(output);

But... if the only thing that should happen is to accept or ignore a friend request, you don't need a whole form and serialize stuff, simply include the data you need in the buttons, like so.

HTML:

<!-- a friend -->
<div class="friendlist" id="friend_123">
 info...

 <input type="button" name="confirm;123" value="Confirm" class="btn_confirm" />
 <input type="button" name="ignore;123" value="Ignore" class="btn_ignore" />
</div>

<!-- another friend -->
<div class="friendlist" id="friend_456">
 etc...
</div>

Create a div for each friend and give it a unique ID, so it's easy to target the right one. You can also use traversing, but in many cases it's way easier to directly target the element. That way you don't have to think about where it is in the DOM in relation to, in this case, your clicked button.

jQuery:

// when a button with one of these classes is clicked (or use live())
$('.btn_confirm, .btn_ignore').click(function() {
    // take the name attribute, e.g. "confirm;123" and split it on ";"
    var data = $(this).attr('name').split(';');
    // the first value, e.g. "confirm"
    var action = data[0];
    // the second value, e.g. "123"
    var userId = data[1];


// now post the data and process it in your script:
$.post('index.asp', {
    process: 'RespondRequests',
    action: action,
    userId: userId
}, function(result) {
    // target the parent div and replace the HTML
    // with the result from your script
    $('#friend_'+userId).html(result);
});


});

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.