I have a web template/datamapper that has a dynamic select list and a radio button. The data is an XML file with a detail table and 4 elements.
I need the select list to only display the items that match the value of the currently selected radio button. I would prefer to not query the database again when they select a different radio button.
You could set your values for each radio button into a hidden field in your Template. Then add an event on your Radio button that will load up the content of your hidden field based on which radio button was selected.
I added the hidden field to hold the value and a listener on the web page.
For now I’m using an if else if even though I’m performing the same actions.
<script>
$(document).foundation();
$('input[type=radio][name=ReleaseStatus]').change(function() {
if (this.value == '9') {
alert($(this).val());
$('input[name="HidReleaseStatus"]').val(this.value);
location.reload(true);
alert('Reloading Page');
}
else if (this.value == '8') {
alert($(this).val());
$('input[name="HidReleaseStatus"]').val(this.value);
location.reload(true);
alert('Reloading Page');
}
});
</script>
How do I access the value of the hidden field from the script?
I would like to use the value for sRS instead of the hard coded “9”.
var sfiles = record.tables.detail;
var sRS = "9";
for each (sfile in sfiles) {
if(sfile.fields.ReleaseStatus == sRS){
results.append('<option value="'+sfile.fields.Expr1+'">'+ sfile.fields.FileName + '</option>');
}
}
Can you share your Template so I can play a little with it? Been a while since I have done this so better to play around with what you currently have.
Your server-side script, sSelectList2 need to be incorporated in your client-side script as it need be executed once the client has made a selection. If you have a default value, then the same code that populate your drop-down list should be used and be executed after the page loaded.
That ensure the drop-down population is always done the same way.
Server-side scripts, those shown under the Scripts panel in the Designer are executed in the Connect Server while building the web page but are no longer accessible once the page is loaded up in a browser.
On the other hand, it is through a server-side script that you will put the content of your data model in your hidden field to access it at a later time. Something like this:
Selector: <your selector>
Script:
results.attr('value', record.fields.<the field>);
Then your client-side script can look into that value and populate your drop-down on the fly in the radio button event.
What format you use to put your data in the hidden field is up to you but I would use JSON. Make it easier to play with in your Javascript code.
Okay, attempting this.
I have two hidden input fields (currently not hidden)
Two server side scripts to load portions of the detail table into their respective hidden field as a JSON file.
It is only a warning when you could have multiple element to be affected.
This is what I was able to get to work.
I added in two select lists wrapped in a div and populated them with a different script.
<div style="width: 303.333px;">
<label>
<div id="sel9" style="display: block;">
<select id="select9" name="select9">
<option value="" disabled="" selected="">Select 9...</option>
</select>
</div>
<div id="sel8" style="display: none;">
<select id="select8" name="select8">
<option value="" disabled="" selected="">Select 8...</option>
</select>
</div>
</label>
</div>
Then used the client side script to hide one of the Select Lists based on the Radio Button.
<script>
$(document).foundation();
$('input[type=radio][name=ReleaseStatus]').change(function() {
if (this.value == '9') {
var link8 = document.getElementById('sel8');
link8.style.display = 'none';
var link9 = document.getElementById('sel9');
link9.style.display = 'block';
}
else if (this.value == '8') {
var link8 = document.getElementById('sel8');
link8.style.display = 'block';
var link9 = document.getElementById('sel9');
link9.style.display = 'none';
}
});
</script>
That is one way of doing this. Of course, you only have two different choices but imaging having 10 or more…
If you have time and curiosity, you should definitively play with it to make it so only the data you need you store in your hidden field, perhaps as a JSON string. Tthen you load up your drop-down list with the content which match the choice related to the value of the radio button selected. Migth come handy in future projects.