1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Dynamic checkboxes - creating checkbox submenu

Discussion in 'Programming' started by lespaul00, Dec 9, 2007.

0
Page 2 of 2
  1. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #21
    One problem is the code is missing the QoQ in my last post. Remember I said you can't just output the brands query? That will just output all brands for every ingredient. You have to run a QoQ, inside the query loop, to get only the brands for the current #Ingredient_ID# in the outer loop. Make sense?

    Does the "checked" value effect what we're discussing here?

    
<cfif getIngredients.checked eq "1">
    checked="checked" 
</cfif>
    Code (markup):
     
    cfStarlight, Dec 12, 2007 IP
  2. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Right. I must have deleted that in my code:

    
<!---this query will only pull ingredients that are not labeled as brands – AKA parent ingredients--->
<cfquery name="getIngredients" datasource="mydatabase">
SELECT it.Type, i.ingredient_id, i.ingredient, i.checked, i.BRAND_ID
FROM   TBLINGREDIENTS AS i INNER JOIN TBLINGREDIENTTYPES it
	ON i.IngredientType_Id = it.IngredientType_Id
WHERE BRAND_ID = 0
ORDER BY it.Type, i.ingredient
</cfquery>
<!---this query will pull the brands (which are actually independent ingredient records in the database themselves) per for each parent ingredient--->

<cfquery name="getbrands" datasource="mydatabase">
SELECT INGREDIENT_ID, INGREDIENT, BRAND_ID
FROM TBLINGREDIENTS
WHERE BRAND_ID > 0
ORDER BY INGREDIENT_ID, BRAND_ID
</cfquery>

<form method="post" action="what_can_i_make_results.cfm">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<cfoutput query="getIngredients" group="type">
   <tr>
        <th colspan="3" align="left">#Type#</th>
   </tr>

   <tr>
        <cfset typeRow = 1>
        <cfoutput>
        <td width="33%">
               <input type="checkbox" 
					   <cfif getIngredients.checked eq "1">
						checked="checked" 
						</cfif>
			<input name="ingredient_id" value="#getIngredients.INGREDIENT_ID#" size="50" [COLOR="Red"]onClick="toggle(brands);">#[/COLOR]getIngredients.INGREDIENT#
					<div style="display: block" name="brands">
			        <cfquery name="getIngredientBrands" dbtype="query">
					SELECT  INGREDIENT_ID, INGREDIENT 
					FROM    getbrands
					WHERE   BRAND_ID = #getIngredients.INGREDIENT_ID#
					</cfquery>
			     	<cfif getIngredientBrands.recordCount GT 0>

           			<cfloop query="getIngredientBrands">

                 	<input type="checkbox" name="INGREDIENT_ID" value="#INGREDIENT_ID#" size="50">#INGREDIENT#
					</div>
           			</cfloop>
     				</cfif>
        </td>

        <cfif typeRow mod 3 eq 0>
   </tr> 
   <tr>
        </cfif>
        <cfset typeRow = typeRow + 1 />
        </cfoutput>
   </tr>
</cfoutput>
</table>
   <input name="submit" type="submit" value="Find Recipes!" />
</form>
    Code (markup):
    The portion in red seems to not work.

    It is looking good here. The brands display below their respective parent ingredients. However, that's the problem - they show whether the parent ingredient is checked or not.

    Therefore, I think the toggle visibility needs tweaking. I tried finding code online with no luck. (display hidden, none, visibility.etc)



    No. This is just simple code that allows me to have certain ingredients already checked by default.
     
    lespaul00, Dec 12, 2007 IP
  3. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    I found this online:

    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
    Code (markup):
    The above code is placed below the <body> tag. Then, onclick will toggle the visibility of any div that you ask it to. by...

    <td width="33%">
               <input type="checkbox" 
					   <cfif getIngredients.checked eq "1">
						checked="checked" 
						</cfif>
			    name="ingredient_id" value="#getIngredients.INGREDIENT_ID#" size="50" onclick="toggle_visibility('brands');">#getIngredients.INGREDIENT#
					<div id="brands">
			        <cfquery name="getIngredientBrands" dbtype="query">
					SELECT  INGREDIENT_ID, INGREDIENT 
					FROM    getbrands
					WHERE   BRAND_ID = #getIngredients.INGREDIENT_ID#
					</cfquery>
			     	<cfif getIngredientBrands.recordCount GT 0>

           			<cfloop query="getIngredientBrands">

                 	<input type="checkbox" name="INGREDIENT_ID" value="#INGREDIENT_ID#" size="50">#INGREDIENT#
					</div>
           			</cfloop>
     				</cfif>
        </td>
    Code (markup):
    but the div appears regardless still!
     
    lespaul00, Dec 12, 2007 IP
  4. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #24
    I don't see anything in red, but their initial state should be "none" instead of "block" (ie visible). The OnClick event of the parent box should trigger their visibility.

    Wouldn't that effect which brands are visible? You may need to adjust the initial state of the brand <divs>
     
    cfStarlight, Dec 12, 2007 IP
  5. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #25
    Yes, you are correct. However, I applied this for only one ingredient, which does not have any brands associated with it.

    So, it should be ok, right?

    Still no luck
     
    lespaul00, Dec 12, 2007 IP
  6. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #26
    Yes, it would be ok. But I would probably fix it now, so it doesn't surprise you later if you forget about it and change some of the db values.

    Two things about the toggle(..) function: All of the <div> elements need to have an "ID" (not a name). That's how the javascript identifies them. Also, the "ID" for each element must be unique. Without these two things the javascript won't work. Since ingredient and BRAND_ID are the same, you can use them like this

    <!--- parent checkbox --->
    <input type="checkbox"
    value="#INGREDIENT_ID#"
    onClick="toggle('brandDiv_#INGREDIENT_ID#')" ...>

    <!--- brand div/checkboxes --->
    <div ID="brandDiv_#BRAND_ID#"....>
    ... stuff
    </div>

    Also, consider using the function in my original example instead. The advantage is it "links" the visibility state to the state of the checkbox. So there is no way they can get out of synch.
     
    cfStarlight, Dec 12, 2007 IP
  7. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #27
    Do you mean the onClick="toggle(brands);" rather than the toggle_visibility javascript i found online?

    When I execute my code (even with this change) the brands still appear, and there is no toggle functionality.

    Was there an additional java script code you are referring to that defines the "toggle" function, or, is this a universal function?

    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<!---this query will only pull ingredients that are not labeled as brands – AKA parent ingredients--->
