How to pass dates as parameters in Ajax url get call? - javascript

I have an Ajax call that tries to populate a highchart by calling an api. I am trying to access date values from ViewBag and passing them to the AJAX url, I end up getting an error
jQuery.Deferred exception: Jun is not defined ReferenceError: Jun is
not defined
the value from the ViewBag looks like June-2022. The ajax implementation looks like
$.ajax({
url: 'api/getProvinceData/'+ #ViewBag.reportinPeriod,
type: 'GET',
success: function (data) { }
});
so the complete api with the values filled up should look like when it gets the value in the ViewBag
url: 'api/getProvinceData/Jun-2022'
Why am I getting Jun is undefined in Ajax, while I am just accessing the value directly from the ViewBag? Any help is appreciated.

Because you are calling a view it will render it as 'api/getProvinceData/'+ Jun-2020, so the best way to access it is to just have it inside the quotes and not concatenate it so it will be
$.ajax({
url: 'api/getProvinceData/#ViewBag.reportinPeriod',
type: 'GET',
success: function (data) { }
});
and it will make the api correctly as
'api/getProvinceData/June-2022

Related

How to use jquery Ajax data action

I am trying to figure out what and how to use the data parameter in a $.Ajax call. The problem is that I am unsure as to what the 'action' part in the data call is supposed to do. Is it an action in a controller? If yes, how do I reference it correctly?
var data = {
action: 'get-all-users',
data: JSON.parse($('form.post-list input').val())
};
$.ajax({
url: '/Users/index',
type: 'POST',
data: data,
success: function (response) {
* code *
}
});
What should 'get-all-users' result to? A Get function in a controller or what?
I am using ASP.NET MVC Core 2.0.
The property 'action' of the object 'data' is not related to controller (and it is not an action of controller).
The data parameter in $.ajax call contains data to be passed to server. So here you are gonna send the next object to the server:
var data = {
action: 'get-all-users',
data: JSON.parse($('form.post-list input').val())
};
And in order to receive and parse this object on the server side you should have appropriate C# class to provide ModelBinder with a correct data.
One more. In your example Index is an action in Users controller call will be made to. You can see it in 'url' parameter of $.ajax.
$.ajax({
url: '/Users/Index',
type: 'POST',
data: data,
success: function (response) {
* code *
}
});

Trying to understand JQuery/Ajax Get/POST calls

Correct me if I'm wrong but it was my understanding that a POST was to be used if I was changing data, and a GET was to be used if I want to retrieve data.
Based on that assumption.
I have (MVC5) app.
My JavaScript
function MyLoadData(myValue) {
$.ajax({
method: 'POST',
url: '/Home/GetMyData',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ "MyValue": myValue}),
success: function (data) {
// Do Stuff
}
});
and my controller.
public JsonResult GetMyData(string myValue)
{ // Do Stuff }
This only works if I set the method: 'POST', if I set it to 'GET' it will still make the server call but not pass the myValue to the controller.
Also of note there is no data annotation on the GetMyData method.
In this scenario shouldn't I be using GET to get my data from the controller?
UPDATED based on comments:
function MyLoadData(myValue) {
$.ajax({
method: 'POST',
url: '/Home/GetMyData',
dataType: 'json',
data: { "MyValue": myValue},
success: function (data) {
// Do Stuff
}
});
Both POST and GET methods can pass the myValue to the controller.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.
POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
The primary difference between a GET and a POST is that the POST will also submit the form data. In your example, you can use a GET by appending ?MyValue=<myValue> to your URL and WebAPI will assign the value to the Action's parameter.
If the GET request needs to work then use this code block:
function MyLoadData(myValue) {
$.ajax({
method: 'GET',
url: '/Home/GetMyData?myValue=test',
success: function (data) {
// Do Stuff
}
});
Basically, you can use GET or POST to get the data. but in GET, the data is passed through query string. In POST it can be passed both through query string as well as body.
One real world scenario when to use POST-Suppose your method expects Customer parameter and you need to send Customer object as parameter, then you can send the json representation of Customer object through body.but its not possible through GET.
One more reason is security,if you use GET, your method can be called through browser.but if you use POST, the method can't be directly called.
These were the important difference.For more differences see this link - http://www.diffen.com/difference/GET_(HTTP)_vs_POST_(HTTP)

Uncaught TypeError: number is not a function when parsing JSONP response in jQuery ajax call

I am trying to grab data from a wordpress blog using the WP-API plugin. My js file is using jQuery to make ajax calls to the api. I need to use JSONP as the response type since I am trying to access cross domain information.
When the page loads, I get an error "Uncaught TypeError: number is not a function" and my response begins like this: /**/1([{"ID":231,"title":blahblahblah... with the error pointing at the "1" in the console.
This is the code I am using to try and grab the data and parse it:
function get_posts(num_offset) {
offset = num_offset,
url = 'http://www.example.com/wp-json/posts?_jsonp=1&filter[posts_per_page]=5&filter[offset]=' + offset;
$.ajax({
type: 'GET',
dataType: "jsonp",
url: url,
success: function (data) {
consol.log(data);
console.log(url);
}
});
// second ajax call to get the total number of posts
$.ajax({
type: 'GET',
dataType: "jsonp",
url: 'http://www.example.com/wp-json/posts?_jsonp=1&filter[offset]=-1',
success: function (data) {
console.log(data);
}
});
}
I guess I need to know how I can remove the "Uncaught TypeError: number is not a function" error and then how I would be able to parse the JSONP data.
much thanks!
You're telling the other end that your callback's name is 1, in your URL:
http://www.example.com/wp-json/posts?_jsonp=1&filter[offset]=-1
Here --------------------------------^^^^^^
You want to use the name of the callback function you have on your page that you're expecting to receive the JSONP response, which needs to be a validate identifier literal (so not 1).
Because you're using jQuery, it's best by far if you let jQuery worry about what the callback name should be, by leaving off that query parameter entirely and letting jQuery add it. Since _jsonp is an unusual query string parameter name for this, you'll need to tell jQuery what the parameter name is.
$.ajax({
type: 'GET',
dataType: "jsonp",
url: 'http://www.example.com/wp-json/posts?&filter[offset]=-1',
// No _jsonp=1 here ------------------------^
jsonp: '_jsonp',
// ^^ new parameter here
success: function (data) {
console.log(data);
}
});

AJAX call without success field?

Hi all is it possible to call a an ajax call without using success?
ie from:
$.ajax({
type: "POST",
url: "/project/test/auto",
data: data,
success: function(msg){
//window.location.replace(msg);
}
});
to something simply like:
$.ajax({
type: "POST",
url: "/project/test/auto",
data: data,
});
To give reasoning - I have written some php to insert items into a database and then redirect to another page, I don't want to have to re-write the same code again to insert into the DB and then redirect in JS.
jQuery.post() documentation
$.post( "/project/test/auto", data );
I don't think that you can redirect using PHP within ajax call.
It would be best to create a function out of DB insert and then with ajax call a page that executes that function and returns success:true in json for example. After that, redirect in success part of your ajax call. You can later call the same DB insert function from within your PHP code.

jquery sending form data and a json object in an ajax call

I'm making a call to another ajax page, the call posts a json object.
I also need to send data from a form
(not using submit - I have the ajax call attached to a button which uses e.preventDeault()).
The call is as folows:
var myUrl = 'sendswatch-data.php';
$.ajax({
url: myUrl,
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
type: "POST",
error: function(xhr, statusText, errorThrown){
// Work out what the error was and display the appropriate message
},
success: function(myData){
$('#tabsampleorder').html(myData);
$('.tabber').hide();
$('#tabsampleorder').show();
}
});
I have a form on the page id of formdata.
How do I send this as well as the json object? I've tried
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
but that's generating an error.
You have an extra } after watchArray. Try removing that.
data: {'swatchid[]':swatchArray, 'formdata':$('#orderData').serialize()},
You can send data from the form as follows:
data : { swatchid: swatchArray, formdata: $('#orderData').serialize() }
You will need a parameter in the controller for every field that your add.

Categories

Resources