Live JavaScript (JS) Data-Feed
Summary
Tropical Villa Vacations broadcasts all of it's data over a live feed. You can program your site to receive and display our data on your site. Note that we are providing identical data in two feeds (XML & JavaScript), this page discusses the simpler JavaScript feed. Here are the XML feed instructions.
  1. You can display and format our data however you choose. Our data is “pure”, meaning that it does not contain or impose any formatting instructions. This allows you to display our data on your site using your color scheme, style & format. Our data will “look & feel” as if it's your own.
  2. Our data is delivered via universally accessible JavaScript files. This means receiving and displaying our data on your site is relatively easy - no complex server-side programming or configuration is required. In the head section of your HTML page, you simply “pull a reference” to our data and with a little bit of JavaScript code (we will show you how), you can display it on your site.
  3. It's up to you what particular data you choose to display. For example, if you prefer to write your own general commentary for one of our Villas, you are free to do so. On the other hand, if you would rather incorporate our pre-written commentary you may do that instead. The moral of the story is “Ask and you shall receive, don't ask and we won't give it to you!”
  4. It is live data and requires no maintenance from you. For instance, say you are displaying our data for Wailea Sunset Bungalow and the rates just went up. The moment they go up it will be reflected on your page as well - without any effort from you!
  5. Here's a simple yet complete example of a page that is actually receiving and displaying our data from a live feed.
  6. Our live-feed data is broadcast as JavaScript and executes on the client-side (within the browser). It cannot be parsed on your server's level. Therefore, if your site uses an existing server-side data-base, and you would like to integrate our data with it, you will need to access our data in XML format. Here are instructions for working with our XML data.
  7. Elite Properties is one of our first subscribers to the live JS feed. They are using our condensed summary format listing display as their intro page (recomended). Also note how they have wisely split our content into three pages:
    1. Fact sheet data
    2. Photos
    3. Availability Calendar
  8.  July 2012  The state of Hawaii legislature has passed a new bill requiring that “The registration identification number issued pursuant to section 237D-4 shall be provided on a website or by online link and displayed in all advertisements and solicitations on websites regarding transient accommodations for which the registration number is issued”. As a result of this bill, we are now providing this registration identification number in your feed, allowing you to display this id number on your site. Scroll down to learn more.
  9. For questions of a technical nature, please contact David@DavidRegier.com. If you are just starting, and are confused please contact me. Having done many projects like this myself, I have found that sometimes the hardest part is getting started! If you need a little help to get on your way - I am more than happy to assist.

Are you interested in showcasing just a single property? If so read on...
The instructions on this page are intended for use by outside rental agencies or marketing companies who desire to showcase multiple properties. On the other hand, if you are a sole property owner, and you desire to showcase just your property data, things will be a bit simpler for you:
  1. Our “writeListings” function may be of no interest to you. That's because it's purpose is to showcase multiple properties in condensed summary format, for use as an “intro page”
  2. You will not need to use the query-string portion of the URL to reference your fact-sheet data file. Instead, you can “hard-code” the data file name itself - explained in further detail below.
  3. Our “getData” function should be of great interest to you. With it you can “pick & choose” from our extensive data-base, whatever particular data you would like to present.
  4. Please contact me if you find yourself confused. Remember, these instructions are written for rental agencies & marketing companies. With that in mind, some parts of these instructions will be of no interest to you.
Examples of JavaScript code you can use to read and write our rate information to your page:
After “pulling a reference” to our data in the head section of your HTML page (explained below), these little snippets of JavaScript code could be placed in the body section of your page to write our rate information to your page.

At it's simplest, it could look like this:
<script>
Rate = getData( "Rate" );
document.write( Rate );
</script>
<script> This is an HTML tag indicating that the following lines will be JavaScript code rather than HTML
Rate = getData( "Rate" ); This line of code asks for our Rate data and temporarily stores it into a variable named Rate
document.write( Rate ); This line of code takes the Rate information and writes it to the page
</script> This is an HTML tag ending the above script section


