I want to close the Dialog box after saving data through ajax call, I have used .hide() but it's not working.
I used the code to hide it and its background but this effects the scrolling of the page.
The page stopped's scrolling, when I used that hidden code
Following are my script's I'm using
I'm also getting the error of .modal is not a function
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
Code For My-Modal
<div id="CommentAddPopUp" class="modal">
<div class="row" style="background-color: #E2EFDA;">
<div class="col-sm-12 col-md-12" style="background-color: #E2EFDA">
<h4><b>Add Comment</b></h4>
<hr style="border-bottom: 2px solid #64bcdc;" />
<div class="form-group row">
<label for="inputEmail" class="col-sm-3 col-form-label">Comment Type:</label>
<label for="inputEmail" class="col-sm-1 col-form-label">Public</label>
<div class="col-sm-2">
<input type="radio" name="CommentType" value="True" id="Public" />
</div>
<label for="inputPassword" class="col-sm-1 col-form-label">Private</label>
<div class="col-sm-2">
<input type="radio" name="CommentType" value="False" id="Private" class="rdPrivate" checked="checked" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label customLabel">Comment</label>
<div class="col-sm-8">
<textarea name="Comment" id="txtComment" runat="server" class="txtComment" style="width: 100%; margin-left: 10px" cols="80" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-4 col-form-label">Mark as Customer Call:</label>
<div class="col-sm-1">
<input type="checkbox" name="CustomerCall" runat="server" id="chkCustomerCall" class="form-control chkCustomerCall" />
</div>
</div>
<div class="form-group row">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary btnsavecomment" id="btnComment">Submit</button>
</div>
</div>
</div>
</div>
</div>
From this modal I used the submit button class to call ajax call i.e btnsavecomment
Ajax Call
$('.btnsavecomment').on("click", function () {
var Commenttype = $("input[name='CommentType']:checked").val();
var CustomerCall = $('.chkCustomerCall').is(':checked');
//});
var datas = {}
datas.OrderNo = $('.rdPOM').val();
datas.Comment = $('.txtComment').val();
datas.CommentType = Commenttype;
datas.CustomerCall = CustomerCall;
$.ajax({
type: "POST",
url: "Claims_View.aspx/SaveComment",
data: JSON.stringify(datas),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
debugger
var ClaimID = $(".hdnClaimId").val();
var OrderNo = $('.rdPOM').val();
Allfunctions(ClaimID, OrderNo);
$('#CommentAddPopUp').hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
// $("#CommentAddPopUp").hide();
//$(".jquery-modal").hide();
$('.txtComment').val('');
$('.chkCustomerCall').prop("checked",false)
$(".rdPrivate").prop("checked", true);
//$('#CommentAddPopUp').modal('toggle');
},
failure: function (response) {
alert(response.d);
}
});
return false;
});
