I'm trying to call a function using ajax, but it's not responding.
Here is the Code:
<p id="myElem" class="alert-danger" style="display:none"></p>
<button title="Remove" data-id="@item.Book.Book_id" class="Remove btn btn-group-sm red" style="float:initial">Remove</button>
<script type="text/javascript">
$('.Remove').click(function () {
var myId = $(this).data('id');
$.ajax({
type: "POST",
url: '@Url.Action("Remove", "ReadingNow")?Book_id=' + myId,
success: function (response) {
$('#myElem').html(response).fadeIn('slow');
$('#myElem').delay(8000).fadeOut('slow');
},
failure: function (response) {
alert("Failure");
}
});
});
</script>
and here is the function :
public class ReadingNowController : Controller
{
[HttpGet]
public ActionResult Remove(int? Book_id)
{
if (User.Identity.IsAuthenticated)
{
var x = User.Identity.GetUserId();
var IsExists = db.ReadingNow.Where(t => t.Book_Id == Book_id && t.User_Id == x).FirstOrDefault();
if (IsExists != null)
{
db.ReadingNow.Remove(IsExists);
int state = db.SaveChanges();
if (state == 1)
{
return Content("Book Removed From Your Reading Now List !");
}
}
}
return Content("Error !");
}
}
Note: When I tried to call it directly it works, but when used ajax I got no result... How can I solve this problem?
Ensure That jQuery Is Working
Firstly, ensure that your jQuery code is working properly and is referenced. You'll need to include a reference to the library prior to calling any jQuery-related code :
<!-- Example Reference -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(function(){
// Place your code here
});
</script>
If you want to perform a GET
...
You are specifying within your ajax()
call that you are making a POST
request via the type
attribute, but your Controller Action is explicitly expecting a GET
via the [HttpGet]
attribute decorating your action.
You can resolve this by changing your type
attribute from POST
to GET
(or you could remove it entirely as GET
is the default):
type: "GET",
If you want to perform a POST
...
Alternatively, if you want to actually perform a POST
, then just keep your existing code and use the [HttpPost]
attribute instead :
[HttpPost]
public ActionResult Remove(int? Book_id)
{
// Code omitted for brevity
}
i thing the problem is in this line:
url: '@Url.Action("Remove", "ReadingNow")?Book_id=' + myId
dont use @Url.Action that is not the current syntax to use razor in JS (you need to use the pseudo-element), just write the url ["/ReadingNow/Remove?Book_id="+id]. that way you know for sure where the request will go and it easier to read.
You can also call the Controller
via Ajax
by passing parameter(s) as shown below:
<script type="text/javascript">
$('.Remove').click(function () {
$.ajax({
url: '@Url.Action("Remove", "ReadingNow")',
data: { myId: $(this).data('id') /* add other additional parameters */ },
cache: false,
type: "POST",
success: function (response) {
$('#myElem').html(response).fadeIn('slow');
$('#myElem').delay(8000).fadeOut('slow');
},
failure: function (response) {
alert("Failure");
}
});
});
</script>