The example below is a little more complex as it incorporates a little custom formatting, and only writes data to the page if we gave you some:
<dl>
<script>
Rate = getData( "Rate" );
if( Rate ) {
htm =
"<dt>Rate</dt>" +
"<dd>" + Rate + "</dd>";
document.write( htm );
}
</script>
</dl>
<dl> This is an HTML definition list opening tag.
<script> This is an HTML tag indicating that the following lines will be script code rather than HTML
Rate = getData( "Rate" ); This line of code asks for our Rate data and temporarily stores it into a variable named Rate
if( Rate ) { This line of code says "If there is Rate data...", then continue on to the next block of code and execute everything between { and }, which writes this data to the page, otherwise, we are done and nothing is written to the page.
htm = At this point, you know that Tropical Villa Vacations is returning valid rate information, so create a variable named “htm”, the following lines of code will store data into this variable...
"<dt>Rate</dt>" + In the htm variable, store this data defined within HTML dt (definition-term) tags
"<dd>" + Rate + "</dd>"; In the htm variable, also store this data that is being held by the Rate variable but formatted within HTML dd (definition) tags. We are now done filling the htm variable with formatting and data.
document.write( htm ); This line of code takes the information stored into the htm variable and writes it to the page
} This line of code defines the closing block of code if there is Rate data present. In other words, if there is Rate data present everything between { and } is executed. Otherwise, it is disregarded.
</script> This is an HTML tag ending the above script section
</dl> This is an HTML tag that ends the definition-list style formatting.
Comments This example is more complex for two reasons:
  1. It incorporates custom formatting using the HTML definition list tags. You are free to format your data however you would like - this is just one of many formatting methods available.
  2. It's smarter that the first method because it includes intelligence such that it only writes to the page if there is in fact data present. Let me explain, with rate information, we will always return data, however, if you are accessing other more obscure data such as “WineRefer” (Wine Fridge), “TikiTorch” (Tiki Torches) or “Bd10_View” (Bed #10 View), we may not always have data for those fields. In these cases we will return nothing (technically speaking we will return an empty text string). By your checking first if we have data, and then writing to the page only if we do, you can avoid creating information that is laid out but undefined, like this example:
    Rate
    $1000 per night
    Wine Fridge
    Tiki Torches
    Bedrooms
    3 bedrooms on first floor and 2 on top floor

How do I “pull a reference” to Tropical Villa Vacations data?
Tropical Villa Vacations broadcasts all of it's data over a live feed. However, you must “tune to our station” (ie. pull a reference) to our data before you can display it. This is easier than you might imagine. You can do a view-source on my simple example (not this page) and you will see the 5 mandatory lines of code you must place in the head section of your page in the order listed. You do not need to concern yourself with the inner workings of these file-references or function calls, all you have to is include them like this:
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/code/agents-api.js"></script>

<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/global-data.js"></script>

<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/listings.js"></script>

<script language="javascript1.2"> writeFactSheetDataFile(); </script>

<script language="javascript1.2"> initializeData(); </script>
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/code/agents-api.js"></script>
This line pulls a reference to our code that defines the “getData” function & others that you will call from your pages.
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/global-data.js"></script>
This line pulls a reference directly to our global data
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/listings.js"></script>
This line pulls a reference directly to our condensed villa data
<script language="javascript1.2"> writeFactSheetDataFile(); </script>
This function call pulls a reference directly to our villa-specific data, which varies depending on the specific villa being shown. It uses the query string portion of the URL to load the correct data file. Load our example page and you will see the query string in the URL: db=fs-bf-waileasunsetestate.js. Internally, the writeFactSheetDataFile() function reads this query string, and then references the correct data file for you. This capability allows you to use the same fact-sheet/image/calendar templates over and over for all the various properties.

For those new to web data-base programming, you might appeciate it more by seeing it in action:
  1. http://www.luxuryvacationestates.com/instructions/example.html?db=fs-bf-waileasunsetestate.js
  2. http://www.luxuryvacationestates.com/instructions/example.html?db=fs-bf-RoyalIlimaWaileaBeachVillas.js
Note that both URL's load the same exact page (example.html), however by modifying the query string, you have two completely different properties being showcased: (1) Wailea Sunset Estate and (2) Royal Ilima A201 Wailea Beach Villas.

