How to use a php variable in JavaScript

Question

I want to add tabs for the images on my website. Images are added by the users and listed on the page. Every image will have its own tabs under it. I have found this source and applied it:

<style>
  .tabContainer{margin:10px 0;width:400px;}
.tabContainer .digiTabs{list-style:none;display:block;overflow:hidden;margin:0;padding:0px;position:relative;top:1px;}
 .tabContainer .digiTabs li{float:left;background-color:#46AAF7;border:1px solid #e1e1e1;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff;}
.tabContainer .digiTabs .selected{background-color:#fff;color:#393939;}#tabContent{padding:10px;background-color:#fff;overflow:hidden;float:left;margin-bottom:10px;border:1px solid #e1e1e1;width:93%;}
</style>
<script type="text/javascript">
 function tabs(x)
 {
  var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL

  for(i=0;i<lis.length;i++)
  {
  lis[i].className=""; //removes the classname from all the LI
}
x.className="selected"; //the clicked tab gets the classname selected
var res=document.getElementById("tabContent");  //the resource for the main tabContent
var tab=x.id;
switch(tab) //this switch case replaces the tabContent
{
  case "tab1":
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

  case "tab2":
    res.innerHTML=document.getElementById("tab2Content").innerHTML;
    break;
  case "tab3":
    res.innerHTML=document.getElementById("tab3Content").innerHTML;
    break;
  default:
    res.innerHTML=document.getElementById("tab1Content").innerHTML;
    break;

}
 }

</script>
     <div class="tabContainer" >
      <ul class="digiTabs" id="sidebarTabs">
         <li  id="tab1" class="selected"  onclick="tabs(this);">Tab 1</li>
         <li id="tab2" onclick="tabs(this);">Tab 2</li>
         <li id="tab3"  onclick="tabs(this);">Tab 3</li>
      </ul>
       <div id="tabContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>

       <div id="tab1Content" style="display:none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
       <div id="tab2Content" style="display:none;"><img src="http://www.digimantra.com/digimantra_ad_125_125.png" alt="digimantra logo" /></div>

      <div id="tab3Content" style="display:none;">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>

But in this case, no matter which tab you click, only the tabs of the firs image isopened. I want to try the solution of defining variable for divs. So I aded:

{$aPhoto.photo_id}

after the divs like

tab3Content_{$aPhoto.photo_id}

So every item has its own div now. (example: tab3Content_16, tab3Content_17)

But I don't know how can I apply this photo id variable in Java Script. I will be happy for your answers.

Answer 1

Generally, if you want use an variales from server side (PHP, Java, C#, python, ...) on client side (JavaScipt, HTML, CSS, ...) you have to write the variables to the page.

For PHP and JavaScript it could be done by this:

<script type="text/javascript">
  // Create global variable named jsVariable
  var jsVariable = <?php echo $PHPvariable; ?>;
</script>

When $PHPvariable contains value 10, then generated source code on client side is:

<script type="text/javascript">
  // Create global variable named jsVariable
  var jsVariable = 10;
</script>

Be carefull if you're using String variable, then you have to write quot sign (") into your code like jsVariable = "<?php= $PHPvariable ?>";

Anyway this is not applicable for you. In your example you have static JavaScript which count with used names, code structure and tabs count is always 3. If user has possibility upload any number of images and you want to show it when clicking on appropriate tab you have to change you JavaScript code. Simplest way for you is using a jQuery library.

Then you have to realize which HTML structure do you want use. Minimal structure based on your code is:

 <div class="tabContainer" >
   <ul class="digiTabs" id="sidebarTabs">
     <li  id="tab1" class="selected"  onclick="tabs(this);">Tab 1</li>
     <li id="tab2" onclick="tabs(this);">Tab 2</li>
     <li id="tab3"  onclick="tabs(this);">Tab 3</li>
   </ul>
   <div id="tabContent">Lorem Ipsum ...</div>
</div>

<div class="tabHolder" style="display:none;">
  <div id="tab1Content">Lorem Ipsum ...</div>
  <div id="tab2Content"><img src="..."/></div>
  <div id="tab3Content">The standard ...</div>
</div>

This HTML code could be generated by PHP code like:

 <div class="tabContainer" >
   <ul class="digiTabs" id="sidebarTabs">
     <?php echo '<li id="tab'.$aPhoto.photo_id.'">'.$aPhoto.photo_name.'</li>'; ?>
   </ul>
   <div id="tabContent">Lorem Ipsum ...</div>
</div>

<div class="tabHolder" style="display:none;">
  <?php echo '<div id="tab'.$aPhoto.photo_id.'Content"><img src="'.$aPhoto.photo_src.'"/></div>'; ?>
</div>

And then you can write JavaScript based on which li is clicked. Using jQuery it could be like this:

// Invoke script when document is ready
$(document).ready(function() {
  // Add click handler to ul.tabContainer > li
  $('ul.tabContainer > li').click(function() {
    // get ID of clicked element
    var id = $(this).attr('id'); // expacted values are tab1, tab2, tab3, ...
    // find hidden content in div.tabHolder
    var content = $('div.tabHolder #' + id + 'Content');
    // Copy HTML content from selected content to div#tabContent
    $('div#tabContent').html(content.html()); // method html() without parameters gets content, method html(htmlData) with one parameter sets content.
    // clear variables to prevent IE memmory leaks
    id = null;
    content = null;
  });
});