Load content into a DIV using Javascript

Asked

Viewed 4,184 times

1

I need to upload the video.html page to div with video id using Javascript. I have the following script: 

function video() {
    $.ajax({
        url: "video.html",
        cache: false,
        success: function(html){
            $("#video").html(html);
        },
    });
}
And the following HTML:

 <div id="video">

</div>
<br/>
    <button onclick="video()">Carregar</button>

But when I click on the "press" button nothing happens.

javascript html html5 ajax

  • Check if you are entering the video function by clicking the button? If so, check if you are entering the ajax Success function. To access the page you are giving 2 clicks on . html and running the function or accessing via http? I think this ajax request, as it is, only works via http. Implement the ajax error method to see the error message.

  • You must be having some error, if you are using Chrome, press F12 and post here the error that is giving. probably must be Xmlhttprequest error

  • And what content is inside the video.html file?

  • what happens if in the ready vc put Alert(html)? Is the video.html page in the same folder as the executed page? You can also test using <button onclick="video();window.open('video.html')"> to see if it is loading correctly. If she is, try replacing the div tag with an embed

  • Did you import the jQuery library? You don’t have to do it this way there are better ways to load a video dynamically.

1 answer

1

There are better ways to do this, take a look here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video.

There’s also this API that can help you with video insertion: http://www.videojs.com/

Obs: if the video is from youtube, you will not be able to do it yourself.
But for a video embedded in html, try calling your method this way:

$(document).ready(function() {
 $('button').on('click', function() {
       $("#video").load("video.html");
   });
});

And in your HTML body:

 <div id="video"><!-- //aqui seu video --></div>
 <br />
 <button>Carregar</button>

If the video is from youtube, you can load it in an iframe, passing the URL at the click of the button.

Browser other questions tagged javascript html html5 ajax

You are not signed in. Login or sign up in order to post.