Single owners or anyone showcasing just one property: The <script language="javascript1.2"> writeFactSheetDataFile(); </script> which relies on the use of a query string in the URL is overkill for your needs. Instead, you will replace that entire line with a single line in which you hard-code the data file name like so:
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/fs-bf-RoyalIlimaWaileaBeachVillas.js"></script>
<script language="javascript1.2"> initializeData(); </script>
This line pre-processes & prepares our data for presentation on your page. Our data is streamed in raw, and this line preps it for HTML output.

What Villas can I display?
You may now retrieve the actual list of properties themselves, and then display them in condensed summary format, for use as your “intro page”. In other words, the list of properties you display on your “intro page” can also be driven by our live-feed. This instructions page is doubling as a listings page, in other words it is actually receiving and displaying this data from the live feed. Therefore you can do a view-source on this page to see how it is done.


You must add the following include tags to the head seaction of your listings page:
<script language="javascript1.2" src="http://www.luxuryvacationestates.com/code/agents-api.js"></script>

<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/agent-data.js"></script>

<script language="javascript1.2" src="http://www.luxuryvacationestates.com/data/listings.js"></script>


Now, after adding the above include-tags, you make a single function call to our writeListings function and we will faithfully display all your live-feed properties in condensed summary format as above.
<script>
writeListings( "Your Company Name", "Fact-Sheet file name", "table-alignment" );
</script>

For example, a view-source on this page will reveal:
<script>
writeListings( "Visitor", "example.html", "left" );
</script>

Make sure you don't copy this one, you will want to use your company name, not "Visitor"

The writeListings function accepts 3 mandatory string arguments, they are in order:
  1. Your company name. To get your company name, log-in to your agent homepage and note the company name that we greet you by. That is how you are id'd in our data-base.
  2. Fact-Sheet File Name. This will be the name of the file you would like to use for the fact-sheet and will be the page that loads when user clicks the link. Could be things like "property.html", "rental.php", "villa.aspx" or whatever you need.
  3. Table alignment for the listings. The condensed listings are formatted in a table and this sets its alignment. It must be "left", "center" or "right"

In addition, you have some control over the appearance of the listings per the following CSS, which you can see on a view-source:
<style>
a.LinkTVV { }
a.LinkTVV:link { }
a.LinkTVV:visited { }
a.LinkTVV:hover { }
td.HeaderCellRow1TVV{ font-weight:bold; text-decoration:none; padding:0px 8px 0px 8px; vertical-align:bottom; white-space:nowrap; }
td.HeaderCellRow2TVV{ font-weight:bold; text-decoration:underline; padding:0px 8px 4px 8px; vertical-align:bottom; white-space:nowrap; }
td.DataCellTVV{ padding:2px 8px 2px 8px; white-space:nowrap; }
tr.AlternatingRow{ background-color:rgb( 225,225,225 ); }
</style>
If you don't know CSS, it is beyond the scope of these instructions to teach this. In this case just incorporate them exactly as they are here. You may add them directly to the head section of your page (like we are doing here), or within your external style sheet file (if any).

For those that are comfortable with CSS, go ahead and start customizing. The click-able links that are generated (takes you to the fact sheet) are assigned the "LinkTVV" class. This means you can customize their appearance with CSS.

Also, some of you have told me that the “writeListings” function does not display properties consistent with how you are presenting them on your site. Don't let that alone be a deal breaker! Remember, you can still use the JavaScript feed without ever calling our “writeListings” function.

+Optional: Incorporating pop-up menus on your site
Optional: The links are assigned the “LinkTVV” class, this means you may also programmatically locate them and assign event-handlers to them per the "function setEventHandlers()" that you write - an example of how it might look is below. By doing so you could have a pop-up menu with 3 menu items: "Fact-Sheet", "Calendar" & "Photos" where each one takes you to a separate page (if desired).

function setEventHandlers() {
  var AllLinks = document.getElementsByTagName( "a" );
  for ( var i = 0; i < AllLinks.length; i++ ) {
    if( AllLinks[ i ].className == "LinkTVV" ) {
      AllLinks[ i ].onmouseover = function( event ) { /* Place your code to show menu here */ }
      AllLinks[ i ].onmouseout = function( event ) { /* Place your code to hide menu here */ }
    }
  }
}
Above is an example of some skeleton code that could be used to identify and set event handlers. You will need to write your own setEventHandlers and pop-up menu functions. We are not providing the completed code - just throwing out possibilities here...
 
What data can I retrieve?
Here's a complete list of the data you may retrieve for our Villas by making function calls to getData( "Field_Name" ); Note that function calls are case-sensitive, so the proper way to request the location is getData( "Loc" ); not getData( "loc" ); or getData( "LOC" );
Refer to “Examples of JavaScript code...” section above on how to request & write our data to your page.

 December 2012  Striken data (like this) is deprecated and slated for removal in 2015. Three new fields have been added (AC, Entertainment & Dining)
Field Name Description
Name Villa Name
Commentary Detailed Property Description
Setting Setting
Loc Location
Island Island
View View
Bdrm Bedrooms
Bath Bathrooms
TaxId Tax ID Number
Rate Rate
RateNatHol National Holiday Rate
RateOtherVar Other Variations to Rate
MinStay Minimum Stay
MaxOcc Maximum Occupancy
Deposit Security, Damage & Incidentals Deposit
InitialPay Initial Reservation Payment
FinalPay Final Reservation Payment
OutClean Outcleaning Charge
HsKpProvided Housekeeping Services Provided
HsKpProvidedXtra Extra Housekeeping Cost
CheckIn Check In Time
CheckOut Check Out Time
BeachAccess Beach Access
OceanAccess Ocean Access
Pool Pool
PoolHeat Heated Pool
SpaIndoor Indoor Spa
SpaOutdoor Outdoor Spa
AC Air Conditioning  New Dec 2012 
AC_Central Central AC: Use AC Instead
AC_Partial Partial AC: Use AC Instead
BBQ BBQ
SecSys Security System
Parking Parking
NumCars Vehicles Allowed
Bd1_Bed Master Bed Type
Bd1_View Master Bed View
Bd1_Bath Master Bed Bathroom
Bd1_Floor Master Bed Floor
Bd1_Closet Master Bed Closet
Bd1_PatLanai Master Bed Patio/Lanai
Bd1_Electronics Master Bed Electronics & Entertainment
Bd1_AC Master Bed AC
Bd2_Bed Bed #2 Type
Bd2_View Bed #2 View
Bd2_Bath Bed #2 Bathroom
Bd2_Floor Bed #2 Floor
Bd2_Closet Bed #2 Closet
Bd2_PatLanai Bed #2 Patio/Lanai
Bd2_Electronics Bed #2 Electronics & Entertainment
Bd2_AC Bed #2 AC
Bd3_Bed Bed #3 Type
Bd3_View Bed #3 View
Bd3_Bath Bed #3 Bathroom
Bd3_Floor Bed #3 Floor
Bd3_Closet Bed #3 Closet
Bd3_PatLanai Bed #3 Patio/Lanai
Bd3_Electronics Bed #3 Electronics & Entertainment
Bd3_AC Bed #3 AC
Bd4_Bed Bed #4 Type
Bd4_View Bed #4 View
Bd4_Bath Bed #4 Bathroom
Bd4_Floor Bed #4 Floor
Bd4_Closet Bed #4 Closet
Bd4_PatLanai Bed #4 Patio/Lanai
Bd4_Electronics Bed #4 Electronics & Entertainment
Bd4_AC Bed #4 AC
Bd5_Bed Bed #5 Type
Bd5_View Bed #5 View
Bd5_Bath Bed #5 Bathroom
Bd5_Floor Bed #5 Floor
Bd5_Closet Bed #5 Closet
Bd5_PatLanai Bed #5 Patio/Lanai
Bd5_Electronics Bed #5 Electronics & Entertainment
Bd5_AC Bed #5 AC
Bd6_Bed Bed #6 Type
Bd6_View Bed #6 View
Bd6_Bath Bed #6 Bathroom
Bd6_Floor Bed #6 Floor
Bd6_Closet Bed #6 Closet
Bd6_PatLanai Bed #6 Patio/Lanai
Bd6_Electronics Bed #6 Electronics & Entertainment
Bd6_AC Bed #6 AC
Bd7_Bed Bed #7 Type
Bd7_View Bed #7 View
Bd7_Bath Bed #7 Bathroom
Bd7_Floor Bed #7 Floor
Bd7_Closet Bed #7 Closet
Bd7_PatLanai Bed #7 Patio/Lanai
Bd7_Electronics Bed #7 Electronics & Entertainment
Bd7_AC Bed #7 AC
Bd8_Bed Bed #8 Type
Bd8_View Bed #8 View
Bd8_Bath Bed #8 Bathroom
Bd8_Floor Bed #8 Floor
Bd8_Closet Bed #8 Closet
Bd8_PatLanai Bed #8 Patio/Lanai
Bd8_Electronics Bed #8 Electronics & Entertainment
Bd8_AC Bed #8 AC
Bd9_Bed Bed #9 Type
Bd9_View Bed #9 View
Bd9_Bath Bed #9 Bathroom
Bd9_Floor Bed #9 Floor
Bd9_Closet Bed #9 Closet
Bd9_PatLanai Bed #9 Patio/Lanai
Bd9_Electronics Bed #9 Electronics & Entertainment
Bd9_AC Bed #9 AC
Bd10_Bed Bed #10 Type
Bd10_View Bed #10 View
Bd10_Bath Bed #10 Bathroom
Bd10_Floor Bed #10 Floor
Bd10_Closet Bed #10 Closet
Bd10_PatLanai Bed #10 Patio/Lanai
Bd10_Electronics Bed #10 Electronics & Entertainment
Bd10_AC Bed #10 AC
Entertainment Entertainment  New Dec 2012 
CableTV Cable TV: Use Entertainment Instead
SatTV Satellite TV
Dining Dining  New Dec 2012 
DineIn Indoor Dining: Use Dining Instead
DineOut Outdoor Dining: Use Dining Instead
HomeSize Approx Interior Size
LotSize Approx Lot Size
Disclosure Villa Specific Disclosures
Safe Personal Safe
FirePl Fireplace
LivRmSofaBed Living Room Sofa Bed
DVD DVD
DVD_Library DVD Library
VCR_Library Video Library
Gym Gym
BilliardTable Billiard Table
Internet Internet Connection
Office Office
WineRefer Wine Fridge
ClockRadio CD Clock Radio
DownPillow Down Pillows
Theatre Home Theater Room: Use Entertainment Instead
TikiTorch Tiki Torches
BathRobe Bath Robes
PicnicBasketCooloer Picnic Basket/Cooler
Hammock Hammock
ShadedOutdoorDining Shaded Outdoor Dining
Water Bottled Water Cooler/Dispenser
OtherAmenities Other Non-Standard Amenities Provided in this Villa

