Well it looks to me like it starts on JobAcc2, then to JobAcc6, to JobAcc3 then to JobAcc7.
So the order in which you place the dropdowns is important
If you've used a table for the dropdowns, this is probably the issue. If you place the dropdowns into two div columns instead, then this issue should go away.
<div>
select1
select2
select3
...
</div>
<div>
select6
select7
select8
...
</div>
That means in the DOM, select2 is after select1 (with floated divs, this gives the 'reverse N' pattern)
Whereas in a table:
<table>
<tr><td>select1</td><td>select6</td></tr>
<tr><td>select2</td><td>select7</td></tr>
<tr><td>select3</td><td>select8</td></tr>
</table>
select6 is after select1 and only then do we get select2 ('Z' pattern)
Why the first set of dropdowns aren't included, I couldn't say without seeing the code of the whole page.
In response to your other thread, which discusses the same sort of issue:
http://jsfiddle.net/diafol666/44Yhq/1/
I suggest you carry on with just the one thread, if the issues are the same.
This will work, but I will create a table of results for each set of dropdowns.
OK, like: http://jsfiddle.net/diafol666/44Yhq/3/
I'm getting untidy now with fiddles for the row due to separate tables. Can't think :( Been doing the garden (aka jungle) all day and I'm bleeding all over the place. Anyway...
Cool, I need to work in my garden too but is like 115 dregrees outside.. For some reason the last dropdown in set 1 and 2 is not working. The checkmark is not changing places based on selection
OK fixed: http://jsfiddle.net/diafol666/44Yhq/4/
I had the row conditionals wrong 5 and 10 instead of 4 and 9! Mind this is a fudge - I don't like it as it's not clean.
OK, conditionals taken out by the introduction of parent index for the dropdowns class. Also included space for questions in the answers table, so that it can be 'usable'. SO it should be 'clean' now - no manual fiddling with the js if you need to add another bank of questions.
Thanks it works fine in an HTML document. as soon as I add the code to my cfm file. The select dont work, it adds the selection to different result tables. file attached
<cfset disableCftextarea="false">
<cfif URL.section neq "B">
<script>
$(document).ready(function() {
$('.controlsB').attr('disabled','disabled')
});
</script>
<cfset disableCftextarea="true">
</cfif>
<div class="grid_12">
<label class="title">Section B: To Be Completed by Supervisor
</label>
</div>
<div class="grid_12">
<label>Primary Accountabilities [Review Job Description to determine total number of Primary Accountabilities - discuss performance with incumbent.]
</label>
<div class="spacer"> </div>
</div>
<div class="grid_12">
<label>Select number of primary accountabilities which you rated
as Fully Successful, Exceptional, or Needs Improvement. If Needs Improvement is selected, note date of formal
documented counseling(s):
</label>
<div class="spacer"> </div>
</div>
<div class="clear"></div>
<div class="grid_2">
<label>Job Accountability 1
</label>
</div>
<div class="grid_2 dropdowns">
<select class="rating JobAccountability1 controlsB " name="JobAccountability1" id="data">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</select>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability1" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label>Job Accountability 5
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability5 controlsB" name="JobAccountability5" id="data2">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability5" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="clear"></div>
<div class="grid_2">
<label>Job Accountability 2
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability2 controlsB" name="JobAccountability2" id="data3">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability2" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label>Job Accountability 6
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability6 controlsB" name="JobAccountability6" id="data4">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability4" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="clear"></div>
<div class="grid_2">
<label>Job Accountability 3
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability3 controlsB" name="JobAccountability3" id="data5">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability3" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label>Job Accountability 7
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability7 controlsB" name="JobAccountability7" id="data6">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability7" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="clear"></div>
<div class="grid_2">
<label>Job Accountability 4
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability4 controlsB" name="JobAccountability4" id="data7">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability4" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label>Job Accountability 8
</label>
</div>
<div class="grid_2 dropdowns">
<cfselect class="rating JobAccountability8 controlsB" name="JobAccountability8" id="data8">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_2">
<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability8" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="clear"></div>
<div class="clearFix"></div>
<div class="grid_12">
<table border="1">
<tr><th>Question</th><th>Unanswered</th><th>Fully Successful</th><th>Exceptional</th><th>Needs Improvement</th></tr>
<tr><td>Job Accountability 1</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 2</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 3</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 4</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 5</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 6</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 7</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
<tr><td>Job Accountability 8</td><td class="toggle">✔</td><td></td><td></td><td></td></tr>
</table>
</div>
<div class="grid_12">
<label>If Fully Successful or Exceptional: <br />
<cfif disableCftextarea>
<cfoutput>
<p class="disabledTextarea">#review.supervisorCommentsFSuccessfulExceptional#</p>
</cfoutput>
<cfelse>
<cfoutput>
<cftextarea class="controlsB" name="SupervisorCommentsFSuccessfulExceptional" richtext="true" toolbar="Basic" rows="6" cols="40" maxlength="3" validate="maxlength">
</cftextarea>
</cfoutput>
</cfif>
</label>
<div class="spacer"> </div>
</div>
<div class="grid_12">
<label>If needs improvement, document most recent coaching / counselling and dates of written documentation: <br />
<cfif disableCftextarea>
<cfoutput>
<p class="disabledTextarea">#review.supervisorCommentsNeedsImprovement#</p>
</cfoutput>
<cfelse>
<cfoutput>
<cftextarea class="controlsB" name="SupervisorCommentsNeedsImprovement" richtext="true" toolbar="Basic"rows="6" cols="40">
</cftextarea>
</cfoutput>
</cfif>
</label>
<div class="spacer"> </div>
</div>
<div class="grid_12">
<label>
<strong>Note: To be an overall exceptional in primary accountabilities, employee must have demonstrated measurable performance for more than 50% of his/her job accountabilities. If Exceptional raiting is attained, Vice President approval is required.
</strong>
</label>
<div class="spacer"> </div>
</div>
<div class="grid_12">
<label class="title">Organizational Accountabilities
</label>
</div>
<div class="grid_12">
<label>Select Fully Successful, Exceptional or Needs Improvement. If Needs Improvement is selected, note date of formal document counseling(s)
</label>
<div class="spacer"> </div>
</div>
<div class="grid_5">
<label>Quality and Innovation in Everything We Do
</label>
</div>
<div class="grid_4" dropdowns>
<cfselect class="rating controlsB" name="grade2" id="data9">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_3">
<label class="hidden datefield" >Date<cf_yrmc_datepicker name="date-innovation" cssClass="controlsB">
</label>
<div class="spacer"> </div>
</div>
<div class="grid_5">
<label>Commitment to Serve — Our Patients & Our Community
</label>
</div>
<div class="grid_4 dropdowns">
<cfselect class="rating controlsB" name="grade3" id="data10">
<option value="">Please Select...</option>
<option value="1">Fully Successful</option>
<option value="2">Exceptional</option>
<option value="3">Needs Improvement</option>
</cfselect>
<div class="spacer"> </div>
</div>
<div class="grid_3">
<label class="hidden datefield" >Date<cf_yrmc_datepicker name="date_commitment" cssClass="controlsB">
</label>
<div class
Well, from what I can see you have <cfselect> not <select>, so I wouldn't expect jQuery to work with it if using $('select').change(). Maybe I'm wrong.
The browser translates cfselect so I dont think that is the problem
Is it possible to tell the select statement where to place the checkmark in the table?>
isn't that what the code does (x,y)? That was the whole point.
I guess it just does not make any sense to my why when I add the function to my coldfusion page nothing works like is suppose to
Sorry I don't touch CF with a barge pole. Can't help you with it.
Looks like the problem is not the cfm, the problem is the orders of the filed on 960 grid system
Solve the problem I had to have a container _12 class for each of my sets
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.