Milind Milind - 27 days ago 11
Ajax Question

Passing ajax data item to the function

I have ajax function as below and I want to send item to the find function

$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
async: false,
success: function (data) {
$.each(data.d.results, function (i, item) {
html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To[city] + '" /><br>';
html += '<div class="blockCol1 greyLabel">' + item.To[city] + '</div><div class="blockCol2 fareTxt">' + item.Cost + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + item.Trip + '</div><br><div style="clear: both;"></div>';
html += '<div class="btnHolder"><input name="button" type="button" onclick="javascript:Find(' + item + ')" class="searchBtn wth150" h ref"#" value="Book now" /></div></div>';
});
$("#dvPromotion").empty();
$("#dvPromotion").html(html);
}
});


My find function

function Find(item) {
console.dir(item)
}


But it is not working, can somebody guide me

Update

MY JSON

{"results":[{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","etag":"\"4\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"dffa96c4-1b04-419a-991c-0913640152c4","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4302885c-0545-4cbf-9771-8cea409b4d98","type":"SP.Data.StationsListItem"},"Title":"Abu Dhabi"},"Title":"abuDhabi.jpg","Class":"economy","Trip":"RT","Cost":"60"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"f57e53d4-d576-4be7-a141-2357c4287013","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"383e7bfd-cf17-4fc4-b115-03ceaeb71db9","type":"SP.Data.StationsListItem"},"Title":"Bangalore"},"Title":"banglore.jpg","Class":"economy","Trip":"RT","Cost":"99"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"09ab5da0-8c92-437c-974d-111f31f9cb51","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"24a99e65-fef4-452d-9879-9110b4b2e1bf","type":"SP.Data.StationsListItem"},"Title":"Beirut"},"Title":"beirut.jpg","Class":"economy","Trip":"RT","Cost":"56"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"8c9fb3d0-1f9e-44c7-9921-bb5fa63a929f","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"efb0db77-3dfd-42d7-9bb5-3b9733ac68be","type":"SP.Data.StationsListItem"},"Title":"Cairo"},"Title":"cairo.jpg","Class":"economy","Trip":"RT","Cost":"79"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"70a824cc-a12f-4d6f-ba58-7f67a9ac439b","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4bcb5bd1-e49e-430d-9091-5edda2d6ccbc","type":"SP.Data.StationsListItem"},"Title":"Colombo"},"Title":"colombo.jpg","Class":"economy","Trip":"RT","Cost":"92"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"48314626-626e-433d-bea2-bb404b525629","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"77511f79-1dd1-466c-a66c-06a4c3bd6946","type":"SP.Data.StationsListItem"},"Title":"Delhi"},"Title":"delhi.jpg","Class":"economy","Trip":"RT","Cost":"88"}]}

Answer

This approach will work with making minimum changes to your existing code. Basically it will involve two things:

  1. Attaching custom data attributes to your dynamically generated buttons Ref: http://html5doctor.com/html5-custom-data-attributes/

  2. Attaching an event handler to a parent element of your buttons with your buttons class-name as selector context Ref: http://api.jquery.com/on/

Please see the fiddle at https://jsfiddle.net/y0bafvvt/

$.ajax({
  url: 'https://api.myjson.com/bins/1mkxw',
  method: "GET",
  headers: { "Accept": "application/json; odata=verbose" },
  async: false,
  success: function (data) {
    let html;
    $.each(data.results, function (i, item) {
      html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>';
      html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
      html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + item.Trip + '</div><br><div style="clear: both;"></div>';
      html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>';
    });
    $("#dvPromotion").empty();
    $("#dvPromotion").html(html);
  }
});

// Attach an event listener to the document element (or any other parent element of your buttons)
$(document).on('click', '.btn-finder', function() {
  console.dir(JSON.parse(decodeURIComponent($(this).data('item'))));
});