JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

the original test case was at: <a href="http://loves.phase2online.com/jQueryJsonP.htm">
http://loves.phase2online.com/jQueryJsonP.htm</a> and no longer exists

<a id="Detail1" style="display: block;" href="#">Get Detail 1</a>
<a id="Detail2" style="display: block;" href="#">Get Detail 2</a>
<a id="Detail3" style="display: block;" href="#">Get Detail 3</a>

<h4>Detail from service:</h4>
<div id="Detail"></div>

JavaScript

function fetchLocationCallback(data) {
  var locationDetail = data;
  jQuery("#Detail").html(locationDetail.StoreNumber);
}

$(function () {
  jQuery("#Detail1").click(function () {
    jQuery.ajax({
      type: "GET",
      dataType: "jsonp",
      url: "http://lovesdatarest.phase2online.com/Locations/Detail/372",
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("error");
      },
      jsonpCallback: 'fetchLocationCallback'
    });
  });
  jQuery("#Detail2").click(function () {
    jQuery.ajax({
      type: "GET",
      dataType: "jsonp",
      url: "http://lovesdatarest.phase2online.com/Locations/Detail/345",
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("error");
      },
      jsonpCallback: 'fetchLocationCallback'
    });
  });
  jQuery("#Detail3").click(function () {
    jQuery.ajax({
      type: "GET",
      dataType: "jsonp",
      url: "http://lovesdatarest.phase2online.com/Locations/Detail/300",
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("error");
      },
      jsonpCallback: 'fetchLocationCallback'
    });
  });
});