Member Avatar for yankeefan24

Image attached

imagen.jpg 30.28 KB
Member Avatar for diafol

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.

Edited by diafol
Member Avatar for diafol

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.

Member Avatar for yankeefan24

This will work, but I will create a table of results for each set of dropdowns.

Member Avatar for diafol

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

Member Avatar for yankeefan24

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

Member Avatar for diafol

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.

Edited by diafol
Member Avatar for diafol

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.

http://jsfiddle.net/diafol666/44Yhq/5/

Member Avatar for TomH.PG

// Edit

Edited by TomH.PG because: //missed new replies
Member Avatar for yankeefan24

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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability1" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability5" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability2" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability4" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability3" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability7" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability4" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&nbsp;</div>
	
</div>

<div class="grid_2">
	<label class="hidden datefield" ><cf_yrmc_datepicker name="date-JobAccountability8" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</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">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Job Accountability 2</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Job Accountability 3</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Job Accountability 4</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Job Accountability 5</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Job Accountability 6</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
			<tr><td>Job Accountability 7</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
			<tr><td>Job Accountability 8</td><td class="toggle">&#10004;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

<div class="grid_3">
	<label class="hidden datefield" >Date<cf_yrmc_datepicker name="date-innovation" cssClass="controlsB">
	</label>
	<div class="spacer">&nbsp;</div>
</div>



<div class="grid_5">
	<label>Commitment to Serve &mdash; 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">&nbsp;</div>
 </div>
 
<div class="grid_3">
	<label class="hidden datefield" >Date<cf_yrmc_datepicker name="date_commitment" cssClass="controlsB">
	</label>
	<div class
Member Avatar for diafol

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.

Member Avatar for yankeefan24

The browser translates cfselect so I dont think that is the problem

Member Avatar for yankeefan24

Is it possible to tell the select statement where to place the checkmark in the table?>

Member Avatar for diafol

isn't that what the code does (x,y)? That was the whole point.

Member Avatar for yankeefan24

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

Member Avatar for diafol

Sorry I don't touch CF with a barge pole. Can't help you with it.

Member Avatar for yankeefan24

Looks like the problem is not the cfm, the problem is the orders of the filed on 960 grid system

Member Avatar for yankeefan24

Solve the problem I had to have a container _12 class for each of my sets

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.