I have a few issues I hope some of you can help.
First I have 2 selects, first loaded with HTML and the second
off the onChange of the first. For some reason the onChange doesnt
always call the repopulation of the first.
%26lt;script type=''text/javascript''
src=''/scripts/spry/xpath.js''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''
src=''/scripts/spry/SpryData.js''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''%26gt;
var dsTyres = new Spry.Data.XMLDataSet(''tyresXML.cfm'',
''/tyres/tyre'');
var dsSeries = new
Spry.Data.XMLDataSet(''seriesXML.cfm?brandid={dsTyres::brandID}'',
''/series/series'');
Brand:%26lt;cfselect name=''brand_filter'' query=''getBrand''
queryposition=''below'' value=''tyreBrandID'' display=''TyreBrand''
onChange=''dsTyres.setCurrentRow(this.value);dsTyres.filter(filterFunc);''%26gt;
%26lt;option value=''''%26gt;%26lt;/option%26gt;
%26lt;/cfselect%26gt;
%26lt;span spry:region=''dsSeries''%26gt;
%26lt;select spry:repeatchildren=''dsSeries''
name=''series_filter''%26gt;
%26lt;option spry:if=''{dsSeries::ds_RowNumber} == 0''
value=''{ds_RowID}'' selected=''selected''%26gt;{series}%26lt;/option%26gt;
%26lt;option spry:if=''{dsSeries::ds_RowNumber} != 0''
value=''{ds_RowID}''%26gt;{series}%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;/span%26gt;
I can change as many times as I like and it doesnt seem to
reload the data into the series select. can anyone point me to
why?2 selects related and filter table
Hi Duncan,
Would it be possible to see what the markup looks like as it
is sent to the browser, instead of what it looks like before
ColdFusion processes it? From what you've pasted above, I can't
really tell what the value of each option is that you are passing
into dsTyres.setCurrentRow(). And what is the filterFunc doing?
It would be even better if you could actually give us a URL
to see it in action if possible.
--== Kin ==--2 selects related and filter table
Its in dev - not publicly accessible I am afraid.
The series XMl returns this:
%26lt;?xml version=''1.0'' encoding=''UTF-8''?%26gt;
%26lt;series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;1%26lt;/id%26gt;
%26lt;series%26gt;Cross Terrain%26lt;/series%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;2%26lt;/id%26gt;
%26lt;series%26gt;Overlander%26lt;/series%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;3%26lt;/id%26gt;
%26lt;series%26gt;Energy LX4%26lt;/series%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;4%26lt;/id%26gt;
%26lt;series%26gt;4WD%26lt;/series%26gt;
%26lt;brandID%26gt;1%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;5%26lt;/id%26gt;
%26lt;series%26gt;Performance Plus%26lt;/series%26gt;
%26lt;brandID%26gt;1%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;series%26gt;
%26lt;id%26gt;6%26lt;/id%26gt;
%26lt;series%26gt;Slip %26amp;apos;n%26amp;apos;
Slide%26lt;/series%26gt;
%26lt;brandID%26gt;3%26lt;/brandID%26gt;
%26lt;/series%26gt;
%26lt;/series%26gt;
And tyresXML returns this:
%26lt;?xml version=''1.0'' encoding=''UTF-8''?%26gt;
%26lt;tyres%26gt;
%26lt;tyre%26gt;
%26lt;id%26gt;2%26lt;/id%26gt;
%26lt;brand%26gt;BFGoodrich%26lt;/brand%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;series%26gt;Cross Terrain%26lt;/series%26gt;
%26lt;seriesID%26gt;1%26lt;/seriesID%26gt;
%26lt;name%26gt;235/65R17%26lt;/name%26gt;
%26lt;width%26gt;185%26lt;/width%26gt;
%26lt;ratio%26gt;60%26lt;/ratio%26gt;
%26lt;rim%26gt;14%26lt;/rim%26gt;
%26lt;load%26gt;82%26lt;/load%26gt;
%26lt;speed%26gt;H%26lt;/speed%26gt;
%26lt;fr%26gt;%26lt;/fr%26gt;
%26lt;/tyre%26gt;
%26lt;tyre%26gt;
%26lt;id%26gt;14%26lt;/id%26gt;
%26lt;brand%26gt;BFGoodrich%26lt;/brand%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;series%26gt;Cross Terrain%26lt;/series%26gt;
%26lt;seriesID%26gt;1%26lt;/seriesID%26gt;
%26lt;name%26gt;243/65T56%26lt;/name%26gt;
%26lt;width%26gt;185%26lt;/width%26gt;
%26lt;ratio%26gt;60%26lt;/ratio%26gt;
%26lt;rim%26gt;13%26lt;/rim%26gt;
%26lt;load%26gt;82%26lt;/load%26gt;
%26lt;speed%26gt;H%26lt;/speed%26gt;
%26lt;fr%26gt;%26lt;/fr%26gt;
%26lt;/tyre%26gt;
%26lt;tyre%26gt;
%26lt;id%26gt;3%26lt;/id%26gt;
%26lt;brand%26gt;BFGoodrich%26lt;/brand%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;series%26gt;Cross Terrain%26lt;/series%26gt;
%26lt;seriesID%26gt;1%26lt;/seriesID%26gt;
%26lt;name%26gt;245/67T56%26lt;/name%26gt;
%26lt;width%26gt;195%26lt;/width%26gt;
%26lt;ratio%26gt;60%26lt;/ratio%26gt;
%26lt;rim%26gt;14%26lt;/rim%26gt;
%26lt;load%26gt;88%26lt;/load%26gt;
%26lt;speed%26gt;V%26lt;/speed%26gt;
%26lt;fr%26gt;%26lt;/fr%26gt;
%26lt;/tyre%26gt;
%26lt;tyre%26gt;
%26lt;id%26gt;7%26lt;/id%26gt;
%26lt;brand%26gt;BFGoodrich%26lt;/brand%26gt;
%26lt;brandID%26gt;2%26lt;/brandID%26gt;
%26lt;series%26gt;Energy LX4%26lt;/series%26gt;
%26lt;seriesID%26gt;3%26lt;/seriesID%26gt;
%26lt;name%26gt;235/65R17%26lt;/name%26gt;
%26lt;width%26gt;175%26lt;/width%26gt;
%26lt;ratio%26gt;60%26lt;/ratio%26gt;
%26lt;rim%26gt;14%26lt;/rim%26gt;
%26lt;load%26gt;82%26lt;/load%26gt;
%26lt;speed%26gt;H%26lt;/speed%26gt;
%26lt;fr%26gt;%26lt;/fr%26gt;
%26lt;/tyre%26gt;
%26lt;/tyres%26gt;
I am trying to get 2 selects, related - brand and subset,
tyre series to be filters on a data table.
the filter on brand works fine, but the series select doesnt
update, and therefore I cant do the filter on it yet either.
The completed markup in the browser is this:
%26lt;style%26gt;
.loading {
padding: 4px;
background-color: #FFFFCC;
}
.even {
background-color: #424F53;
}
.odd {
background-color: #354044;
}
%26lt;/style%26gt;
%26lt;script type=''text/javascript''
src=''/scripts/spry/xpath.js''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''
src=''/scripts/spry/SpryData.js''%26gt;%26lt;/script%26gt;
%26lt;script type=''text/javascript''%26gt;
var dsTyres = new Spry.Data.XMLDataSet(''tyresXML.cfm'',
''/tyres/tyre'');
var dsSeries = new
Spry.Data.XMLDataSet(''seriesXML.cfm?brandid={dsTyres::brandID}'',
''/series/series'');
function filterFunc(ds, row, rowNumber) {
if(document.filterForm != null) {
//var regExpStr = document.filterForm.keyword_filter.value;
//var regExp = new RegExp(regExpStr, ''i'');
//alert(row[''''] + ' ' +
document.filterForm.brand_filter.options[document.filterForm.brand_filter.selec tedIndex].value);
if(
(
document.filterForm.brand_filter.selectedIndex == 0 ||
document.filterForm.brand_filter.options[document.filterForm.brand_filter.selec tedIndex].value
== row[''brandID'']
)
) return row;
else return null;
} else return row;
}
dsTyres.filter(filterFunc);
%26lt;/script%26gt;
%26lt;form name=''filterForm'' id=''filterForm''
action=''/admin/admin_tyres.cfm'' method=''get'' onsubmit=''return
_CF_checkCFForm_1(this)''%26gt;
%26lt;fieldset%26gt;
Brand:%26lt;select name=''brand_filter'' id=''brand_filter''
onchange=''dsTyres.setCurrentRow(this.value);dsTyres.filter(filterFunc);''
%26gt;
%26lt;option value=''''%26gt;%26lt;/option%26gt;
%26lt;option value=''1''%26gt;Michelin%26lt;/option%26gt;
%26lt;option value=''2''%26gt;BFGoodrich%26lt;/option%26gt;
%26lt;option value=''3''%26gt;Bridgestone%26lt;/option%26gt;
%26lt;option value=''4''%26gt;Goodyear%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;span spry:region=''dsSeries''%26gt;
%26lt;select spry:repeatchildren=''dsSeries''
name=''seriesSelect''%26gt;
%26lt;option spry:if=''{dsSeries::ds_RowNumber} == 0''
value=''{ds_RowID}'' selected=''selected''%26gt;{series}%26lt;/option%26gt;
%26lt;option spry:if=''{dsSeries::ds_RowNumber} != 0''
value=''{ds_RowID}''%26gt;{series}%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;/span%26gt;
%26lt;/fieldset%26gt;
%26lt;/form%26gt;
%26lt;div spry:region=''dsTyres''%26gt;
%26lt;div class=''loading'' spry:state=''loading''%26gt;Loading
...%26lt;/div%26gt;
%26lt;table border=''1'' width=''100%'' id=''table1''
cellpadding=''5'' style=''border-collapse: collapse''
bordercolor=''#4C5A60'' cellspacing=''0''%26gt;
%26lt;tr bgcolor=''#fff''%26gt;
%26lt;th onclick=''dsTyres.sort('brand','toggle')''
style=''cursor: pointer''%26gt;Brand%26lt;/th%26gt;
%26lt;th onclick=''dsTyres.sort('series','toggle')''
style=''cursor: pointer'' width=''75%''%26gt;%26lt;span
class=''issueHeader''%26gt;Series%26lt;/span%26gt;%26lt;/th%26gt;
%26lt;th onclick=''dsTyres.sort('name','toggle')''
style=''cursor: pointer''%26gt;%26lt;span
class=''issueHeader''%26gt;Name%26lt;/span%26gt;%26lt;/th%26gt;
%26lt;th onclick=''dsTyres.sort('width','toggle')''
style=''cursor: pointer''%26gt;%26lt;span
class=''issueHeader''%26gt;Width%26lt;/span%26gt;%26lt;/th%26gt;
%26lt;/tr%26gt;
%26lt;tbody spry:repeat=''dsTyres''%26gt;
%26lt;tr class=''''%26gt;
%26lt;td align=''center''%26gt;%26lt;span class=''copy''
spry:content=''{brand}'' /%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;span class=''copy'' spry:content=''{series}''
/%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;span class=''copy'' spry:content=''{name}''
/%26gt;%26lt;/td%26gt;
%26lt;td%26gt;%26lt;span class=''copy'' spry:content=''{width}''
/%26gt;%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/tbody%26gt;
%26lt;/table%26gt;
%26lt;/div%26gt;
Hi Duncan,
Thanks for giving me a bit more context. What I am confused
about is what this is supposed to accomplish:
Brand:%26lt;select name=''brand_filter'' id=''brand_filter''
onchange=''dsTyres.setCurrentRow(this.value);dsTyres.filter(filterFunc);''
%26gt;
%26lt;option value=''''%26gt;%26lt;/option%26gt;
%26lt;option value=''1''%26gt;Michelin%26lt;/option%26gt;
%26lt;option value=''2''%26gt;BFGoodrich%26lt;/option%26gt;
%26lt;option value=''3''%26gt;Bridgestone%26lt;/option%26gt;
%26lt;option value=''4''%26gt;Goodyear%26lt;/option%26gt;
%26lt;/select%26gt;
Specifically, why are you calling
dsTyres.setCurrentRow(this.value)? setCurrentRow() is supposed to
take a row ID not a value of a specific column. rowIDs are
generated automatically by Spry so they might not sync up with your
brandID values, which is probably why you don't get the expected
results sometimes.
From looking at your code, it looks like you are trying to
set the current row of dsTyres to the first row that has the same
brandID as the one selected, before you apply the filter that gets
rid of all other brands, right?
If so, then you'll have to set the current row in the same
manner as this sample shows:
http://labs.adobe.com/technologies/spry/samples/data_region/SetCurrentRowByValue Sample.html
So something like this:
function SetTyreBrand(brandID)
{
if (brandID)
{
var row = dsTyres.findRowsWithColumnValues({''brandID'':
brandID }, true);
if (row)
dsEmployees.setCurrentRow(row.ds_RowID);
}
}
and then modify your select to call SetTyreBrand() instead of
setCurrentRow:
rand:%26lt;select name=''brand_filter'' id=''brand_filter''
onchange=''SetTyreBrand(this.value);dsTyres.filter(filterFunc);''
%26gt;
%26lt;option value=''''%26gt;%26lt;/option%26gt;
%26lt;option value=''1''%26gt;Michelin%26lt;/option%26gt;
%26lt;option value=''2''%26gt;BFGoodrich%26lt;/option%26gt;
%26lt;option value=''3''%26gt;Bridgestone%26lt;/option%26gt;
%26lt;option value=''4''%26gt;Goodyear%26lt;/option%26gt;
%26lt;/select%26gt;
--== Kin ==--
Thanks for this info - thats not quite where I am trying to
go.
dsTyres.setCurrentRow(this.value); this was trying to achieve
a refresh of the seriesSelect, pushing in only the series that
belong to a brand. In theory via this line:
var dsSeries = new
Spry.Data.XMLDataSet(''seriesXML.cfm?brandid={dsTyres::brandID}'',
''/series/series'');
I may have this all completely wrong, I guess this part is a
simple related select.
The second part is to use a combination of these selects to
filter the data from dsTyres.
Hello,
This case sounds very close to a master detail dependency
between tyres and series that is sampled here:
http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailS ample.html.
Regards,
Cristian MARIN
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment