3

I'm trying to create a function in javascript the will create a video html element, and get the source by retrieving a source element from another web page

I've seen other questions with answers using jquery or some ajax stuff, but nobody actually explains themselves, so all I can do is copy and paste whatever they say into my page and get an error saying "$" is undefined (I'm rather new to javascript if you couldn't tell. Haven't used any ajax or jquery yet).

function loadSource(url){
    var vid = document.getElementById("vid");
    var src = <get source element with id "mp4Source" from the specified url>
    vid.appendChild(src);
}
JereTheJuggler
  • 127
  • 1
  • 2
  • 9

1 Answers1

4

The reason why you're getting $ as undefined is because you have not added the JQuery Library.

There is a good question explaining how to get setup here

Above your JavaScript, you need to include the JQuery Library.

Example of how to include the JQuery Library

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

As for loading the external video element, you need to make an AJAX request to the URL containing the element. AJAX is a way to perform Asynchronous HTTP requests, e.g. requests that are made to a URL without refreshing the web page.

Example of how AJAX can be used to pull HTML from an external URL

function loadSource(url){
    $.ajax({
        url: "<URL containing the HTML>",
    })
    .done(function(html) {
        $("#vid").append(html); // append the html to the element with the ID 'vid'
    });
}

More information on AJAX can be found at http://api.jquery.com/jquery.ajax/

You should also look into the basics of JQuery, such as looking here. An example of how this could be used in your code is by replacing document.getElementById("vid") with $("#vid").

Community
  • 1
  • 1
Toby Mellor
  • 8,093
  • 8
  • 34
  • 58
  • In the done function, is the html parameter the entire html of the url given? If so, can I specifically pull out an element from it giving an id like I can with the current document? or do I have to use string functions to extract the info I need? or would it be possible to filter the results in the object supplied to the ajax function? – JereTheJuggler Apr 25 '17 at 22:45
  • Yes, `html` is a string containing all of the HTML found on ``. You could use string functions to pull out a specific element, such as http://stackoverflow.com/questions/14867835/get-substring-between-two-characters-using-javascript. Once you understand JQuery more, you could use something like `$("#vid").closest("")`. But that's beyond the scope of this question. – Toby Mellor Apr 25 '17 at 22:50
  • So now that I've added the jquery src to my script tag I'm getting errors saying that my other functions aren't defined when they are. If I try to break it up into 2 script tags, 1 for all of my other functions and 1 for the jquery, I can't reference the jquery function anymore. – JereTheJuggler Apr 25 '17 at 23:02
  • I'm unable to help without the code and the full error messages from the console. The script tag that references the JQuery library should be separate and above your code. Your code should be contained in another set of script tags. – Toby Mellor Apr 25 '17 at 23:13
  • The error is an uncaught ReferenceError saying that "loadPage is not defined". Just to simplify everything I've switched over to a new html page and I'm just having the function write the retrieved html to the console. Here's the code https://pastebin.com/iDb608uL – JereTheJuggler Apr 25 '17 at 23:24
  • @JereTheJuggler Nothing should go between JQuery's script tags. All of your Javascript should be between the same tags. – Toby Mellor Apr 25 '17 at 23:25
  • @JereTheJuggler https://pastebin.com/dSGNFwCc - If I have answered your question please don't forget to mark the correct answer – Toby Mellor Apr 25 '17 at 23:27