New July 2012 TaxId: Tax ID Number. The state of Hawaii legislature has passed a new bill requiring that “The registration identification number issued pursuant to section 237D-4 shall be provided on a website or by online link and displayed in all advertisements and solicitations on websites regarding transient accommodations for which the registration number is issued”. As a result of this bill, we are now providing this registration identification number in our feed, allowing you to display this id number on your site.

Can I display your images on my site?
Yes, just like our data, our images are also available for display on your site via our live-feed. On the other hand, if you prefer to incorporate our images in the conventional manner, you can copy them from your agent page and place them on your own server.

There's several advantages to placing them on your own server:
What are the disadvantages of downloading them and placing them on my own server you ask?
For those of you interested in displaying our images via our live-feed, you can make a single call to our "writeImages()" function and we will faithfully write all our full-size images to your page in a column with a caption under each one.

New 9/07 Some of you have indicated that our photos are too large (dimension wise) for your site. With that in mind you may now request that they be scaled down in size by passing an optional numeric argument (parameter) to our writeImages function. For example, "writeImages( 80 )" will display the photos at 80% their true size, "writeImages( 60 )" will display the photos at 60% their true size. Note that if you don't pass in this optional parameter, they will be displayed at their true size. The middle section of the example page is displaying images in this manner. Do a view-source on our example page and you will see this function call way at the bottom, it looks like this: “writeImages();”. Being that we are not passing the optional numeric argument into the function means we are displaying the images at their true size (they are not being scaled down).

