Show JW Player

JavaScript
1

down vote favorite

I have page that has a text input and a button the user must fill a URL which is referring to a playable media file(mp4) in the text field and click the button

when the button is clicked the a script is running and ajax is passing the url value to PHP file which do some verifications and send the response back

if every thing is ok it should replace the DIV tag with JW player and the user can play the media

I test the whole process by replacing the DIV tag with a plain text or image and it worked smoothly

and when I tried to replace it with the jw player component it is not showing any thing

I tested the jw by inserting it directly in the HTML code and it worked smoothly

here is the full index.html


<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="/ajax4/jwplayer.js"></script>
    <script type="text/javascript">jwplayer.key="RXVe0CXFsIS8pAar5ezgSLJqb9jfx7rDOBxkVw==";</script>
    <script type="text/javascript"><!--

    function get_XmlHttp() {
      var xmlHttp = null;

      if(window.XMLHttpRequest) {       // for Forefox, IE7+, Opera, Safari, ...
        xmlHttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject) {   // for Internet Explorer 5 or 6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      return xmlHttp;
    }

    // sends data to a php file, via POST, and displays the received answer
    function ajaxrequest(php_file, tagID) {
      var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance

      // create pairs index=value with data that must be sent to server
      var hiturl = document.getElementById('hit').value;
      var  the_data = 'hiturl='+hiturl;

      request.open("POST", php_file, true);         // set the request

      // adds  a header to tell the PHP script to recognize the data as is sent via POST
      request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      request.send(the_data);       // calls the send() method with datas as parameter

      // Check request status
      // If the response is received completely, will be transferred to the HTML tag with tagID
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          document.getElementById(tagID).innerHTML = request.responseText;
        }
      }
    }
    --></script>

    </head>
    <body>
    <form action="test_form.php" method="post" name="form1" onsubmit="ajaxrequest('hitphp.php', 'myDiv'); return false;">
    <label for="name" id="name_label">hit URL: </label>  
    <input type="text" name="hit" id="hit" size="100"  /> 
    <input type="submit" value="Enter hit UrL" />

    </form>
    <div id="myDiv"></div>

    </body>
    </html>
==================================================================


and the hitphp.php file
===================================================================
<?php
    // if data are received via POST
    if (isset($_POST['hiturl'])) {
      // get data into variables, deleting the html tags
      $hiturl = strip_tags($_POST['hiturl']);

      // if the form fields are completed
      if (true) {
        if (true) {


    echo'<div id="myElement">nnnnn.....</div><script type="text/javascript">
jwplayer("myElement").setup({

    type:"mp4", 
    bufferlength: "60",
    file: "mediaurl",


});


</script>';



}else{
echo 'sorry not a valid url';
}
      }
      else {
        echo 'Fill in all form fields';
      }
    }
    ?>

Thanks in advance

2

any suggestions guys?

3

I found a good answer to your question here:

http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml

4

thanks a lot … it is great hint … but I tried following the recommendations in the site but also not working I added the following lines in the ajax script

 if (request.readyState == 4) {
      
var div = document.createElement('div');
div.innerHTML = request.responseText;
var children = div.childNodes;
myDiv.innerHTML = "";
for(var i=0;i&lt;children.length;i++)
myDiv.appendChild(children[i]);