can someone help me, i want to update my query wit...
# cfml-beginnersn
Nikola Mikasinovic
04/12/2022, 12:37 PMcan someone help me, i want to update my query without reloading my page. It depents on what you have selected in the first select tag and the options of the second select tag denpends on the first one. How can I solve it without reloading my page?
<cfquery name="optionBez" datasource="Kiwanis">
SELECT DISTINCT OpNr, OpID, opGENr, OpBez#session.sprache# AS OptBezeichnung FROM tblGEOptions
INNER JOIN tblAnlass ON tblAnlass.GEOpt = tblGEOptions.opNr
WHERE (IDDist = #session.curDist#) AND (#Event.GENr# = opGENr);
</cfquery>
<cfquery name="GEBezeichnung" datasource="Kiwanis">
SELECT conKey, conBezeichnung, geTyp, conDatumbis, conDatumVon, conBezeichnung + ' '+ conOrt AS Bezeichnung
FROM tblConventions
WHERE (conDistrict = #session.curDist#) AND (conJahr > #session.kjahr-1#) AND (GETyp = 'DC')
ORDER BY conDatumVon;
</cfquery>
<div class="col-lg-6 col-12 form-inline">
<i>GE</i>
<select class="form-control col-lg-6" id="GENummer" name="GENummer" onchange="GEChange(this.value)">
<option value="0"></option>
<cfif Dates EQ #DateFormat(Event.Datum_von,'dd.mm.yyyy')#>
<cfloop query="GEBezeichnung">
<!---<cfif Dates EQ #DateFormat(conDatumVon,"yyyy-mm-dd")#>--->
<cfset Wert = "#Bezeichnung# #DateFormat(conDatumVon,"dd.mm.yyyy")#">
<cfif #conKey# EQ #Event.GENr#>
<option value="#conKey#" selected>#Wert#</option>
<cfelse>
<option value="#conKey#">#Wert#</option>
</cfif>
<!---</cfif>--->
</cfloop>
</cfif>
</select>
<i>Option</i>
<select class="form-control col-lg-4" name="GEOption" id="GEOption">
<option value="0"></option>
<cfloop query="optionBez">
<cfif #Event.GEOpt# EQ #opNr#>
<option value="#opNr#" selected>#optBezeichnung#</option>
<cfelse>
<option value="#opNr#">#optBezeichnung#</option>
</cfif>
</cfloop>
</select>
</div>
a
aliaspooryorik
04/12/2022, 1:29 PM
You have two options - both involve Javascript.
You can either :
a) load all possible combinations up front when then page loads and store in Javascript so when you pick from one option then Javascript notices and filters based on the criteria.
b) load the page with the options for first select. Then using Javascript, when the user picks an option, do an AJAX call to the server to return the filtered options for the second dropdown.
n
Nikola Mikasinovic
04/12/2022, 1:39 PMthanks for the anwser! do you have an example for any of the options? or were can I find those examples?
a
aliaspooryorik
04/12/2022, 1:42 PM
Are you using a javascript library? (such as React / Vue or even jQuery?
aliaspooryorik
04/12/2022, 2:01 PM
The concept is pretty much the same in any server side language.
n
Nikola Mikasinovic
04/12/2022, 2:32 PMyes I am using jQuery
a
aliaspooryorik
04/12/2022, 2:48 PM
This is the kind of thing (not working code but should get you started)...
aliaspooryorik
04/12/2022, 2:48 PM
Copy code
<!--- get the data for the first select box --->
<cfset optionsOne = DAO.selectOneData()>
<cfoutput>
<select name="a" id="selectone">
<cfloop array="#optionsOne#" index="option">
<option value="#encodeForHtmlAttribute(option.value)#">#encodeForHtml(option.label)#</option>
</cfloop>
</select>
<br>
<select name="b" id="selecttwo">
</select>
</cfoutput>
<script src="<https://code.jquery.com/jquery-3.6.0.min.js>" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function() {
$('#selectone').on('change', function() {
var selectValue = this.value;
// call the server to get data for the 2nd select
$.ajax({
method: "POST",
href: '/getdata.cfm',
data: {
selectValue: selectValue
}
}).done(function(data) {
// use the data the server returns to populate the 2nd select...
});
})
});
</script>p
Peter Amiri
04/13/2022, 2:00 AMYou could also do this using HTMX, here is a link to an example: https://htmx.org/examples/value-select/
2 Views