javascript - Passing ajax data item to the function -
i have ajax function below , want send item 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 + ' ' + item.from.currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockcol3 smalltxt">' + item.class + ' | ' + 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 not working, can 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"}]}
this approach work making minimum changes existing code. involve 2 things:
attaching custom data attributes dynamically generated buttons ref: http://html5doctor.com/html5-custom-data-attributes/
attaching event handler parent element of buttons buttons class-name selector context ref: http://api.jquery.com/on/
please see fiddle @ 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 + ' ' + item.from.currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockcol3 smalltxt">' + item.class + ' | ' + 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 event listener document element (or other parent element of buttons) $(document).on('click', '.btn-finder', function() { console.dir(json.parse(decodeuricomponent($(this).data('item')))); }); 
Comments
Post a Comment