Databases
StackOverflow2013
Postsdbo
POAdd and remove checkbox events dynamically depending on some business logic?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd and remove checkbox events dynamically depending on some business logic?
    text
    copied!<p><strong>Scenario:</strong></p> <p>I have a results table with a checkbox, when the checkbox is checked, the content of the row(actually 2 columns concateneted only, are copied to a new div, with the job code and job name). This works pretty well, and I am avoiding duplicated already. However, in the new results div, I am creating an anchor tag to remove the div itself. After the div has been removed, I should be able to add the selected job again with the checkbox. Please note that there are many jobs in the results table, so putting the flag to false again will not work.</p> <p><em><strong>Also if you find a better title for this question, please let me know</em></strong></p> <pre><code> //On every checkbow that is clicked var flag = false; $("#ctl00_PlaceHolderMain_myGrid input").change(function () { if (this.checked &amp;&amp; flag === false) { flag = true; var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text() var jobName = $(this).parent().parent().parent().find("td:eq(1)").text() var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase(); AddSelectedJob(jobCode, displayvalue); //$(this).unbind('change'); //Unbind the change event so that it doesnt fire again FillSelectedJobs(); } }); //Add selected job in the results div function AddSelectedJob(id, display) { //create a div for every selected job $("[id$=ResultsDiv]").append('&lt;div class="selectedjobs" id=' + id + '&gt;' + display + '&lt;a href="javascript:;" onclick="removeSelectedJob(this)"&gt;Remove selected job&lt;/a&gt;&lt;/div&gt;'); } //Removes the selected job from the resutls div function removeSelectedJob(el) { $(el).parent().remove(); } </code></pre> <p>The generated html is like this:</p> <pre><code>&lt;div&gt; &lt;div style="height: 300px; overflow: auto; float: left"&gt; &lt;div&gt; &lt;table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;"&gt; &lt;tr style="color:White;background-color:#5D7B9D;font-weight:bold;"&gt; &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;&lt;th scope="col"&gt;JobCode&lt;/th&gt;&lt;th scope="col"&gt;JobName&lt;/th&gt;&lt;th scope="col"&gt;JobPartner&lt;/th&gt;&lt;th scope="col"&gt;JobManager&lt;/th&gt;&lt;th scope="col"&gt;ClientName&lt;/th&gt; &lt;/tr&gt;&lt;tr style="color:#333333;background-color:#F7F6F3;"&gt; &lt;td&gt; &lt;input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" /&gt; &lt;/td&gt;&lt;td&gt;jobcode01&lt;/td&gt;&lt;td&gt;jobname&lt;/td&gt;&lt;td&gt;xx&lt;/td&gt;&lt;td&gt;xx&lt;/td&gt;&lt;td&gt;xx&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="margin-top: 0px; margin-left: 10px; float: left"&gt; &lt;span&gt;Selected :&lt;/span&gt; &lt;div id="ResultsDiv" style="margin-top: 0px"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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