Pull data from a table on one page to another page

Question

I'm using HTML, CSS, js, & Jquery only so far and i'm not trying to pull in SQL or anything that requires 3rd party software. Now, I have a page for videos and what i need to do is build a system that will pull the first 2-3 videos from the video page and show them under "New Videos" section on the index page.

I have no idea how to do this so any help is much appreciated.

Answer 1

If I understand correctly, you wish to grab some data from the video page (the first three video titles) and display them on the index page.

Here are the challenges that you face in accomplishing this task:

1. The index page displays first (so you cannot "remember" the previously-displayed video titles from one page (by saving them in localStorage) and re-display them on another page). LocalStorage will not work in this case

2. The three video titles will be displayed to all visitors to the web page, so you cannot store them on the local computer - they must be stored on the server.

3. HTML is a markup language, not a programming language, so you cannot use it for if/else logic

4. javascript is a browser-based language and only runs locally - so its interaction with the server is extremely limited.

All that being said, however, js/jQuery does have something called AJAX, which allows you to send additional requests to the server - including the jQuery $.load() method, which allows you to load a file from the server into your current page. So, you could either load in the entire index.html page and spend quite a bit of effort stripping out the things that you don't need, or you could store all the videos as a separate file and use .load() to load-in the list on both the videos page and the index page.

If your webserver allows PHP, and MOST do, then another option is to add PHP to your skills list. PHP is a language that lives on the server, like HTML, but with the programming capabilities that HTML lacks. PHP can create HTML code and inject it onto your page -- but it can only do so as the page is being constructed, not after the page has been rendered and displayed to the user (for that you would use javascript).

To use PHP, you must rename all your pages from .html to .php - they will continue to work the same. In fact, you can do that now, with all your pages - try it. They will work the same. The only difference is that on a page ending in .php , you can add PHP code between PHP-ON and PHP-OFF tags, which look like this:

<?php
    include name_of_my_file.php;
?>

The above PHP instruction does pretty much the same thing as jQuery $.load() instruction - it injects the contents of a file named name_of_my_file.php into the rendered page at that location.

With PHP you could store the list of videos in a separate file on the server, all_videos.php and on both the index.php and videos.php pages you could have PHP sections that read these files and loop through the titles, creating HTML code in a string variable that you could then echo (the PHP "write to screen" command) onto the web page at the desired location.

Answer 2

To select the first 2-3 videos on your video page with jQuery try something like this:

//for the first 3: 
$('video info selector').slice( 0, 3 );
//for the first 2
$('video info selector').slice( 0, 2 );

You can then use jQuery's .each() method to loop through your selection and extract the video info that you need for your index page.

For a JavaScript only approach use querySelectorAll() to get all the video info on your video page:

let videoInfo  = document.querySelectorAll("video info selector");

You can then access the first 2-3 videos in videoInfo like this:

let vid1 = videoInfo[0];
let vid2 = videoInfo[2];
let vid3 = videoInfo[3];

You can then extrac what ever info you need from the node for your index page.

Once you have that info you can save it to localStorage as others have suggested. See here for more info about localStorage.

LocalStorage appears to be a viable approach for your situation but you should be aware that it does have a few downsides given your situation:

• This approach requires a user to visit your video page before they visit your index page if you want any video info to be displayed on your index page.
• The info on the index page will only be updated if the user visits your video page again.
• Items in localStorage do not expire on their own, so if a user comes back to your index page after being away for a while (a week a month, etc) without first visiting your video page they will probably see outdated info assuming new videos get added to your site regularly.

As mentioned below here is what '.load()' could look like. You will have to update the code based on your specific DOM structure:

 $(function() { $('#video1').load('video.html .video-link1'); $('#video2').load('video.html .video-link2'); $('#video3').load('video.html .video-link3'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- video.html--> <body> <div class="video-link1"> <img src="videoscreenshot1"> <span>Video Title1</span> <video src="video1"></video> </div> <div class="video-link2"> <img src="videoscreenshot2"> <span>Video Title2</span> <video src="video2"></video> </div> <div class="video-link3"> <img src="videoscreenshot3"> <span>Video Title3</span> <video src="video3"></video> </div> <div class="video-link4"> <img src="videoscreenshot4"> <span>Video Title4</span> <video src="video4"></video> </div> <div class="video-link5"> <img src="videoscreenshot5"> <span>Video Title5</span> <video src="video5"></video> </div> </body> <!-- index.html --> <body> <div id="video1"></div> <div id="video2"></div> <div id="video3"></div> </body> 

Answer 3

使用localstorage概念，它将帮助您从一页读取数据到另一页