Why my Ajax POST not working on Mobile's browser? - ajax

I have a simple Ajax Call, it works perfectly in all of Windows's browser but neither in mobile's browser (Android and iOS), what did I do wrong?
$.ajax({
type: 'POST',
url: '/System/Remove_Crons/' + '#Model.hexId'
});
[HttpPost]
[Route("/System/Remove_Crons/{id}")]
public async Task<IActionResult> Remove_Crons(string id)
{
await Models.Cron.RemoveAllAsync();
return Json(true);
}

Related

Unable to 'call' controller action from ajax post

I'm using net.core for the first time today and I'm trying to call an action method from an ajax call:
My Ajax call (from a normal HTML page)
$("#contactMap").click(function (e) {
e.preventDefault();
var url = "/MapObjects/mapContact";
//I've tried MapObjectsController & '#Url.Action("mapContact", 'MapObjects")'; But to no avail
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (result) {
alert("success");
}
});
});
And in my controller:
namespace myName.Controllers
{
public class MapObjectsController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult mapContact()
{
Account account = new Account();
return Json(account);
}
}
}
The 'account' is just a normal model (obvs empty in this case). All I receive is a 404 error in the console though.
As mentioned this is the 1st time I've .net Core (this is code I've written loads of times in 'normal' MVC projects) so it's possible that I'm missing something really obvious.
Thanks,
C
The first, try to call the #Url.Action() explicitly in the Ajax call :
$("#contactMap").click(function (e) {
e.preventDefault();
$.ajax({
url: '#Url.Action("mapContact", "MapObjects")',
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (result) {
alert("success");
}
});
});
The second, check your routing rules.

Ajax and ASP.NET MVC- Get page URL, not the controller/action URL

I have an Ajax method that calls an MVC action from a controller class.
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/ajax/Updates/Message",
dataType: "json",
success: function (response) {
//data variable has been declared already
data = response;
},
complete: function () {
if (data !== "") {
$('#div1').text(window.location.path);
$('#div2').text(data);
}
},
});
[HttpGet]
public async Task < ActionResult > Message()
{
string d = "test string";
return Json(d, JsonRequestBehavior.AllowGet);
}
The 'url' within the Ajax method is the call to the action method.
What to do if I want to return the actual page URL in Ajax Response, not the controller/action url?
So this controller does not have a view or anything associated with it, it is more like a helper class. When I am using ajax in any of the other pages, it is not returning the URL path of that specific page (via 'window.location.path) e.g. /Accounts/Summary , rather it is returning Updates/Message (in reference to the controller and action)
The web is stateless, when you call Updates/Message with ajax, it doesn't know it's for page Accounts/Summary. You'll have to pass this as parameter (post or get) or you could try Request.UrlReferrer which should contain the url of the page that called the request.
I hope this will help you try this code:
ajax code
$.ajax({
type: 'GET',
url: '#Url.action("Message","Updates")', // url.action(ActionName,ControllerName)
success: function (data) {
window.location = data;
},
error: function (xhr) { // if error occured
alert("Error occured.please try again");
}
dataType: 'json'
});
actionresult :
[HttpGet]
public async Task<ActionResult> Message()
{
string d = "http://www.google.com";
return Json(d, JsonRequestBehavior.AllowGet);
}

sending POST request to Controller action works in IE not in Chrome

Action code is:
//tickets is null in chrome but has value in IE
public async Task<IActionResult> ChangeStatus(string tickets)
{
//Code goes here
}
ajax call
var selectTickets = '"ticket1","ticket2"'
$.ajax
({
type: 'post',
url: "/SkyBusTickets/ChangeStatus/",
data: {'tickets': selectTickets},
success: unexpiredTicketsBulkStatusChangeSuccess,
failure: unexpiredTicketsBulkStatusChangeError
});
In chrome it gives an error in console
jquery.js:9536 POST http://localhost:54656/SkyBusTickets/ChangeStatus/
500 (Internal Server Error)
what needs to be done to make it work in both browsers?
EDIT
If I change the action method to the below one it will stop working in IE too
//tickets is null in both chrome & IE
public async Task<IActionResult> ChangeStatus([FromBody]string tickets)
{
//Code goes here
}
Check this, it worked for me
//ajax side
$(document).ready(function () {
var selectTickets = '"ticket1","ticket2"'
$.ajax
({
type: 'post',
url: "api/Test/ChangeStatus",
dataType: 'json',
data: { "": selectTickets },
success: function () {
},
failure: function () {
}
});
});
In Controller part
[HttpPost]
public string ChangeStatus([FromBody]string tickets)
{
return "sdfdf";
}
You can refer this link
http://www.c-sharpcorner.com/UploadFile/dacca2/web-api-with-ajax-understand-formbody-and-formuri-attribute/

Get an image through jQuery AJAX

The following image tag is in my Login Page
<img id="CaptchaImg" alt="Captcha" src="#url.action("Captcha","Login")" style="" />
Now when I refresh my login Page, it works fine, and gets the image from the controller, but when I logOut and the login Page renders .the controller method is not being called.Problem is only in IE works fine on Chrome.Is there are work around?
Can I do something with jQuery Ajax call to the controller, I tried this but the success method is not called. Is there any other way?
$.ajax({
type: "GET",
url: '/Login/CaptchaImage',
datatype: "image",
success: function(data) {
debugger
$('#CaptchaImg').attr('src', data);
}
});
Try this
$.ajax({
type: "GET",
url: '#Url.Action("Captcha","Login")',
dataType:"image/jpg",
success: function (data) {
$('#CaptchaImg').attr('src', data);
}
});
web Server should return base64 Data. like this
{ base64Data:"blahblahblah" }
your ajax request content-type could be plain json ;
in your success function in ajax you could do like this
success:function(data){
var src="data:image/png;base64,"+data.base64Data;
$('#CaptchaImg').attr(src,src)
}

Request facebook permissions/login after ajax form validation (in ajax response)

It is working right now , but I have some feedback of user saying that the facebook popup is blocked by the browser
So what I am doing right now: I have a form that is being validated via ajax (making a call to a php page) , then if the response is successful, it ask for the user login/permissions. I assume that the popup is sometime blocked because the browser consider the ajax response not as an user action.
So my code looks like this :
$("#submit").click(function (event) {
event.preventDefault();
$.ajax({
url: url,
type: type,
data: form_data,
success: function(result){
if(result==""){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me/permissions', function (response) { ... });
} else if (response.status === 'not_authorized') {
FB.login(function (response) { ... });
}
}
}
}
});
Any idea other than putting the facebook calls before the form validation?
You can make ajax request as synchronous call. I don't like it though
btw, what kind of validation you are doing?

Resources