<cfquery name="getIngredients" datasource="mydatabase">
SELECT it.Type, i.ingredient_id, i.ingredient, i.checked, i.BRAND_ID
FROM   TBLINGREDIENTS AS i INNER JOIN TBLINGREDIENTTYPES it
	ON i.IngredientType_Id = it.IngredientType_Id
WHERE BRAND_ID = 0
ORDER BY it.Type, i.ingredient
</cfquery>
<!---this query will pull the brands (which are actually independent ingredient records in the database themselves) per for each parent ingredient--->

<cfquery name="getbrands" datasource="mydatabase">
SELECT INGREDIENT_ID, INGREDIENT, BRAND_ID
FROM TBLINGREDIENTS
WHERE BRAND_ID > 0
ORDER BY INGREDIENT_ID, BRAND_ID
</cfquery>
	
<form method="post" action="what_can_i_make_results.cfm">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<cfoutput query="getIngredients" group="type">
   <tr>
        <th colspan="3" align="left">#Type#</th>
   </tr>

   <tr>
        <cfset typeRow = 1>
        <cfoutput>
        <td width="33%">
<input type="checkbox" 
		   <cfif getIngredients.checked eq "1">
			checked="checked" 
			</cfif>
	name="ingredient_id" value="#getIngredients.INGREDIENT_ID#" size="50" onclick="toggle('brandDiv_#INGREDIENT_ID#');">#getIngredients.INGREDIENT#
		<div style="display:none;" id="brandDiv_#BRAND_ID#">
		<cfquery name="getIngredientBrands" dbtype="query">
		SELECT  INGREDIENT_ID, INGREDIENT 
		FROM    getbrands
		WHERE   BRAND_ID = #getIngredients.INGREDIENT_ID#
		</cfquery>
		<cfif getIngredientBrands.recordCount GT 0>

		<cfloop query="getIngredientBrands">

		<input type="checkbox" name="INGREDIENT_ID" value="#INGREDIENT_ID#" size="50">#INGREDIENT#
		</div>
		</cfloop>

		</cfif>

</td>

<cfif typeRow mod 3 eq 0>
   </tr> 
   <tr>
        </cfif>
        <cfset typeRow = typeRow + 1 />
        </cfoutput>
   </tr>
</cfoutput>
</table>
   <input name="submit" type="submit" value="Find Recipes!" />
</form>
    Code (markup):
     
    lespaul00, Dec 12, 2007 IP
  8. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #28
    1. Truthfully, I've no idea where you're getting toggle(brands) from ;). I highlighted it because that's what you had your previous post (in red)

    2. It probably doesn't work because your code doesn't contain a javascript function named "toggle"

    3. No I was referring to my original example here
    http://forums.digitalpoint.com/showpost.php?p=5588374&postcount=14
     
    cfStarlight, Dec 12, 2007 IP
  9. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #29
    Haha... man, I went around in a circle.

    I included the javascript code:

    <script type="text/javascript">
	function toggleBrands(parentId, makeVisible) {
		var divElement = document.getElementById('ingredientBrands_'+ parentId);
		if (divElement) {
			divElement.style.display = ( makeVisible ? 'block' : 'none')
		}
	}
