javascript - Display one item of my choice rather than the whole list items in ajax upon success -
i've got ajax code, post reqeusts , displays results upon success. displayed results in json format , different website. result displays of list items, want display 1 item of choice @ same time, instead of displaying items. i've been trying use each() , slice() functions, think i'm not using them correctly or don't have idea of how deal problem. please help, i'm new ajax , jquery. code have:
jquery.ajax({ async:false, url : "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser", data: postdata, type : "post", datatype : "jsonp", jsonp: "jsoncallback", success : function(jsondata){ if (jsondata.product_display!=='') { /**the code below display items under div="product_dispay"*/ jquery('#product_display').append(jsondata.product_display); //i want code display 1 item of choice @ section. }else{ alert(jsondata.error); } }, error:function(){ alert('fail'); } });
you can access contents of #product_display element jquery. api returns html data can render in page, using jquery find data within html , whatever want it.
i have added code original code.
(function($){ var data = []; var creatik = null; $('#product_display .business_list').each(function(){ var price = $(this).find('p span.price').text(); var bld = $(this).find('p span.bld').text(); var img = $(this).find('.image_area img').prop('src'); //how check each logo if("creatick" === bld){ creatik = $(this).clone(); } data.push({ price: price, bld: bld, img: img }); }); //you can use data please console.log(data); //you can replace contents of #product_display container 1 logo want $('#product_display .business_detail').html(creatik); // })(jquery); this final code.
<!doctype html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></script> <script type="text/javascript"> function getbrandsbyuser(user) { var postdata = {user: user}; jquery.ajax({ async: false, url: "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser", data: postdata, type: "post", datatype: "jsonp", jsonp: "jsoncallback", success: function (jsondata) { console.log(jsondata); if (jsondata.product_display !== '') { jquery('#product_display').append(jsondata.product_display); (function($){ var data = []; var creatik = null; $('#product_display .business_list').each(function(){ var price = $(this).find('p span.price').text(); var bld = $(this).find('p span.bld').text(); var img = $(this).find('.image_area img').prop('src'); //how check each logo if("creatick" === bld){ creatik = $(this).clone(); } data.push({ price: price, bld: bld, img: img }); }); //you can use data please console.log(data); //you can replace contents of #product_display container 1 logo want $('#product_display .business_detail').html(creatik); // })(jquery); } else { alert(jsondata.error); } }, error: function () { alert('fail'); } }); } jquery(".image_area").each(function () { jquery(this).hover( function () { id = jquery(this).attr("rel"); jquery(this).children(".published_content_" + id).stop(true, true).fadein('slow', function () { jquery(this).children(".published_content_" + id).css("display", "block"); jquery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 1}, 400); }); }, function () { id = jquery(this).attr("rel"); jquery(this).children(".published_content_" + id).stop(true, true).fadeout('slow', function () { jquery(this).children(".published_content_" + id).css("display", "none"); jquery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 0}, 400); }); } ); }); </script> <script type="text/javascript"> jquery.noconflict(); jquery(document).ready(function () { getbrandsbyuser("sarfraz300"); }); </script> </head> <body> <div id="product_display"></div> </body> </html> i hope helps.
Comments
Post a Comment