F Msw F Msw - 7 months ago 12
Javascript Question

Can't call function using ajax

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?

Answer

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
}