Get id from url in javascript

Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
User avatar
JanMolendijk
Posts: 282
Location: Holland Rotterdam

Get id from url in javascript

Last time you learnt me how to add an id from url to a javascript
but by this script it is not working what do I do wrong ????

Code: Select all


<?php 
include('../connection.php');

$id = isset($_GET['id']) ?(int) $_GET['id'] :'';
//your code ..
?>
<!DOCTYPE html>
<html>
  <head>
    <!-- page title -->
    <title>YouTube in Your App</title>
    <!-- Style imports for Material Design Lite -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- This code loads the iFrame Player API code asynchronously.-->
    <script src = "//www.youtube.com/iframe_api"></script>
    <!-- This is the source of the Javscript for the demo -->
 
<script>
var id_usr ='<?php echo $id; ?>';
</script>

   <script src="demo.js"></script>

  </head>
  <body>
    <!-- Header -->
  
      <main class="mdl-layout__content">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--5-col">
            <!-- The iframe video player will replace this <div> tag. -->
            <div id="player"></div>
          </div>

this is the demo script demo.js

Code: Select all

var id_usr ='$_GET["id"]';

var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: '+id_usr',
    // Setup event handelers
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onPlaybackQualityChange': onPlaybackQualityChange,
      'onPlaybackRateChange': onPlaybackRateChange,
      'onError': onError,
      'onApiChange': onApiChange,
    }
  });
};
// Set the id of the video to be played
videoId: '+id_usr',

I try to get this kind off id from url: Player/Video.php?id=Sj2GVab9nOo

Please help.
Admin Posts: 805
You cannot use php code in external js file, so, delete this code from demo.js:

Code: Select all

var id_usr ='$_GET["id"]';  // Wrong
- Since, id_usr variable is defined in page before demo.js it is recognized in the .js file.

But you can get data from url directly in javascript, see the code example from this page: coursesweb.net/javascript/get-data-url-address-javascript_cs
JanMolendijk Posts: 282
I still don`t understand how to get the id in the videoid ???? `please help`
// Set the id of the video to be played
videoId: '+id',

Code: Select all

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i<ar_url_data.length; i++) {
 var ar_val = ar_url_data[i].split('='); // separate name and value from each pair
 data_url[ar_val[0]] = ar_val[1];
 }

 return data_url;
}

// Using getDataUrl()

var url = 'http://145.53.93.209/Molendijk/Playerxxxx/Video.php?id=Sj2GVab9nOo';
var data_url = getDataUrl(url); // gets the object with 'name:value' data
var name = data_url.name;
var id = data_url.id;

// test
document.write(' '+ id);


var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: '+id',
    // Setup event handelers
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onPlaybackQualityChange': onPlaybackQualityChange,
      'onPlaybackRateChange': onPlaybackRateChange,
      'onError': onError,
      'onApiChange': onApiChange,
    }
  });
};
Admin Posts: 805
The following code gets the id from url and store it in the id_video variable.

Code: Select all

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i<ar_url_data.length; i++) {
 var ar_val = ar_url_data[i].split('='); // separate name and value from each pair
 data_url[ar_val[0]] = ar_val[1];
 }

 return data_url;
}

// Using getDataUrl()

var url ='http://145.53.93.209/Molendijk/Playerxxxx/Video.php?id=Sj2GVab9nOo';
var data_url = getDataUrl(url); // gets an object with 'name:value' data
var id_video = data_url.id ? data_url.id :''; // Sj2GVab9nOo

// test
alert(id_video);
Just put the id_video in your script.

Code: Select all

videoId: id_video,
To get the id from the url of the current page, use:

Code: Select all

var url = window.location;
JanMolendijk Posts: 282
I try to find out what I do wrong now because it still not detect the id from url....

at the bottom I would like to detect videoId: 'id_video',

Code: Select all

// Returns an object with elements 'name: value' with data ftom URL (the 'name=value' pairs)
function getDataUrl(url) {
 // https://coursesweb.net/javascript
 var url_data = url.match(/\?([^#]*)/i)[1]; // gets the string between '?' and '#'

 // separate the data into an array, in case the are multiple pairs name=value
 var ar_url_data = url_data.split('&');

 // traverse the array, and adds into an object elements name:value
 var data_url = {};
 for(var i=0; i<ar_url_data.length; i++) {
 var ar_val = ar_url_data[i].split('='); // separate name and value from each pair
 data_url[ar_val[0]] = ar_val[1];
 }

 return data_url;
}

// Using getDataUrl()

var url = window.location;
var data_url = getDataUrl(url); // gets an object with 'name:value' data
var id_video = data_url.id ? data_url.id :''; // Sj2GVab9nOo


// test
alert(id_video);


var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: 'id_video',
    // Setup event handelers


I hope you can help me out because it is hocus-pocus for me
Admin Posts: 805
In your onYouTubeIframeAPIReady() function, put the id_video variable without quotes.:

Code: Select all

videoId: id_video,
JanMolendijk Posts: 282
it doesn't detect the id it doesn't work ????
Is their meight something else ????
Admin Posts: 805
Maybe there is some mistake in other part of your script.
Check to see if there is any js error in browser console, F12.
What value it shows in your browser the alert instruction?

Code: Select all

// test
alert(id_video);

Similar Topics