The problem is:
I have a form. When submitting it a jQuery Ajax function sends the data in the form to the backbone. When the Ajax finishes, I want the submit button to fadeOut ! I want to reach the button by traversing the DOM , not using IDs ! I don't know why this block is not working:
$('form').submit(function(e) {
e.preventDefault();
$.ajax(
{
url: '../../ctrl_amouzesh/ajax_students_final_record_action',
type: 'POST',
data: $(this).serialize() ,
success: function(data)
{
$('#res').html(data);
var temp = $(this).find('.btn');
temp.fadeOut();
}
}
)
HTML FORM:
foreach($members as $member)
{
?>
<form class="form-final-record" role="form" >
<input type="hidden" value="<?php echo $member -> nid?>" name="nid" class="from-nid">
<tr>
<td><?php echo ++$i ?></td>
<td><?php echo $member -> nid?></td>
<td><?php echo $member -> name." ".$member -> surename?></td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">Passed</option><option value="0">Failed</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-info" style="display:none">edit</button>
</tr>
</form>
<?php
}
?>
this is what my browser see ( from Page source )
<table class="table">
<tr>
<th>ردیف</th>
<th>کدملی</th>
<th>نام و نام خانوادگی</th>
<th>نمره نهایی</th>
<th>وضیعت قبولی</th>
<th>حذف ترم</th>
<th></th>
</tr>
<form class="form-final-record" >
<input type="hidden" value="654321" name="nid" class="from-nid">
<tr>
<td>1</td>
<td>654321</td>
<td>John Jackson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<form class="form-final-record" >
<input type="hidden" value="6523151" name="nid" class="from-nid">
<tr>
<td>2</td>
<td>6523151</td>
<td>Bob Backson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<form class="form-final-record" >
<input type="hidden" value="0049887238" name="nid" class="from-nid">
<tr>
<td>3</td>
<td>09213</td>
<td>Matt Matson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<tr><td colspan="5"><button type="submit" class="btn btn-success">ثبت نهایی کلاس</button></td></tr>
</table>
this
inside the success
function is not the clicked element, but the ajax object
$('form').submit(function(e) {
e.preventDefault();
var self = this;
$.ajax({
url: '../../ctrl_amouzesh/ajax_students_final_record_action',
type: 'POST',
data: $(this).serialize() ,
success: function(data) {
$('#res').html(data);
$(self).find('[type="submit"]').fadeOut();
}
});
});
$.ajax
also has a setting called context
that can be used to set the value of this
inside the callbacks