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>