</script>
    Code (markup):

    Now I guess finally, i'm wondering if the original toggle code is appropriate:

    <input type="checkbox" value="23" onClick="toggleBrands([COLOR="red"]this.value, this.checked[/COLOR]);"> INGREDIENT23
    Code (markup):
    Or, if it should remain what we previously discussed:

    <input type="checkbox" 
		   <cfif getIngredients.checked eq "1">
			checked="checked" 
			</cfif>
	name="ingredient_id" value="#getIngredients.INGREDIENT_ID#" size="50" onClick="toggleBrands([COLOR="Red"]'brandDiv_#INGREDIENT_ID#'[/COLOR]);">#getIngredients.INGREDIENT#
    Code (markup):
    I can see where the first option pulls essentially the BRAND_ID for the toggle function. But, from you last post, we need independent divs,... making me think the second one should be used.

    Yeah, and the first one was just an example you used. I couldn't use "23" as a "value" for it. It'd have to be #getIngredients.INGREDIENT_ID# to be able to pull ALL of the parent ingredients. Correct?
     
    lespaul00, Dec 13, 2007 IP
  10. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #30
    I got it to work!!!

    But, I used a different javascript code. I'm sure your's works, but I guess I just wasn't implementing it correctly.

    This is what I did:

    <script type="text/javascript">
	function toggleBrands(id, show) {
 document.getElementById(id).style.display=(show)?'':'none';
}

</script>
    Code (markup):
    Then,...

            <td width="33%">
<input type="checkbox" 
		   <cfif getIngredients.checked eq "1">
			checked="checked" 
			</cfif>
	name="ingredient_id" value="#getIngredients.INGREDIENT_ID#" size="50" onclick="toggleBrands('brandDiv_#INGREDIENT_ID#', this.checked)">#getIngredients.INGREDIENT#
		<div id="brandDiv_#INGREDIENT_ID#" style="display:none;">
			<cfquery name="getIngredientBrands" dbtype="query">
			SELECT  INGREDIENT_ID, INGREDIENT 
			FROM    getbrands
			WHERE   BRAND_ID = #getIngredients.INGREDIENT_ID#
			</cfquery>
			<cfif getIngredientBrands.recordCount GT 0>
	
			<cfloop query="getIngredientBrands">
	
			<input type="checkbox" name="INGREDIENT_ID" value="#INGREDIENT_ID#" size="50">#INGREDIENT#
		</cfloop>
		</cfif>
		</div>
</td>
    Code (markup):
    Thank you for all the help. It's very much appreciated!
     
    lespaul00, Dec 13, 2007 IP
  11. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #31
    Any ideas on how to indent the brand checkboxes so they appear beneath the parent ingredients?

    The brand ingredients currently display directly below the parent ingredient checkbox. I'd like the brand checkboxes indented (even just 2 or 3 spaces) to appear more like a submenu.

    Thanks.
     
    lespaul00, Dec 13, 2007 IP
  12. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Yes, that's what happened. When making modifications, you have to make the changes across all of the code. What happened here is you changed the ID prefix of the brand <div> tags, but didn't change it inside the javascript function. Also the checkbox was passing a different value to the function than in the example. So the final "ID's" of the <div> elements were wrong. The javascript code couldn't work because it was looking for ID's that didn't exist. Once you look at the simple javascript code and understand what it's doing it should make total sense.

    Btw, '' is not a valid display property, even if some browsers don't complain ;).

    One option is to add some padding to the <div>. Take another look at the w3schools site under CSS and padding. You'll have to play around with the layout.

    http://www.w3schools.com/css/default.asp
     
    cfStarlight, Dec 13, 2007 IP
  13. elizas

    elizas Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #33
    One Sample CFQUERY
    <cfquery name="myQuery" datasource="yourDataSourceName" result="myResult">
    select * from tableName
    </cfquery>

    To get the column names in alphabetical order (NOT in same order as in database table)
    <cfoutput>
    #myQuery.ColumnList#<br>
    #myResult.ColumnList#
    </cfoutput>

    To get the names in the same order as in database table, we can use this:
    <cfoutput>
    #ArrayToList(myQuery.getColumnList())#
    </cfoutput>
    Any suggestions are appreciated.
     
    elizas, Apr 15, 2010 IP
  14. elizas

    elizas Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #34
    ne Sample CFQUERY
    <cfquery name="myQuery" datasource="yourDataSourceName" result="myResult">
    select * from tableName
    </cfquery>

    To get the column names in alphabetical order (NOT in same order as in database table)
    <cfoutput>
    #myQuery.ColumnList#<br>
    #myResult.ColumnList#
    </cfoutput>

    To get the column names in the same order as in database table, we can use this:
    <cfoutput>
    #ArrayToList(myQuery.getColumnList())#
    </cfoutput>
    Eliza
     
    elizas, Jun 3, 2010 IP
Page 2 of 2