jQuery posts data to wrong relative URL

Question

I have an ASP.Net MVC application. I am trying to post data to an action, and then just render the output. I have a page where you can view a product, so www.mysite.com/product/details/1 shows the product. On this page, I render a partial view through RenderAction() that contains some pricing logic. I want the user to select some options and then have jquery post the options to get the new price.

However, when I call

$.post({
  url : "price/getprice",
  data : {"options" : chosenOptions},
  success : function(data) {
              $("#price").text(data);
            }
});

The url is posting to www.mysite.com/product/details/price/getprice which doesn't exist. I've tried posting to "~/price/getprice/" but it does the same thing. Why won't it go to my PriceController's GetPrice(FormCollection form) action??

This should post to www.mysite.com/price/getprice. When I look in the Net tab in firebug, it says it's posting this:

http://localhost:42427/Product/Details/%5Bobject%20Object%5D

If I look at the response in Firebug, the application is throwing an exception:

The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Details(Int32)' in 'PrintPlaceWebsite.Controllers.ProductController'.

But I'm not trying to post to that location so...ugh.

Can you just change the url to be the full path: /price/getprice Isn't price the controller and not product? — spinon, Jul 22 '10 at 19:42
@Nick This should post to `www.mysite.com/price/getprice`. @Spinon I've tried ~/price/getprice, /price/getprice, and the full path www.mysite.com/price/getprice. — scottm, Jul 22 '10 at 19:46
How do you get your current URL? Are you using [Url.Action()](http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.action.aspx)? — Peter Örneholm, Jul 22 '10 at 19:51

score 5 · Accepted Answer · answered Jul 22 '10 at 19:44

5

Well you specified a relative URL, so if this code is on site www.mysite.com/a/b/c, the URL will point to /a/b/price/getprice.

You probably want to specify an absolute URL:

$.post({
  url : "/price/getprice",
  //     ^-- leading slash
  data : {"options" : chosenOptions},
  success : function(data) {
              $("#price").text(data);
            }
});

answered Jul 22 '10 at 19:44

Felix Kling

795,719
175
1,089
1,143

+1 - Your example needs a tweak though, it would be pointing to `a/b/price/getprice`, since the `c` has no trailing slash :) – Nick Craver Jul 22 '10 at 19:46
@scottm: If you do that, what says Firebug? If you have a routing issue, than it is a server problem. – Felix Kling Jul 22 '10 at 19:49
@scottm - It shouldn't be related to routing if you're seeing the URL in your question in Firebug/Chrome console. It may be a caching issue with your script files? There's no way that `url` in the `$.post()` call should go to the URL you're seeing. – Nick Craver Jul 22 '10 at 19:50
@Felix, the last little bit is the result in firebug when using this path (/price/getprice) – scottm Jul 22 '10 at 19:51
@Nick, that's why I'm pulling my hair out :) – scottm Jul 22 '10 at 19:52

score 0 · Answer 2 · answered Jul 22 '10 at 19:49

As far as JQuery knows it is basing its AJAX calls on the current location which, im guessing, is www.mysite.com/product/details/. Just as if you had a link to "myPage.html" would try to go to www.mysite.com/product/details/myPage.html.

I would suggest you resolve the URL in your View with something like..

<% = ResolveUrl("~/price/getprice") %>

score 0 · Answer 3 · answered Jul 22 '10 at 19:56

It seems that the URL router is mixing things up. Just replace the path with an absolute (full) one.

$.post({
  url : "http://mywesbite.com/price/getprice",
  data : {"options" : chosenOptions},
  success : function(data) {
          $("#price").text(data);
        }
});

score 0 · Answer 4 · answered Jul 22 '10 at 20:19

0

So, it turns out it was a little typo on my part (an everyone else's because you all copied it).

To reiterate:

$.post({
  url : "/price/getprice",
  data : {"options" : chosenOptions},  <<<<< Right here. dang.
  success : function(data) {
          $("#price").text(data);
        }
});

Do you see it?

$.post({
  url : "/price/getprice",
  data : { options : chosenOptions},  <<<<< no quotes. arg.
  success : function(data) {
          $("#price").text(data);
        }
});

answered Jul 22 '10 at 20:19

scottm

27,829
22
107
159

This might be the solution but it is not *bulletproof*. You can have issues with it just when switching between IIS and Visual Studio webserver or when using virtual directory in IIS and when not using one. You need to use Url.Action() like this $("#Url").autocomplete('<%=Url.Action("getprice", "price", new { options = "..."}) %>', {...}); – mare Jul 22 '10 at 23:15

score 0 · Answer 5 · answered Sep 23 '16 at 16:35

The one which worked for me is:

In the view : add

<span data-url="@Url.Content("~/ControllerName/ActionName")" id="getValues" class="hidden"></span>

Note: Make sure to use the forward slash('/')

In the Jquery file,

var getValues = $('span#getValues').attr('data-url');

In the Ajax call, Set

 $.ajax({
            type: 'GET',
            url: getValues,
            data: { id: abc},
            cache: false,
            success: function(result) {
             }
       });

jQuery posts data to wrong relative URL

5 Answers5