This page provides step-by-step examples of more advanced techniques to apply SpeedRFP to your website. In particular, we cover the case where you have a
multi-select that will feed UIDs to the SpeedRFP widget.
|
Output | HTML |
|
<form id="hotelpicker">
<select name="hotels" id="hotels" multiple size="5">
<option value="" selected>Please choose one or more hotels</option>
<option value="XX94N">XX94N - A Demo Gold Resort</option>
<option value="JB811">JB811 - A Demo Property</option>
<option value="TXS38">TXS38 - A Demo Resort</option>
</select>
|
Here is a custom button to open
the SpeedRFP window (optional).
|
<button type="button" onclick="useUids();">Use UIDs in multi-select</button>
|
Don't forget to end your form tag. |
</form>
|
|
The following JavaScript is used:
function getHotelUids()
{
var uids = "";
var hotels = document.getElementById("hotels");
for ( i=0; i<hotels.options.length; i++ )
{
if ( hotels.options[i].selected )
{
if ( !hotels.options[i].value ) continue; // skip blank uids
uids = ( uids ) ? uids + "," + hotels.options[i].value : hotels.options[i].value;
}
}
return uids;
}
function useUids()
{
srfp_widget.setUid(getHotelUids());
srfp_widget.show();
}
|
|
The following SpeedRFP options are used:
<script type="text/javascript" charset="utf-8">
var options = {};
options.display = "overlay";
options.key = "fc959b6624924310";
options.populateUid = "getHotelUids";
options.clear_previous = true;
var srfp_widget = new srfp.widget(options);
</script>
|
Explanation
The multi-select form above has the id "hotels". The user selects the desired hotels, then clicks the "Use UIDs in multi-select" button.
This calls the useUids() function, which in turn calls getHotelUids().
getHotelUids() returns a comma-delimited string of the selected UIDs. Something like: "XX94N,JB811"
That string is then passed to the srfp_widget.setUid() method. That tells SpeedRFP what hotels to load into the SpeedRFP form when srfp_widget.show() is called.
We also attach the function getHotelUids() to the SpeedRFP widget itself, using options.populateUid = "getHotelUids";
This tells SpeedRFP to call that function any time the SpeedRFP window is opened.
Additional SpeedRFP Options
We set a few options in our SpeedRFP widget.
options.populateUid = "getHotelUids";
The name of a function to run before SpeedRFP is loaded. That function should return a string of comma-delimited list of UIDs.
options.clear_previous = true;
Tells SpeedRFP to clear any previous UIDs already set if a SpeedRFP window was previously opened. Defaults to false.
SpeedRFP Widget Methods
srfp_widget.setUid() - passes UIDs to the widget
srfp_widget.show() - reloads the iframe
|