Jquery - how to get element that made the post

Question

Hallo,

I have following jquery code for calling ASP.NET MVC controller method that is returning the html created using Partial View.

$("form[action$='ShowProperties']").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(response) {

        $(this).children("div.serviceproperties").html(response);
       // $("div.serviceproperties").html(response);

    });
    return false;
});

Rendered html looks like this:

<ul>
<li class="serviceactionitem">
 <form method="post" action="/Service/ShowProperties">
  <input type="submit" value="Show General" name="[Show]"/>
  <input id="id" type="hidden" value="1" name="id"/>
  <input id="serviceitem" type="hidden" value="general" name="serviceitem"/>
  <div class="serviceproperties"> </div>
 </form>
</li>
<li class="serviceactionitem">
 <form method="post" action="/Service/ShowProperties">
  <input type="submit" value="Show Specific" name="[Show]"/>
  <input id="id" type="hidden" value="1" name="id"/>
  <input id="serviceitem" type="hidden" value="specific" name="serviceitem"/>
  <div class="serviceproperties"> </div>
 </form>
</li>

The response is html that need to be set inside of div element that is inside of the form element. I have several form elements on page and i don't know how to update the div inside of proper form. Commented code, of course updates divs from every form on the page.

Main thing is that $(this) does not return the form element, which is probably normal. So i need the way to address proper form element inside of function that is handling response and to find and alter div inside of it.

Thanks

Answer 1

Simply reselect the form:

 $("form[action$='ShowProperties'] div.serviceproperties").html(response);

Or capture the element first:

$("form[action$='ShowProperties']").submit(function() {
var $form = $(this);

$.post($(this).attr("action"), $(this).serialize(), function(response) {

        $("div.serviceproperties",$form).html(response);

    });
    return false;
});