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):
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.
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!
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>
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
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.
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):
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
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?
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!
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.
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
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.
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