How does this code run?
June 19, 2013 12:58 AM Subscribe
So I'm boning up on my web development skills, and came across an interesting little box at http://www.mydestination.com/moscow (scroll down to 'Book Your Trip'). How'd they do that? NOT looking to copy it, just learn about how's it done. Plenty more inside.
The box I'm looking at has tabs for Hotels, Flights, Car Rental, and Insurance. The CSS and making the tabbed box is one thing I can do, but digging through the source code doesn't reveal much on a few other questions:
1: How does it pre-populate the boxes with the relevant data? (If you click around to other destinations on the website, you'll notice the local airports to a given city are there, with a drop-down box used where appropriate)
2: In the source code, the only thing I could find that looked like it was responsible was < div class="leftbar" id="whiteLablelContainer" >< /div >
(and yes, 'lablel' is how it was spelled...) There must be more going on here...? There's no div id like that in the CSS files.
3: I know how to make a container responsive, but wouldn't that break the form / background? How does a box like this become responsive without messing up the design?
The box I'm looking at has tabs for Hotels, Flights, Car Rental, and Insurance. The CSS and making the tabbed box is one thing I can do, but digging through the source code doesn't reveal much on a few other questions:
1: How does it pre-populate the boxes with the relevant data? (If you click around to other destinations on the website, you'll notice the local airports to a given city are there, with a drop-down box used where appropriate)
2: In the source code, the only thing I could find that looked like it was responsible was < div class="leftbar" id="whiteLablelContainer" >< /div >
(and yes, 'lablel' is how it was spelled...) There must be more going on here...? There's no div id like that in the CSS files.
3: I know how to make a container responsive, but wouldn't that break the form / background? How does a box like this become responsive without messing up the design?
Have you ever used the Chrome dev tools? Super powerful for answering questions like this.
Secrets of the Browser Developer Tools
The following screenshots show me searching all the resources of the page for "whitelabel" and "whitelablel". It looks like a bog-standard custom jQuery plugin, the data is prepopulated with an AJAX request. There are only three Javascript functions to look at.
whitelabel
whitelablel
This could be state of the art anywhere until four or five years ago. Nowadays we don't like organizing our apps as jQuery spaghetti so much, so people are using stuff like angularjs.
posted by evariste at 1:28 AM on June 19, 2013 [2 favorites]
Secrets of the Browser Developer Tools
The following screenshots show me searching all the resources of the page for "whitelabel" and "whitelablel". It looks like a bog-standard custom jQuery plugin, the data is prepopulated with an AJAX request. There are only three Javascript functions to look at.
whitelabel
whitelablel
This could be state of the art anywhere until four or five years ago. Nowadays we don't like organizing our apps as jQuery spaghetti so much, so people are using stuff like angularjs.
posted by evariste at 1:28 AM on June 19, 2013 [2 favorites]
3: I know how to make a container responsive, but wouldn't that break the form / background? How does a box like this become responsive without messing up the design?Breaking the form: nah. Why would changing some CSS properties on the form to make it more legible on a smaller screen break it? The CSS just controls the form's appearance, semantically it's still the same form.
Breaking the background: just specify CSS properties to shift the background around, or hide the background entirely if your media query tells you the screen size is too small to accommodate it it.
posted by evariste at 1:33 AM on June 19, 2013
They are using jQuery. Check out the jQuery.ajax() api. (Or other options, such as Dojo or any of the other major JavaScript frameworks... they all mostly do the same things, just differently.)
posted by anaelith at 4:17 AM on June 19, 2013
posted by anaelith at 4:17 AM on June 19, 2013
I'll recommend a site to you - jQuery for Designers.
It hasn't been updated in quite a while, so things have changed a bit (jQuery now uses "on" for most of it's event handling), but it's got a good roundup of tutorials that will probably be useful. Here's one on populating select boxes that should answer some of your questions..
posted by backwards guitar at 5:28 AM on June 19, 2013 [1 favorite]
It hasn't been updated in quite a while, so things have changed a bit (jQuery now uses "on" for most of it's event handling), but it's got a good roundup of tutorials that will probably be useful. Here's one on populating select boxes that should answer some of your questions..
posted by backwards guitar at 5:28 AM on June 19, 2013 [1 favorite]
They're either written into the HTML of the page by the server-side code when it loads, or requested dynamically by an XHR.
The tab switching is done with CSS.
posted by deathpanels at 5:30 AM on June 19, 2013
The tab switching is done with CSS.
posted by deathpanels at 5:30 AM on June 19, 2013
Yeah, jQuery is the missing link you're looking for here. With jQuery, you don't put Javascript in the HTML tags like in the bad old days, you use a selector to find the page element you want.
Here's the site code, it's a bit of a mess though.
If you search that code for "whiteLablelContainer" (yes, there's a typo) you'll get a (not terribly well-written) example of what's going on. A jQuery Ajax call is sent to the server, and the container is populated with the results.
(FYI, "$" is the usual variable assigned to jQuery, because "$" is actually a valid variable name in Javascript. So "$.ajax()" just means "jQuery.ajax()".)
posted by neckro23 at 11:17 AM on June 19, 2013
Here's the site code, it's a bit of a mess though.
If you search that code for "whiteLablelContainer" (yes, there's a typo) you'll get a (not terribly well-written) example of what's going on. A jQuery Ajax call is sent to the server, and the container is populated with the results.
(FYI, "$" is the usual variable assigned to jQuery, because "$" is actually a valid variable name in Javascript. So "$.ajax()" just means "jQuery.ajax()".)
posted by neckro23 at 11:17 AM on June 19, 2013
Response by poster: Thanks, all - nice to see so many knowledgable coders around. I've played with Chrome's Developer Tools, and love seeing how many tools there are built into one thing.
A couple / few of you have made it sound like it's not terribly well-written - is there a better way to accomplish the same goal? That is to say, a box that pre-populates the correct data based on the city / country, along with the switching AJAX (?) tabs. Speed of loading, compatibility with mobile browsers, and overall look would seem to be the more important elements.
To be honest, I'd love to work through an example / tutorial with one of you - the goal being to understand what's happening and create a proof-of-concept 'look what I can make' sort of thing. This is worth a few bucks to me - MeMail please?
posted by chrisinseoul at 11:17 PM on June 19, 2013
A couple / few of you have made it sound like it's not terribly well-written - is there a better way to accomplish the same goal? That is to say, a box that pre-populates the correct data based on the city / country, along with the switching AJAX (?) tabs. Speed of loading, compatibility with mobile browsers, and overall look would seem to be the more important elements.
To be honest, I'd love to work through an example / tutorial with one of you - the goal being to understand what's happening and create a proof-of-concept 'look what I can make' sort of thing. This is worth a few bucks to me - MeMail please?
posted by chrisinseoul at 11:17 PM on June 19, 2013
« Older Suggestions For Positive Intellectual Input... | Examples of re-use of unrelated footage of same... Newer »
This thread is closed to new comments.
2. Ajax is used to load this url into the whitelablelContainer div
3. I really don't see how it would mess up the design?
posted by missmagenta at 1:19 AM on June 19, 2013