ajax成功后,它会连续显示数据。如果我第一次添加新行,它会添加第一张图片,而第二次添加错误的方式
我的代码:
<div class="row">
<div class="col-3">
</div>
<div class="col-8">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Add Course</h4>
<form method="POST" id="topic_form" class="form-horizontal well">
<fieldset>
<div class="repeater-custom-show-hide">
<div data-repeater-list="car">
<div data-repeater-item="">
<div class="form-group row d-flex align-items-end">
<div class="col-sm-12">
<select id="mainCatItem" name="mainCatItem" class="form-control">
<option value="">Select Category</option>}
option
<?php foreach($fetchcat as $fetchcategory): ?>
<option value="<?php echo $fetchcategory->main_category_id; ?>"><?php echo $fetchcategory->main_category_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<!--end col-->
<div id="course_show">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Course Title</label>
<input type="text" id="coursetitle" name="coursetitle" class="form-control">
</div>
<!--end col-->
<div class="col-sm-6">
<label class="control-label">Short description</label>
<input type="text" id="shortdesp" name="shortdesp" class="form-control">
</div>
<div class="col-sm-6">
<label class="control-label">Course Price</label>
<input type="number" id="courseprice" name="courseprice" class="form-control">
</div>
<!--end col-->
<div class="col-sm-12">
<label class="control-label">Page Content</label>
<textarea style="height: 100px !important" type="text" id="page_content" name="page_content" class=" form-control"></textarea>
</div>
<div class="col-sm-12">
<label class="control-label">Long description</label>
<textarea style="height: 100px !important" type="text" id="longdesp" name="longdesp" class=" form-control"></textarea>
</div>
<div class="col-sm-12">
<label class="control-label">Trailer Video link</label>
<input type="text" id="links" name="links" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div id="course_show2">
<div class="row">
<div class="col-12">
<h3>Video Detail</h3>
<form id="insertvideo" method="post">
<table id="addrow" width="100%">
<tr>
<td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add" /></td>
</tr>
<tr class="clonetr">
<td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
<td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td>
<td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td>
<td><input type="button" class="btn btn-danger deleteButton" value="delete" /></td>
</tr>
</table>
</form>
</div>
</div>
<div class="col-sm-6" style="margin-top: 13px; margin-left: 400px;">
<!-- <button type="submit" id="insert" class="btn btn-primary col-3 offset-1">Get Course</button> -->
<button type="submit" id="btn-update" value="Submit" class="btn btn-primary col-3 offset-1">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#course_show").hide();
$("#course_show2").hide();
});
$(function(){
$(".addButton").click(function(){
$('.clonetr:last').clone(true).appendTo("#addrow");
$("#addrow tr:last input").val("");
});
$(".deleteButton").click(function(){
if($('.deleteButton').length > 1)
$(this).closest("tr").remove();
else
alert('Atleast one required.');
});
});
$('#mainCatItem').change(function(e){
e.preventDefault();
var mainCatId = $(this).val();
$.ajax({
url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail1",
type: "POST",
data: {mainCatId:mainCatId},
dataType:'json',
success: function(response)
{
$("#course_show").show();
$("#course_show2").show();
console.log(response);
console.log(response[0].Category);
if(response.length>0){
$('#coursetitle').val(response[0].Course_title);
$('#shortdesp').val(response[0].Short_description);
$('#courseprice').val(response[0].Cource_price);
$('#courseduration').val(response[0].Cource_duration);
$('#page_content').text(response[0].page_content);
$('#longdesp').text(response[0].Long_decription);
$('#links').val(response[0].Links);
$('#videotitle').val(response[0].video_title);
$('#videodesc').val(response[0].video_description);
$('#videolink').val(response[0].video_links);
$('#btn-update').show();
}else{
}
$.ajax({
url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
type: "POST",
data: {mainCatId:mainCatId},
dataType:'html',
success: function(response)
{
$('#addrow tr:not(:first)').remove();
$('#addrow').append(response);
console.log(response);
}
});
}
});
});
</script>
在我的ajax成功响应中有两条记录。
在显示两个记录数据之后,我在单击add
按钮后添加了新行,但是添加行的方式与在第二张图像中显示的方式错误。
我想在最后一条记录之后添加一个新行。
这是我的完整代码。