ASP.NET MVC invoking webservice through AjaxOptions.Url - ajax

Question

Say I wanted to invoke the following url that returns Json through an Ajax call:
http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey"
How does on go about doing this?
I tried using the AjaxOptions.Url like this:
<span id="status">No Status</span>
<div>
#Ajax.ActionLink("Test", null, null,
new AjaxOptions
{
UpdateTargetId = "status",
Url = "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey"
})
</div>
but the url does not get invoked when i click on "Test" link.
I also tried:
<div>
<button value="get closest POI" onclick="testNominatim()"></button>
</div>
<script type="text/javascript">
function testNominatim() {
alert("called");
$.ajax(
{
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
contentType: "application/json; charset=utf-8",
dataType: "json",
failure: function (msg) {
alert(msg);
},
success: function (msg) {
alert(msg);
} });
function onGetNominator(msg) {
alert(msg);
}
</script>
When I click on button, message box shows but webservice does not get invoked.
I am probably missing something trivial but what is it?
TIA.
Edit 1 Changes to reflect actual script.

Answer 1

Using the second form would be my proposed solution. Note that the service requires a parameter named json_callback instead of the standard callback parameter for the callback function. This requires a bit of extra set up in the AJAX call.
Try the following. Note that I've changed the handler to apply it using code rather than in the markup. That's a better practice. I'm also using jQuery 1.7+. JSFiddle can be found at: http://jsfiddle.net/xVBBN/
<div>
<button>get closest POI</button>
</div>
<script type="text/javascript">
$(function() {
$('button').on('click',function() {
alert('called');
$.ajax({
type: 'GET',
url: 'http://open.mapquestapi.com/nominatim/v1/search?format=json&q=windsor+[castle]&addressdetails=1&limit=3&viewbox=-1.99%2C52.02%2C0.78%2C50.94&exclude_place_ids=41697',
dataType: 'jsonp',
jsonp: 'json_callback',
success: function(data) {
alert(data[0].place_id);
}
});
});
});
</script>

Answer 2

Try the following:
<div>
<button onclick="testNominatim()">get closest POI</button>
</div>
<script type="text/javascript">
function testNominatim() {
$.ajax({
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
dataType: "jsonp"
});
}
function onGetNominator(msg) {
alert(msg[0].place_id);
}
</script>
Things to notice (compared to your original code):
dataType: "jsonp"
you don't need a success callback because the success callback is your onGetNominator function
you don't need contentType: 'applicatin/json' because you are not sending a JSON request
or if you wanted to use an anonymous success callback:
<div>
<button onclick="testNominatim()">get closest POI</button>
</div>
<script type="text/javascript">
function testNominatim() {
$.ajax({
type: "GET",
url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=?&q=westminster+abbey",
dataType: "jsonp",
success: function (msg) {
alert(msg[0].place_id);
}
});
}
</script>
Things to notice (compared to your original code):
json_callback=? in the query string which will be replaced by jQuery with a random name allowing to invoke the anonymous success callback
you no longer need the onGetNominator function because we use the anonymous success callback
you don't need contentType: 'applicatin/json' because you are not sending a JSON request
And as far as the Ajax.ActionLink helper is concerned, I don't think that it support JSONP.