Note that the images will be scaled down within the browser (on the client side). They are not resized on the server level. In other words, if you scale them down to 50%, the client browser still downloads the full-size image, but displays it at 50% it's true size.

New 11/07 By default, the photo credits (© Tropical Villa Vacations, © Daniel Morgan Boone, etc.) located along the bottom edge of the photos are now hidden. This has been done by visually clipping the bottom 8% of the image from view - as the vast majority of our photo credits are located in this region.

+How to show the entire photo including photo credit
In the event you do not want the bottom 8% of your photo clipped from view, you can override this default behavior by passing an optional boolean value of “true” to the "writeImages()" function. Note that it will be the second parameter passed to this function, so if you do this, you must also pass the first argument (numeric scaling percent) as the first value. Here's some examples:
  1. writeImage( 100, true ); This will display the images at their true size and the photo credits will show (no clipping will occur).
  2. writeImage( 80, true ); This will display the images scaled at 80% their true size and the photo credits will show (no clipping will occur).
  3. writeImage( 80 ); This will display the images scaled at 80% their true size and the photo credits will be clipped.
  4. writeImage(); This will display the images at their true size and the photo credits will be clipped.
  5. writeImage( true ); This will cause an error because true must be the second parameter.
Can I display your calendar data on my site?
Yes, just like our property data and images, our calendar data is also available via our live-feed. The bottom section of the example page is displaying the booking calendar information from our live-feed via a single function call to writeCalendarVersion2( "left" ). Note that you could have the data on a separate page, the images on a separate page and the calendar on a separate page as well. It's up to you how you would like to break up this information.

New 6/08 In our version 2 of the calendar function, we have exposed the CSS that controls how the calendar appears. This ability gives you much more control over its appearance and allows you to better integrate our calendar onto your site. In addition, you may pass in a single string parameter (in this case we are passing in "left"). This parameter controls the alignment of the entire calendar and your choices are "left", "center" or "right". For those of you who started out with our original method, this new method will be worth upgrading to, especially if you found yourself stuck with generic colors & font-sizes that you were unable to change.

Here is the exact CSS that is currently controlling our calendar on the example page (which you can also see on a view-source of the example page, not this page):
<style>
div.calLastUpdatedTVV{ font-size:9pt; }
div.calYearTVV{ font-size:12pt; color:black; }
fieldset.calKeyPinLineTVV { border:1px solid Gray; }
legend.calKeyTitleTVV{ color:black; font-variant:small-caps; font-size:12pt; }
ul.calKeyInstructionsTVV{ color:black; }
.calRowTVV{ color:rgb( 0,0,0 ); font-family:Arial, Helvetica; background-color:LightGrey; padding:1px 6px 1px 6px; font-size:12pt; } span.calBookedTVV { color:blue; text-decoration:line-through; }
span.calFlexibleTVV{ color:Purple; text-decoration:line-through; }
span.calPendingTVV{ color:red; text-decoration:line-through; }
</style>
  1. div.calLastUpdatedTVV: Controls the last-updated information way at the bottom of the calendar
  2. div.calYearTVV: Controls the years (2009, 2010, 2011, etc. etc.)
  3. fieldset.calKeyPinLineTVV: Controls border pin-line that surrounds the calendar designations section (key) at the top
  4. legend.calKeyTitleTVV: Controls the calendar title that is built into the calendar designations section at the top of the page
  5. ul.calKeyInstructionsTVV: Controls the calendar designations text (text surrounded by pin-line at top of calendar)
  6. calRowTVV: Controls ALL rows in the calendar (month-names & days of the month “1 2 3 4 5 6...”) and the examples within the calendar designations section
  7. span.calBookedTVV: Controls how a booked reservations appear. It inherits from calRowTVV
  8. span.calFlexibleTVV: Controls how flexible reservations appear. It inherits from calRowTVV
  9. span.calPendingTVV: Controls how pending reservations appear. It inherits from calRowTVV