PHP variable in Javascript (.js file)

Discussion in 'JavaScript' started by WPPJames, May 14, 2010.

  1. #1
    Please note that I have omitted some code below for readability.

    I have a .php file, feed.php:

    <?php 
      require_once 'config.php';
      $a_url = $_POST["aurl"];
      $v_url = $_POST["vurl"];
    ?>
    
    <html>
    
    <head>
    
    <link rel="stylesheet" type="text/css" href="interstitial.css" />
    
    <script type="text/javascript" src="interstitial.js">
    
    </script>
    
    
    </head>
    
    <body>
    
    
    <iframe src = "<?=$v_url;?>" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="no"></iframe>
    
    
    </body>
    </html>
    Code (markup):
    Please note the assigning of variable '$a_url' in the code above. Also note the loading of the interstitial.js file (<script type="text/javascript" src="interstitial.js">).

    Here is my interstitial.js file:

    var interstitialBox={
    displayfiles: ['<?php echo $a_url?>'],
    
    createcontainer:function(){
    //write out entire HTML for Interstitial Box:
    document.write('<div id="interContainer">'+this.defineheader+'<div id="interContent"></div></div><div id="interVeil"></div>')
    this.interContainer=document.getElementById("interContainer") //reference interstitial container
    this.interVeil=document.getElementById("interVeil") //reference veil
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    },
    
    initialize:function(){
    this.createcontainer() //write out interstitial container
    this.ajaxconnect(this.displayfiles[Math.floor(Math.random()*this.displayfiles.length)], this.interContainer) //load page into content via ajax
    this.dotask(window, function(){interstitialBox.hidescrollbar(); interstitialBox.getscrollbarwidth(); setTimeout("interstitialBox.showcontainer()", 100)}, "load")
    this.dotask(window, function(){interstitialBox.showcontainer()}, "resize")
    }
    }
    Code (markup):
    I want to use the $a_url variable set in feed.php within the javascript code in the interstitial.js file. As you can see above, I tried using:

    displayfiles: ['<?php echo $a_url?>'],

    in addition to several other variations. Doesn't work. Any suggestions?
     
    WPPJames, May 14, 2010 IP
  2. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    It won't work like this!! Here is the complete solution:
    <?php 
      require_once 'config.php';
      $a_url = $_POST["aurl"];
      $v_url = $_POST["vurl"];
    ?>
    
    <html>
    
    <head>
    
    <link rel="stylesheet" type="text/css" href="interstitial.css" />
    
    <script type="text/javascript" src="interstitial.php?df=<?php echo $a_url;?>"> <!-- We pass the $a_url to the interstitial js file using the URL which will be fetched by the PHP -->
    
    PHP:
    Now the interstitial.js file is like follows:
    interstitial.php
    <?php
    header( 'Content-Type: text/javascript; charset=utf-8' ); //Tells browser that it is a JS file
    $a_url = $_GET['df']; //Get the $a_url from using GET superglobal which was sent through the feed.php file using variable URL method
    ?>
    var interstitialBox={
    displayfiles: ['<?php echo $a_url; ?>'],
    
    createcontainer:function(){
    //write out entire HTML for Interstitial Box:
    document.write('<div id="interContainer">'+this.defineheader+'<div id="interContent"></div></div><div id="interVeil"></div>')
    this.interContainer=document.getElementById("interContainer") //reference interstitial container
    this.interVeil=document.getElementById("interVeil") //reference veil
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    },
    
    initialize:function(){
    this.createcontainer() //write out interstitial container
    this.ajaxconnect(this.displayfiles[Math.floor(Math.random()*this.displayfiles.length)], this.interContainer) //load page into content via ajax
    this.dotask(window, function(){interstitialBox.hidescrollbar(); interstitialBox.getscrollbarwidth(); setTimeout("interstitialBox.showcontainer()", 100)}, "load")
    this.dotask(window, function(){interstitialBox.showcontainer()}, "resize")
    }
    }
    PHP:
    basically what we do is, pass the $a_url variable through the URL of the PHP script making the JS [interstitial.php]. Now we use $_GET to fetch the variable and construct the JS accordingly! You can do the same for all the variables. To pass them you need to change the URL of the interstitial.php like this:
    interstitial.php?df=<?php echo $a_url;?>&amp;variable2=<?php echo $variable2; ?>
    PHP:
    etc...
     
    swashata, May 14, 2010 IP
  3. gapz101

    gapz101 Well-Known Member

    Messages:
    524
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    150
    #3
    first you may have to add php handler your .js files,
    or rename your js file to php (you may use htacess to redirect your js to php)
     
    gapz101, May 15, 2010 IP
  4. WPPJames

    WPPJames Well-Known Member

    Messages:
    281
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    153
    #4
    gapz101: Thanks for the suggestion. I appreciate you taking the time to do so.

    You were right...the .js file did have to be renamed to .php. I worked with swashata and he was able to get everything working for me just fine, as well as fix another problem I was having. One I'd worked on for hours that he fixed in less than 10 minutes.
     
    WPPJames, May 16, 2010 IP