Ajax call to a different controller - javascript

I am trying to call a different Controller method in an Ajax call. I have looked at different posts for a solution but because I do not exactly understand what their solutions are (Links at bottom). I am calling my ajax call from my Home Controller, trying to call a method in my Production Controller.
"Request URL: http://localhost.59223/Home/Production/CreateNewProductionGoal"
This is the error I am getting.
I have tried changing the URL to .../Production/CreateNewProductionGoal and to ~/Production/CreateNewProductionGoal, as suggested online. Neither of these implementations worked because I was getting a 404 error, page not found.
One of the linked solutions mentions using a loc var key, of which I am unfamiliar.
The other suggests using a button which is not an option in my case.
$.ajax({
type: 'post',
url: "Production/CreateNewProductionGoal",
dataType: "json",
data: data, //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
success: function (data) {
//$('#Dashboard').load("/Home/UpdateView/" + selectProductionLine);
}
});
Ajax call to different controller
How to make ajax calls to different MVC controllers
For clarification, I am looking for a step by step with explanation on how to Ajax call from one MVC controller to another.
Thanks!

You should include a leading / in your url to call the correct URL:
$.ajax({
...
url: "/Production/CreateNewProductionGoal",
...
});
That way, the request will go to http://localhost.59223/Production/CreateNewProductionGoal instead.
The different paths, if you currently view http://example.com/Home/:
your/path: This will take the current path as start path, i.e. and add it to there, resulting in http://example.com/Home/your/path.
~/your/path: can be used in asp.net server code, e.g. Razor to indicate the root of your website, only if it rendered. Browsers do not consider ~/ a special token, resulting in http://example.com/Home/~/your/path or http://example.com/your/path, when rendered
.../your/path: nothing special, resulting in http://example.com/Home/.../your/path
../your/path: go up one directory level, resulting in http://example.com/your/path. But this will result in different paths for nested directories.
/your/path: absolute path, will always result in http://example.com/your/path, independently of nested directories.
For more on absolute and relative URL see Absolute vs relative URLs

This might still be helpful for someone to use
$.ajax({
...
url: "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Production/CreateNewProductionGoal",
...
});

Related

How to set the url in off-line site using jquery ajax

well my task is running a static site, No servers at all. pure HTML, and i need to load and read an XML file and update the page with the result.
The task is done and can read the xml file if the file is in the same location, the problem is if the xml file is in a separate folder the ajax flails. seems like the url fails.
$.ajax({
type: "GET",
// working url setting - case - 1
// url: "somexmlfile.xml",
// not working - case - 2
url: "../somepath/somexmlfile.xml",
dataType: "xml",
success: function(xml){
// do something with the returned data
},
error: function() {
// display the error
}
});
Case - 1 is the working solution for me, but i need to place the xml file in a separate place.
Then the case - 2 is the way to get to the file which is getting failed.
any idea,
Actually no domain, no servers, its is pure HTML,
All files are in ex:
D:/myfiles/someFolder/index.html
If i put the file in
D:/myfiles/someFolder/xml/myxml.xml
and set the url as
url: "xml/myxml.xml"
this config is working too,
But i'm trying to place the xml file in
D:/myfiles/xml/myxml.xml and need to read the file using ajax setting the url as
url: "../xml/myxml.xml"
Try to use an absolute url:
www.yourdomain.ext/siteDolder/xmlFolder/xmlfile.xml
Finally the solution was to turn off browser security (strict_origin_policy set to false on about:config) on Firefox settings and it works.

Jquery Ajax url path Issue

I am trying to design a message system for my website, but i can't get my ajax running.
So I make a simpler version of the interaction between the files.
Here is my file both test.php and load.php is under the root folder ( public_html).
i have the ajax function in test.php. load.php is just simply echoing "wow".
$("#test").click(function(){
alert("Clicked.");
$.ajax({
url:"/load.php",
type:"POST",
beforeSend: function(){
alert("testing");
},
success:function(result){
$("#result").html(result);
alert(" sss "+result);
}
}).error(function(){alert("wrong");});
});
Now It works perfectly.
...........how to set relative path ...................
Here is the more complicated design
3 files, all in different folder :
messages.php (under root)
showing all the messages
control.php (root/panels)
a panel will be included in messages.php
load.php (root/functions)
control.php will use ajax to call it then display result in control.php
so when user load in messages.php, it will load control.php then run the ajax call control.php.
I am so confused about how to set up these paths for ajax
( including control.php in messages.php works fine)
Thanks
To understand ajax url, I have two things that should always be remembered.
1. If we put slash at the beginning of ajax url, ajax url pattern will be `hostname/yourFile`
example:
// current url: http://sample.com/users
// ajax code load from users page
$.ajax({
url: '/yourFile.php',
...
});
// ajax url will be: http://sample.com/yourFile.php
2. If we don't use slash at the beginning, ajax url will add to the current url in the browser. example:
// current url: http://sample.com/users
// ajax code load from users page
$.ajax({
url: 'yourFile.php',
...
});
//...ajax url will be http://simple.com/users/yourFile.php
I hope this things can help people who want to use ajax.
Happy coding, thanks.
If the files you're trying to contact are in the root you can use /[file].php so that no matter which page you're on the path will be correct. It sounds like you have a relative path issue. Do you get any errors in the console?

jquery ajax - calling my asp.net web api gives a wrong url and a 404 not found message

