I have a simple rails project that I've been playing around in with reactjs. To add some basic navigation, I brought the js-routes library in and it works great for urls that have a path parameter such as "localhost:3000/addresses/1".
The problem I am facing is I am trying to call a "new" resource method and it adds the (::format) literally to the url which of course bombs as localhost:3000/addresses/new(.:format) is an invalid path.
I reference the "new_address_path" path as specified in the routes-js docs. The rake output for this url is below:
new_address_path GET /addresses/new(.:format) addresses#new
The HTML snippet utilizing the above path looks like this:
<a href={Routes.new_address_path}>Create am address</a>
ENV:
-Ruby: 2.2.4
-Rails: 4.2.6
-js-routes: 1.2.8
Route in question:
resources :addresses
What am I missing here? It seems like it is not interpreting the rails route file properly.
I am not sure if I got your question. If you want to generate url with format suffix you can use format option in the helper method. For example:
Routes.new_address_path(format: 'js')
will generate something like this:
/addresses/new.js
Sorry I thought I posted my solution in here.
The problem wasn't js-routes but rather my AJAX call, I was setting the content type to JSON and I assumed that it was converting my object to JSON using the built in methods. This is not true, you need to manually convert the object to JSON via JSON.stringify(obj).
Old ajax call:
....
url: Routes.feedback_path(),
dataType: 'json',
contentType: 'application/json',
type: 'POST',
data: obj,
....
New ajax call:
....
url: Routes.feedback_path(),
dataType: 'json',
contentType: 'application/json',
type: 'POST',
data: JSON.stringify(obj),
....
You might have found a solution, but your original problem is one with js-routes, or rather your use of it.
You have to provide the parens to get the correct output from js-routes.
Original: Routes.new_address_path
Fixed: Routes.new_address_path()
As smefju posted, you can specify the format in the parens, but completely leaving them off is not an option.
Related
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",
...
});
I apologize if this question seems basic as I am new to both stackoverflow and javascript in general.
My goal here is to store the user's dropdown menu selection as well as some other user inputs into variables, then I want to post the json file that contains the variables into a specific route where my serve-side javascript can read from. I have the variable part and user selection part covered, however, I am having trouble posting the variables to the specified route.
So in my app.js file in my ember framework, I tried the below code to test out if I can post {12345} to address:port/api/iwantmyjsonhere/ but when I run it and go to that specific page (address:port/api/iwantmyjsonhere/), it says cannot GET.
$(document).ready(function() {
$.ajax({ url : "/api/iwantmyjsonhere/",
type: 'POST',
dataType : "json",
data: "12345"
});
});
I understand that this question is lower level, so if you guys are too busy to answer, point me to any resources that might help me would be greatly appreciated too! Thanks in advance!
I guess this is not related to ember anywhere.
You are just using jQuery for ajax call and as per jQuery standards "Data" Object must be Key/Value pairs.
Means you should do something like -
$(document).ready(function() {
$.ajax({ url : "/api/iwantmyjsonhere/",
type: 'POST',
dataType : "json",
data: {id:"12345"}
});
});
You can read more on this one at -
http://api.jquery.com/jquery.ajax/
And if you want to implement it in ember way the you can use something like -
return Ember.$.ajax({
url: '/api',
method: 'POST',
dataType: 'json',
data: {//key value pairs}
}).then(function(result){
//After ajax is successful.
}
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.
I have a simple db.Model, that has one of the fields db.ListProperty(users.User)
For the REST server I used http://code.google.com/p/appengine-rest-server/
However, I can't seem to update this field..
The app is currently password-protected but if anyone wants to take a look, I can make it public.
Basically, I have a form that I post using this jQuery:
$.ajax({
contentType: 'application/json',
url: '/rest/' + $this.attr('name') + update,
type: 'POST',
data: $this.wsString(),
});
where $this.wsString() is applying serializeArray() to the form and after that transforms the result into proper REST format ( + JSON.stringify at the end ).
Here's the metadata for the entity, the "developers" field is the problematic one: http://toxik.appspot.com/Project.xml
Thanks for any help!
I managed to fix it: db.ListProperty(users.User) wants an object that serialized looks like this:
"developers":{"item":["some1#email.com","some2#email.com"]}
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