appending HTML to a variable using jQuery -
i having trouble appending html onto end of table,
here code:
$('[data-custom="view_financiers"]').live('click', function(){ var product_id = $(this).closest('tr').attr('data-pid'); var supplier_id = $(this).closest('table').attr('data-custom'); var parent = $(this).closest('tr'); $(this).hide(); $.getjson("get.php", {pid:product_id, sid:supplier_id}, function(data){ var size = $(data).size(); if(data == null){ $(parent).after("<table width='70%' align='center'><tr><td colspan='14'><center><h3>sorry, supplier not have financiers.</h3></center></td></tr></table>"); }else{ var replacinghtml = "<tr colspan='15'><table width='100%' height='350' data-replaced='true' data-rep='"+product_id+"'><tr><th class='system_header'>financier name</th><th class='system_header'>address</th><th class='system_header'>contact number</th><th class='system_header'>fax number</th><th class='system_header'>email</th><th class='system_header'>region</th></tr></table></tr>"; $.each(data, function(i,json){ $(replacinghtml).find("[data-replaced='true']").append("<tr><td colspan='2'>"+json.financier_name+"</td><td colspan='2'>"+json.address+"</td><td colspan='2'>"+json.contact_number+"</td><td colspan='2'>"+json.fax_number+"</td><td colspan='2'>"+json.email+"</td><td colspan='2'>"+json.region+"</td><td class='view_hide' data-custom='view_hide'><u>hide</u></td></tr>"); }); $(parent).after(replacinghtml); } }); });
so trying append tr
onto table element , add after specified element, reason not working, , not getting errors in firebug.
any idea on be?
thanx in advance!
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('[data-custom="view_financiers"]').live('click', function () { var product_id = $(this).closest('tr').data('pid'); var supplier_id = $(this).closest('table').data('custom'); var parent = $(this).closest('tr'); $(this).hide(); var data = [{ "financier_name": "financier_name1", "address": "address1", "contact_number": "contact_number1", "fax_number": "fax_number1", "email": "email1", "region": "region1" }, { "financier_name": "financier_name2", "address": "address2", "contact_number": "contact_number2", "fax_number": "fax_number2", "email": "email2", "region": "region2" }, { "financier_name": "financier_name3", "address": "address3", "contact_number": "contact_number3", "fax_number": "fax_number3", "email": "email3", "region": "region3"}]; //$.getjson("get.php", { pid: product_id, sid: supplier_id }, function (data) { if (data === null && data.length === 0) { $(parent).after("<table width='70%' align='center'><tr><td colspan='14'><center><h3>sorry, supplier not have financiers.</h3></center></td></tr></table>"); } else { var replacinghtml = []; replacinghtml.push('<tr colspan="15"><table width="100%" height="350" data-replaced="true" data-rep="" + product_id + ""><tr><th class="system_header">financier name</th><th class="system_header">address</th><th class="system_header">contact number</th><th class="system_header">fax number</th><th class="system_header">email</th><th class="system_header">region</th></tr>'); $.each(data, function (i, entity) { replacinghtml.push("<tr><td colspan='2'>" + entity.financier_name + "</td><td colspan='2'>" + entity.address + "</td><td colspan='2'>" + entity.contact_number + "</td><td colspan='2'>" + entity.fax_number + "</td><td colspan='2'>" + entity.email + "</td><td colspan='2'>" + entity.region + "</td><td class='view_hide' data-custom='view_hide'><u>hide</u></td></tr>"); }); replacinghtml.push('</table></tr>'); $(parent).after(replacinghtml.join('')); } //}); }); }); </script> </head> <body> <table> <tr> <td> <table data-custom="2345"> <tr> <th colspan="15"> super market </th> </tr> <tr data-pid="1"> <td colspan="15"> <a data-custom="view_financiers">testing 1</a> </td> </tr> <tr data-pid="2"> <td colspan="15"> <a data-custom="view_financiers">testing 2</a> </td> </tr> </table> </td> </tr> </table> </body> </html>
Comments
Post a Comment