Skip to content

Instantly share code, notes, and snippets.

@mexitek

mexitek/prep.js

Created November 20, 2012 19:15
Show Gist options
  • Save mexitek/4120343 to your computer and use it in GitHub Desktop.
Save mexitek/4120343 to your computer and use it in GitHub Desktop.
Download ZIP
JS Template String vs Jquery DOM Creation
Raw
prep.js
var hotelObj = {"hotelId":"2653","p":"30","n":"America`s Best Inn Main Gate East","d":"In the Walt Disney World Resort Area offering FREE Shuttle Service! A great family vacation spot nearby the major theme parks of Orlando Florida.","lat":"28.3321","lng":"-81.4892","a":"All Orlando","aid":"19","v":"","url":"http:\/\/bookitsb.com\/us\/florida\/orlando\/hotels\/americas-best-inn-main-gate-east\/","nr":"0","sr":"25","tr":"","fr":"","tsm":"","rqm":"","r":"Deluxe Room","pr":"","su":"Near Disney, Kissimmee - Hotel with FREE Theme Park Shuttles","ma":"In the Walt Disney World Resort Area offering FREE Shuttle Service!","fc":"","i":"","am":"","li":"MCO","ln":"Orlando, Florida, United States","c":{"l":"BONUS","n":"JOINT TEST"},"st":"50","img":"\/\/images.bookit.com\/RA10168\/RA10168_227891_TN.jpg"};
window.buildHotelHTML = function( hotelData){
var str = '<div class="hidden pod resultsPod hotelResults rowClearOFH ' + '">\
<input type="hidden" name="hotelUniqueId" value="' + hotelData.hotelId + '" disabled="disabled" />\
<input type="hidden" name="hotelId" value="" disabled="disabled" />\
<input type="hidden" name="hotelVendorId" value="" disabled="disabled" />\
<input type="hidden" name="locationId" value="' + hotelData.li + '" disabled="disabled" />\
<input type="hidden" name="locationName" value="' + hotelData.ln + '" disabled="disabled" />\
<input type="hidden" name="showRates" value="0" disabled="disabled" />\
<input type="hidden" name="defaultBestTimeToBookitNights" value="" disabled="disabled" />\
<div class="row resultInfo">\
<div id="ResultsMainPhoto" class="row">\
<a class="resultsWomPlay" href="javascript:void(0);" onClick="new HotelGallery("' + hotelData.hotelId + '",{viewOnly:false,view:"videos",pageType:"results"});">\
<img border="0" src="//images.bookit.com/3.0/Uni_Trans.gif"/></a>\
<a class="photoBtn btnContainer grayBorder" href="javascript:void(0);" onclick="new HotelGallery("' + hotelData.hotelId + '",{viewOnly:false,view:"photos",pageType:"results"});">\
<span class="grayBtn">photos</span></a>\
<a class="updateInterstitial" href="' + hotelData.url + '" >\
<img class="hotelImage" src="' + hotelData.img + '" border="0" width="150" height="95" alt="' + hotelData.n + '" title="' + hotelData.n + '" />\
</a></div>\
<div class="row hotelInfo text noUnderLine">\
<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH resultName noUnderLine text">\
<span class="text fontLargest noUnderLine fontBold fontDarkGrey"><span class="tpText_hotelName">' + hotelData.hotelId + ' : ' + hotelData.n + '</span></span></a>\
<div class="rowClear rowBlock">\
<a href="javascript:void(0);" class="importantNote roomSpecialRate text fontBold">&#10003; Best Rate Guaranteed!</a></div>\
<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH notify promo text noUnderLine resultPromo fontPromoBlue">\
$79: Book Now For Holidays Sale</a>\
<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH text hotelSubtitle fontBlack noUnderLine"></a>\
<div class="Rating_Box rowClearOFH"> \
<a href="' + hotelData.url + '" class="updateInterstitial text fontBold fontLightMediumGrey Our_Rating noUnderLine"> Our Rating: </a>\
<a href="' + hotelData.url + '" class="updateInterstitial dateless_stars smallStarRatingGray_' + hotelData.sr + ' text noUnderLine"><img border="0" src="http://images.bookit.com/3.0/Uni_Trans.gif" alt="" title=""></a>\
<a href="' + hotelData.url + '" class="updateInterstitial text fontBold fontLightMediumGrey Guest_Rating noUnderLine">\
Guest Rating: </a>\
<a href="' + hotelData.url + '" class="updateInterstitial text fontLargest guestRatingPercent fontBlack noUnderLine"><b>Exceptional:</b><span class="value">' + hotelData.fr + '</span></a>\
<a onclick="sendToolView("Results to Reviews Tab","Results")" href="' + hotelData.url + '&tabOverride=Reviews" class="numberOfGuestReviews text noUnderLine">\
' + hotelData.nr + ' Reviews </a></div></div>\
</div>\
<div class="priceContainer row">\
<a href="#" class="updateInterstitial text fontAXLarge fontNormal fontBlack noUnderLine">' + hotelData.p + '</a>\
<a href="#" class="row anrContainer text fontSmall fontLightMediumGrey noUnderLine">avg. nightly rate</a>\
<div class="row bookitExtrasContainer"></div>\
<a class="updateInterstitial moreDetails btnContainer greenBorder hotelSelectButton" href="' + hotelData.url + '" onClick="transitionResultsToAddons()" id="tp_search_' + hotelData.hotelId + '">\
<span class="greenBtn">SELECT</span></a></div></div>';
return str;
}
window.buildHotelJQuery = function(hotelData) {
//master row
var row = jQuery('<div>')
.attr('id', 'hotelResult' + hotelData.hotelId)
.addClass('hidden').addClass('pod').addClass('resultsPod').addClass('hotelResults').addClass('rowClearOFH');
if ( hotelData.tsm || hotelData.rqm ) {
row.addClass('saleAlert');
}
if ( hotelData.st > hotelData.p ) {
row.addClass('promo');
}
//hidden inputs
row.append(
jQuery('<input>')
.attr('type','hidden').attr('name','hotelUniqueId').attr('disabled','disabled')
.val(hotelData.hotelId)
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','hotelId').attr('disabled','disabled')
.val("")
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','hotelVendorId').attr('disabled','disabled')
.val("")
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','locationId').attr('disabled','disabled')
.val(hotelData.li)
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','locationName').attr('disabled','disabled')
.val(hotelData.ln)
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','showRates').attr('disabled','disabled')
.val('0')
).append(
jQuery('<input>')
.attr('type','hidden').attr('name','defaultBestTimeToBookitNights').attr('disabled','disabled')
.val('0')
);
//are we doing TSM or RQM?
if ( hotelData.tsm || hotelData.rqm ) {
var saleAlertContainer = jQuery('<div>').addClass('saleAlertContainer');
var saleAlert = jQuery('<div>').addClass('saleAlert');
if ( hotelData.tsm ) {
saleAlert.append(
jQuery('<div>')
.addClass('contentLeft')
.addClass('text')
.addClass('fontRed')
.addClass('fontBold')
.html(hotelData.tsm)
)
}
if ( hotelData.tsm && hotelData.rqm ) {
saleAlert.append(
jQuery('<div>')
.addClass('contentMiddle')
.html("|")
)
}
if ( hotelData.rqm ) {
saleAlert.append(
jQuery('<div>')
.addClass('contentRight')
.addClass('text')
.addClass('fontRed')
.addClass('fontBold')
.html(hotelData.rqm)
)
}
saleAlert.append(
jQuery('<div>')
.addClass('saleBottomLine')
);
saleAlertContainer.append(saleAlert);
row.append(saleAlertContainer);
}
var resultInfo = jQuery('<div>')
.addClass('row').addClass('resultInfo');
var resultInfoMedia = jQuery('<div>')
.addClass('row')
.attr('id','ResultsMainPhoto');
//image/video icon/etc
if ( hotelData.v ) {
resultInfoMedia.append(
jQuery('<a>')
.addClass('resultsWomPlay')
.attr('href', '#none')
.click( function(ev) {
alert('hi');
} )
.append(
jQuery('<img>')
.attr('border', '0')
.attr('src', "//images.bookit.com/3.0/Uni_Trans.gif")
)
);
}
//all inclusive?
if (hotelData.ai) {
resultInfoMedia.append(
jQuery('<div>').addClass('AllInclusiveIcon')
);
}
//photos button
resultInfoMedia.append(
jQuery('<a>')
.addClass('photoBtn').addClass('btnContainer').addClass('grayBorder')
.attr('href', '#none')
.click( function(ev) {
alert('show pics');
} )
.append(
jQuery('<span>')
.addClass('grayBtn')
.html('photos')
)
);
//hotel image
resultInfoMedia.append(
jQuery('<a>')
.addClass('updateInterstitial')
.attr('href', hotelData.url)
.append(
jQuery('<img>')
.addClass('hotelImage')
.attr('id', 'htlImg' + hotelData.hotelId)
.attr('border', '0')
.attr('width', '150')
.attr('height', '95')
.attr('alt', hotelData.n)
.attr('src', hotelData.img)
)
);
resultInfo.append(resultInfoMedia);
//hotel Info block
var hotelInfo= jQuery('<div>')
.addClass('row').addClass('hotelInfo').addClass('text').addClass('noUnderLine');
//hote title
hotelInfo.append(
jQuery('<a>')
.attr('href', hotelData.url)
.addClass('updateInterstitial').addClass('rowClearOFH').addClass('resultName').addClass('noUnderLine').addClass('text')
.append(
jQuery('<span>')
.addClass('text').addClass('fontLargest').addClass('noUnderLine').addClass('fontBold').addClass('fontDarkGrey')
.append(
jQuery('<span>')
.addClass('tpText_hotelName').html(hotelData.n)
)
)
);
//room info special
//@TODO
//promos
if ( hotelData.pr ) {
hotelInfo.append(
jQuery('<a>')
.addClass('updateInterstitial').addClass('rowClearOFH').addClass('notify').addClass('promo').addClass('text').addClass('noUnderLine').addClass('resultPromo').addClass('fontPromoBlue')
.html(hotelData.pr)
);
}
//area text and map link
if ( hotelData.su || hotelData.sd ) {
var text = hotelData.su;
if ( hotelData.sd ) {
var text = text + " " + hotelData.sd + " miles from " + hotelData.ln;
}
} else {
var text = hotelData.ma;
}
hotelInfo.append(
jQuery('<a>')
.addClass('updateInterstitial').addClass('rowClearOFH').addClass('text').addClass('hotelSubtitle').addClass('fontBlack').addClass('noUnderLine')
.html(text)
);
//star and guest rating
var ratingBox = jQuery('<div>').addClass('Rating_Box').addClass('rowClearOFH');
if ( hotelData.sr ) {
ratingBox.append(
jQuery('<a>')
.attr('href', hotelData.url)
.addClass('updateInterstitial').addClass('text').addClass('fontBold').addClass('fontLightMediumGrey').addClass('Our_Rating').addClass('noUnderLine')
.html('Our Rating: ')
).append(
jQuery('<a>')
.attr('href', hotelData.url)
.addClass('updateInterstitial').addClass('dateless_stars').addClass('smallStarRatingGray_' + hotelData.sr).addClass('text').addClass('noUnderLine')
.append(
jQuery('<img>')
.attr('border', '0')
.attr('src', "//images.bookit.com/3.0/Uni_Trans.gif")
)
);
}
if ( hotelData.nr > 0 ) {
if ( hotelData.tr ) {
var userRating = jQuery('<b>').html(hotelData.tr + ": ").after(hotelData.fr);
} else {
var userRating = hotelData.fr;
}
ratingBox.append(
jQuery('<a>')
.attr('href', hotelData.url)
.addClass('updateInterstitial').addClass('text').addClass('fontBold').addClass('fontLightMediumGrey').addClass('Guest_Rating').addClass('noUnderLine')
.html('Guest Rating: ')
).append(
jQuery('<a>')
.attr('href', hotelData.url)
.addClass('updateInterstitial').addClass('text').addClass('fontLargest').addClass('guestRatingPercent').addClass('fontBlack').addClass('noUnderLine')
.html(userRating)
).append(
jQuery('<a>')
.addClass('numberOfGuestReviews').addClass('text').addClass('noUnderLine')
.click( function (ev) {
sendToolView('Results to Reviews Tab','Results');
} )
.attr('href', '#sendToHotelDetailsPage')
.html(hotelData.nr + " Reviews")
);
}
hotelInfo.append(ratingBox);
resultInfo.append(hotelInfo);
row.append(resultInfo);
return row;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment