Question

I have an order receipt page auto generated by our system. I need to add barcodes for each order number. I have the basis set up, but I am running into two problems.

1) The barcode is printing using the first order number each time. I need each order to print its own bar code right below. (orders are in sequential order, but sometimes can skip order numbers)

2) The jquery is running multiple times as the system is going to place the code after each order. I cannot remove the jquery after each order, so how can I make it only run once after all orders have been loaded to the single document.

Below is a small piece of the entire order. I have used table width and font size to declare the areas I need as the system did not give them ids or classes. The only nice thing is font size 3 is never used anywhere else and same as table width 180, so I believe I will be fine in both cases. Thank you for your help.

jQuery code

$("table[width='180']").after("<img id='bar_code'");

$('img#bar_code').attr('src', 'http://www.barcodesinc.com/generator/image.php?code=' + $("font[size='3']").children().html() + '&style=197&type=C128B&width=150&height=50&xres=1&font=3');

HTML code

    <table width=180 border=0 cellpadding=0 cellspacing=0>
    <tr> 
        <td width=90 align=left colspan="2"><b><font style="font-size:18px;font-weight:bold;">PACKING SLIP</font></b></td>
    </tr>
    <tr> 
        <td width=90 align=left><b>Date:</b></td>
        <td width=90><b>Order#:</b></td>
    </tr>
    <tr> 
        <td width=75 align=left> 05/17/2011 </td>
        <td><font size=3><b>10122</b></font></td>
    </tr>
</table>
<br><br><br>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("table[width='180']").after("<img id='bar_code'");

$('img#bar_code').attr('src', 'http://www.barcodesinc.com/generator/image.php?code=' + $("font[size='3']").children().html() + '&style=197&type=C128B&width=150&height=50&xres=1&font=3');
</script>

    <table width=180 border=0 cellpadding=0 cellspacing=0>
    <tr> 
        <td width=90 align=left colspan="2"><b><font style="font-size:18px;font-weight:bold;">PACKING SLIP</font></b></td>
    </tr>
    <tr> 
        <td width=90 align=left><b>Date:</b></td>
        <td width=90><b>Order#:</b></td>
    </tr>
    <tr> 
        <td width=75 align=left> 05/17/2011 </td>
        <td><font size=3><b>10123</b></font></td>
    </tr>
</table>
<br><br><br>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("table[width='180']").after("<img id='bar_code'");

$('img#bar_code').attr('src', 'http://www.barcodesinc.com/generator/image.php?code=' + $("font[size='3']").children().html() + '&style=197&type=C128B&width=150&height=50&xres=1&font=3');
</script>


    <table width=180 border=0 cellpadding=0 cellspacing=0>
    <tr> 
        <td width=90 align=left colspan="2"><b><font style="font-size:18px;font-weight:bold;">PACKING SLIP</font></b></td>
    </tr>
    <tr> 
        <td width=90 align=left><b>Date:</b></td>
        <td width=90><b>Order#:</b></td>
    </tr>
    <tr> 
        <td width=75 align=left> 05/17/2011 </td>
        <td><font size=3><b>10124</b></font></td>
    </tr>
</table>
<br><br><br>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("table[width='180']").after("<img id='bar_code'");

$('img#bar_code').attr('src', 'http://www.barcodesinc.com/generator/image.php?code=' + $("font[size='3']").children().html() + '&style=197&type=C128B&width=150&height=50&xres=1&font=3');
</script>


    <table width=180 border=0 cellpadding=0 cellspacing=0>
    <tr> 
        <td width=90 align=left colspan="2"><b><font style="font-size:18px;font-weight:bold;">PACKING SLIP</font></b></td>
    </tr>
    <tr> 
        <td width=90 align=left><b>Date:</b></td>
        <td width=90><b>Order#:</b></td>
    </tr>
    <tr> 
        <td width=75 align=left> 05/17/2011 </td>
        <td><font size=3><b>10127</b></font></td>
    </tr>
</table>
<br><br><br>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("table[width='180']").after("<img id='bar_code'");

$('img#bar_code').attr('src', 'http://www.barcodesinc.com/generator/image.php?code=' + $("font[size='3']").children().html() + '&style=197&type=C128B&width=150&height=50&xres=1&font=3');
</script>

Answer 1

I know it’s a bit late, but I was browsing through unanswered questions and noticed you forgot to close your image tags. In your script, by changing this:

$("table[width='180']").after("<img id='bar_code'");

to this:

$("table[width='180']").after("<img id='bar_code'>");

The script works perfectly…