appending HTML to a variable using jQuery

appending HTML to a variable using jQuery

by Thulasi Ram.S

HTML

<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>

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, this supplier does not have the 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'>"...