In this hack I explained how I utilised dynamically populated pages and ajax request to create video pop ups to boost a user-friendly experience for our visitors.
In response to a request from our marketing team, I embarked on the task of building a dynamic page on HubSpot to promote our "Behind the Hub" video series.
Our aim was to develop an intuitive and visually appealing interface that would seamlessly integrate with the existing website that enable visitors to access all the videos, as well as register for upcoming live events.
To achieve the desired functionality, I decided to leverage the power of dynamically populated pages. You can find out how to set dynamically populated pages in one of my previous hacks here. To ensure a smooth and uninterrupted user experience, reducing loading times and enhancing interactivity I thought about employing ajax request. This technique allows for the retrieval of data from a server asynchronously. This means that when a user interacts with a specific element on the page the content is dynamically loaded into a designated area on the page.
And this is how I did it.
On my main page I created an interface overlay that was going to display the pop up with the retrieved content. I added an ‘interface-overlay’ class to it. Then around the section of the dynamically populated page that I wanted to display in my pop up I added a div with an ‘ajax-content’ id.
Then I wrote the following code:
Let’s break it down step by step:
- `$('a.c-videos__inner_img').on('click', function(e) { ... });` attaches a click event handler to all `<a>` elements with the class `c-videos__inner_img`. When any of these elements is clicked, the function specified inside the event handler is executed. The function takes an event object (`e`) as a parameter.
- `e.preventDefault();` is a method call on the event object (`e`). It prevents the default action that would normally occur when the `<a>` element is clicked. In this case, it prevents the browser from following the link and navigating to the URL specified in the `href` attribute.
- `var hs_url = $(this).attr('href');` retrieves the value of the `href` attribute from the clicked `<a>` element and stores it in the `hs_url` variable.
- `$('.interface-overlay__inner_content').load(hs_url + ' #ajax-content', function() { ... });` loads content from the URL specified by `hs_url`, and inserts the portion of that content with the ID `ajax-content` into the elements selected by `$('.interface-overlay__inner_content')`. The callback function specified after the comma is executed once the content is successfully loaded and inserted. Inside this callback function, `$('.interface-overlay').addClass('active')` adds the class `active` to elements with the class `interface-overlay`. You can read more about loading page fragments here.
- `$('.interface-overlay__inner_close-button').on('click', function(e) { ... });` attaches a click event handler to elements with the class `interface-overlay__inner_close-button`. When any of these elements are clicked, the function specified inside the event handler is executed. The function takes an event object (`e`) as a parameter.
- `$('.interface-overlay').removeClass('active');` removes the class `active` from elements with the class `interface-overlay`.
- `$('.interface-overlay__inner_content').empty();` empties the contents of elements with the class `interface-overlay__inner_content`. This clears any previously loaded content from these elements.
In summary, I set up an event handler for the click event on the play button. When a user clicks on a video thumbnail, an ajax request is triggered, retrieving the video content from a dynamically populated page. The video is then displayed in a pop-up. This way I eliminated the need for a complete page reload and created a smooth user experience.
Author: Justyna Wegner
Web Developer