I'm writing a small ASP.NET MVC site which also includes a WEB API in it that I wrote.
I've configured the project on my local IIS as http://localhost/mysite
On the main page of my site I'm including a js script that I wrote:
<script src="#Url.Content("~/Content/js/home.js")"></script>
on the page ready event of that js I call:
$.ajax({
url: 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
when looking with Fidler I see that the page call returns a 404 since it doesn't try to load it to the relative path I'm in (http://localhost/mysite) and it tries to load the root of the server - so the call looks like this http://localhost:80/api/getdetails
when I was writing web forms I used to do ajax calls such as this all the time and it always worked.
what am I missing?
Thanks
What I ended up doing is in my layout html I've added a js var:
var baseUrl = '#Url.Content("~/")';
then on my ajax call I've added that base url:
$.ajax({
url: baseUrl + 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
this does the trick no matter how the page looks like. even if I navigate to http://localhost/mysite/home/index
It's probably not the perfect solution, and I definitely think the old webforms way which worked was better - but I guess there are pros and cons to any technology.
Still would be happy to hear if someone has a better solution. for now - this does the trick.
When you navigate to
http://localhost/mysite
The behavior is a little different from
http://localhost/mysite/
Try that to confirm. Without the trailing slash, the "mysite" looks like a document name, not a folder, so relative paths would form from the root of the server.
What you may need to do is pass in the site content URL into your home.js and form absolute paths from it in your code.

Return String from Cross-domain AJAX Request

I'm looking for a way to return a single JSON/JSONP string from a cross-domain "AJAX" request. Rather than request the string and have JQuery return it as a generic object automatically, I want to get a hold of the string BEFORE that conversion happens. The goal here is to parse it myself so I can turn it straight into new objects of a certain type (e.g. a Person object).
So, just to make this clear, I don't want any string-to-generic-object conversion going on behind the scenes and this must work using a different domain.
Here's a non-working example of what I would like to do:
$.ajax({
type: 'GET',
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'text',
success: parseToPerson
});
function parseToPerson( textToParse ) {
// I think I can do this part, I just want to get it working up to this point
}
I'm perfectly happy if JQuery isn't involved in the solution, as long as it works. I would prefer to use JQuery, though. From what I've read, the javascript techniques used to get JSONP data (dynamically creating a script element) would probably work, but I can't seem to get that to work for me. I control the domain that I am requesting data from and I can get the data if I change the dataType in the AJAX call to 'JSONP', so I know that is working.
If your data is being retrieved from another domain, you will need to use JSONP (there are other options, but JSONP is by far the easiest if you control the service). The jQuery call will look like this:
$.ajax({
// type: 'GET', --> this is the default, you don't need this line
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'jsonp',
success: parseToPerson
});
The actual request that goes to your service will be http://www.someOtherDomain.com/GetPerson?callback=arbitrary_function_name. On the service side, you will need to return data like this:
arbitrary_function_name("the string (or JSON data) that I want to return");
So you'll need to inspect the querystring parameters, get the value of the callback parameter, and echo it out as if you're calling a Javascript function with that name (which you are), passing in the value you want to provide through the service. Your success function will then get called with the data your service provided.
If you're deserializing the returned data into a Javascript object, you might be better off returning JSON data than a string, so the data your service returns might look like this:
arbitrary_function_name({
"name":"Bob Person",
"age":27,
"etc":"More data"
});
That way you don't have to worry about parsing the string - it'll already be in a Javascript object that's easy to use to initialize your object.
Not sure how this will work in conjuction with jsonp, but maybe converters is what you're looking for?
$.ajax(url, {
dataType: "person",
converters: {
"text person": function(textValue) {
return parseToPerson(textValue);
}
}
});

IIS6 javascript routing issues

I currently have the following within my view
function loadData() {
var url = "/Testx.mvc/GetData";
var id = "111111";
var format = "html";
$.ajax({
url: url,
type: "POST",
dataType: format,
data: "id=" + id,
success: populateResults
});
}
function populateResults(result) {
$('#results').html(result);
}
I also have a controller called TestxController with an action method called GetData(int? id).
Now the ajax call above works on Visual Studios 2008's built-in development server, but when i switch it to use IIS webserver it doesn't. It seems like the route isn't being found because I tried putting a break point on GetData but it doesn't even reach there.
Does anyone know what i would need to do to fix this?
Edit: I've also tried the wildcard mapping method discussed at http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx and it worked perfectly. (Of course I had to remov the .mvc from the url)
Is there any way to get this to work with the .mvc extension?
Thanks
Is Testx.mvc at the root of your webserver? If your application is running in a virtual directory on IIS then the correct path would be something like /YourApp/Testx.mvc/GetData.
The Visual Studio built-in webserver might be placing Testx.mvc at root, which is why it works within VS.
If that is the case, then try using the relative path Testx.mvc/GetData rather than /Testx.mvc/GetData.
Is there an actual function called 'callback'? Just asking because it seems like you might mean to be calling 'populateResults' with a successful response.
Try this perhaps:
$.ajax({
url: url,
type: "POST",
dataType: format,
data: "id=" + id,
success: function(results){$('#results').html(result)}
});
Did you check your ISS setup to see if it supports the POST action? It might only be specifying the GET action... see http://haacked.com/images/haacked_com/WindowsLiveWriter/07de283cb368_B754/application-mappings_3.png

Categories