CODEWITHSUNDEEP
javascriptjqueryajax
Milind
Milind

Reputation: 1955

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"}]}

Upvotes: 0

Views: 786

Answers (3)

sid-m
sid-m

Reputation: 1554

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'))));
});

Upvotes: 1

Ionut Necula
Ionut Necula

Reputation: 11472

You had some mistakes in your code, like item.To[city] who should be item.To.Title, also data.d.results should be data.results. Corrected them.

Also the problem why you are getting that error SyntaxError: missing ] after element list is because Find([object Object]) is not valid syntax.

So instead of javascript:Find(" + item + ") you would use javascript:Find(" + item.From.Title + ") for example.

A JSFIDDLE, and the code who you can run it from here too:

var html = '';
$.ajax({
  url: 'https://api.myjson.com/bins/1mkxw',
  method: "GET",
  headers: { "Accept": "application/json; odata=verbose" },
  async: false,
  success: function (data) {
    $.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' type='button' onclick='javascript:Find(" + item + ")' class='searchBtn wth150' href='#' value='Book now' /></div></div>";
    });
    $("#dvPromotion").empty();
    $("#dvPromotion").html(html);
  }
});

function Find(item) {
  console.dir(item)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dvPromotion'>

</div>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

I would recommend you to create HTML using jQuery method, Using this you can use .data(key, value) to store arbitrary data with element which will be stored in internal cache.

As you are generating elements dynamically, use Event Delegation using .on() delegated-events approach. In the event handler you can fetch the data using .data(key)

$.ajax({
    url: url,
    method: "GET",
    headers: {
        "Accept": "application/json; odata=verbose"
    },
    async: false,
    success: function(data) {
        $("#dvPromotion").empty();

        $.each(data.d.results, function(i, item) {
            var div = $('<div />', {
                    "class": "tileBlock"
                }).append($('<img />', {
                    src: "/PublishingImages/" + item.Title,
                    alt: item.To[city]
                }))
                .append($('<br />'));

            //Other elements

            var input = $('<input />', {
                name: "button",
                type: "button",
                class: "searchBtn wth150",
                value: "Book now"
            })

            input.data('item', item);
            div.append(input);
            $("#dvPromotion").append(div);
        });
    }
});

//Bind event handler
$("#dvPromotion").on('click', '.searchBtn', function() {
    var iten = $(this).data('item');
})

Upvotes: 0

Related Questions