Databases
StackOverflow2013
Postsdbo
POJQuery adding HTML using .after possible ID conflicts
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery adding HTML using .after possible ID conflicts
    primarykey
    data
    text
    <p>I'm adding html to a page on button click. The displayed HTML has an additional button that adds HTML on button click. After adding the "primary HTML" twice, if I click the secondary button from the first instance of the primary HTML added, it adds HTML to the second instance of the primary HTML added.</p> <p>I think it's an ID conflict. I'm pulling my hair out over it. </p> <p>Here is a jsfiddle showing the issue.</p> <p><a href="http://jsfiddle.net/JXeMS/19/" rel="nofollow">http://jsfiddle.net/JXeMS/19/</a></p> <p>To create the issue: Add a product, add 2-3 tiers, Add the product a second time, add 2-3 tiers. Finally, add a new tier from the first added product, and it adds the tier to the second added product. Doh!</p> <p>JQuery code</p> <pre><code>$(document).ready(function() { var cainc = 1; var afrinc=1; var mfrinc=1; var mfralinc=1; var earinc=1; var minmcinc=1; var maxmcinc=1; var parinc=1; var maapinc=1; var eprinc=1; var pprinc=1; var minscinc=1; var maxscinc=1; $('#productbtn').on('click', function() { if ($('#prodselect option:selected').text() == "Commercial Attachments"){ $('#productbtn').closest( "tr" ).after('&lt;tr id="comattach0'+comtrinc+'"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr name="commercial" id="comattach1"&gt;&lt;td ALIGN=left colspan=4&gt;&lt;input id="buttonremc" type="button" style="width: 110px; height: 22px;" value="Remove Product"&gt;&lt;font size=4&gt;&lt;b&gt;&lt;font color="#ADD8E6"&gt;Product: &amp;nbsp;Commercial Attachments&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr id="comattach2"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;TR id="comattach3"&gt;&lt;td align=left&gt;&lt;font color="#ADD8E6"&gt;Activity Type:&lt;/td&gt;&lt;td align=left&gt;&lt;select name="caacttype'+ (cainc++) +'" style="width:87px;"&gt;&lt;option&gt;&lt;/option&gt;&lt;option value="send"&gt;Send&lt;/option&gt;&lt;option value="rec"&gt;Receive&lt;/option&gt;&lt;option value="view"&gt;View&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Monthly Commission Percentage:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="mthcom" maxlength=3 size=10 value="00"&gt;&lt;/TD&gt;&lt;tr id="comattach4"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;TR id="comattach5"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Annual Flat Rate:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="afr'+ (afrinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Monthly Flat Rate:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="mfr'+ (mfrinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TR id="comattach6"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Monthly Flat Rate Attachment Limit:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="mfral'+ (mfralinc++) +'" size=10 &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Excess Attachment Rate:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="ear'+ (earinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;tr id="comattach7"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;TR id="comattach11"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Minimum Monthly Charge:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="minmc'+ (minmcinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Maximum Monthly Charge:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="maxmc'+ (maxmcinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;tr id="comattach15"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;TR id="comattach8"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Per Attachment Rate:&lt;/td&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="par'+ (parinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;td colspan=2&gt;&amp;nbsp;&lt;/td&gt;&lt;TR id="comattach10"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Maximum Allowed Attachment Pages:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="maap'+ (maapinc++) +'" size=10 &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Excess Page Rate:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="epr'+ (eprinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;tr id="comattach12"&gt;&lt;td colspan=4&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr id="comattach13"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Per Page Rate:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="ppr'+ (pprinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;td colspan=2&gt;&amp;nbsp;&lt;/td&gt;&lt;TR id="comattach14"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Minimum Submission Charge:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="minsc'+ (minscinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Maximum Submission Charge:&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="maxsc'+ (maxscinc++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;tr id="comattach9"&gt;&lt;td colspan=4&gt;&lt;input id="addtiercom" type="button" style="width: 110px; height: 22px;" value="Add Tier"&gt;&lt;/td&gt;&lt;/tr&gt;'); var raisetierid = 1; var rateplus = 1; var rangeplus = 1; var catierrate = 1; var rangemin = 1; var rangemax = 1; $('#addtiercom').on('click', function() { $('#addtiercom').closest( "tr" ).after('&lt;tr id="commtier1"&gt;&lt;td colspan=4&gt;&lt;input id="addnewtier" type="button" style="width: 110px; height: 20px;" value="Add Tier" &gt;&amp;nbsp;&amp;nbsp;&lt;input id="removetiercom" type="button" style="width: 110px; height: 20px;" value="Remove Tier" &gt;&lt;/td&gt;&lt;/tr&gt;&lt;TR id="commtier2"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Tier Type&lt;/TD&gt;&lt;TD ALIGN=left colspan=3&gt;&amp;nbsp;&amp;nbsp;Attachments&lt;input type="radio" name="brackettype" value="a"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Pages&lt;input type="radio" name="brackettype" value="p"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Offices&lt;input type="radio" name="brackettype" value="o"&gt;&lt;/TD&gt;&lt;tr id="inctier'+(raisetierid++)+'"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Tier '+ (rateplus++) +' Rate&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Tier '+ (rangeplus++) +' Range&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Minimum&amp;nbsp;&lt;input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" &gt;&lt;font color="#ADD8E6"&gt;&amp;nbsp;Maximum&amp;nbsp;&lt;input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" &gt;&lt;/TD&gt;&lt;/tr&gt;'); $('#comattach9').hide(); $('#addnewtier').on('click', function() { $('#inctier'+(raisetierid-1)+'').closest( "tr" ).after('&lt;tr id="inctier'+(raisetierid++)+'"&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Tier '+ (rateplus++) +' Rate&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" &gt;&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Tier '+ (rangeplus++) +' Range&lt;/TD&gt;&lt;TD ALIGN=left&gt;&lt;font color="#ADD8E6"&gt;Minimum&amp;nbsp;&lt;input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" &gt;&lt;font color="#ADD8E6"&gt;&amp;nbsp;Maximum&amp;nbsp;&lt;input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" &gt;&lt;/TD&gt;'); }); }); } }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USkyle
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COHoly columns! You should consider using a templating library (Mustache, Underscore, jQuery Templates, etc.) when constructing HTML elements.
      singulars
      1. POJQuery adding HTML using .after possible ID conflicts
      1. USpdoherty926
    2. COCan you confirm if all IDs are unique through DOM inspection (possibly via Firebug)? IDs have to be unique among elements. Classes, however, can be reused.
      singulars
      1. POJQuery adding HTML using .after possible ID conflicts
      1. USPaul Calabro
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload