assign jquery response to div of class name in closest tr
Question
I want to display the response of jquery in the class 'defects' in the corresponding row where defect_type is selected. The jquery request is working fine and response is received, but is able to display neither in the td part nor inside a div in t. The code lines i wrote in the success section dont work.
<html>
<body>
<table>
<tr>
<td>
<select class="form-control defect_type" onChange="get_defects(this.value)">
<option>1</option>
<option>2</option>
</select>
</td>
<td class="defects"></td>
</tr>
<tr>
<td>
<select class="form-control defect_type" onChange="get_defects(this.value)">
<option>1</option>
<option>2</option>
</select>
</td>
<td class="defects"></td>
</tr>
</body>
<script>
$(".defect_type").change(function(){
if(this.value==""){
alert("Select Defect Type");
return;
}
$.ajax({
type: 'post',
url: '../ajax/get_defects.php',
data: {
defect_type: this.value
},
success: function (response) {
$(this).closest('tr').find('.defects').html(response);
$(this).closest('tr').find('.defects').text(response);
}
});
});
</script>
</html>
1 answers
solution1
2 ACCPTED 2019-07-02 17:48:01
Problem : the $(this) inside the success function does not refer to the element that changed. It refers to AJAX.
Solution : Assign $(this) to a variable and then use the variable instead.
$(".defect_type").change(function(){
if(this.value=="") {
alert("Select Defect Type");
return;
}
var me = $(this); // <-- create the var
$.ajax({
type: 'post',
url: '../ajax/get_defects.php',
data: {
defect_type: this.value
},
success: function (response) {
me.closest('tr').find('.defects').html(response); // <--use the var here
me.closest('tr').find('.defects').text(response); // <--use the var here
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.