title: Adding a global variable to a javascript function so that it can be used on another php page
body: <p>I have a script that contains the following code:</p>
  
  <pre><code>$(function(){
  var e=$.cookie("list_grid");
  if(e=="g"){
      $("#products").addClass("smallGrid");
      $("#smallGrid").addClass("disabled")
      }else if(e=="l"){
          $("#products").addClass("largeGrid");
          $("#products").removeClass("smallGrid");
          $("#largeGrid").addClass("disabled")
          }else{
              $("#products").addClass("listGrid");
              $("#products").removeClass("largeGrid");
              $("#products").removeClass("smallGrid");
              $("#list").addClass("disabled")}});
  $(function(){
              $("#smallGrid").click(function(){
              $("#products").fadeOut(300,function(){
              $(this).removeClass("listGrid").fadeIn(300);
              $(this).addClass("smallGrid").fadeIn(300);
              $(this).removeClass("largeGrid").fadeIn(300);
              $.cookie("list_grid","g")});
              $(this).addClass("disabled");
              $("#list").removeClass("disabled");
              $("#largeGrid").removeClass("disabled");
              return false});
  
              $("#largeGrid").click(function(){
              $("#products").fadeOut(300,function(){
              $(this).addClass("largeGrid").fadeIn(300);
              $(this).removeClass("listGrid").fadeIn(300);
              $(this).removeClass("smallGrid").fadeIn(300);
              $.cookie("list_grid","l")});
              $(this).addClass("disabled");
              $("#smallGrid").removeClass("disabled");
              $("#list").removeClass("disabled");
              return false});
  
              $("#list").click(function(){
              $("#products").fadeOut(300,function(){
              $(this).addClass("listGrid").fadeIn(300);
              $(this).removeClass("smallGrid").fadeIn(300);
              $(this).removeClass("largeGrid").fadeIn(300);
              $.cookie("list_grid",null)});
              $(this).addClass("disabled");
              $("#smallGrid").removeClass("disabled");
              $("#largeGrid").removeClass("disabled");
              return false})
              })
  </code></pre>
  
  <p>I need to add a var that can be used in some php code on another page. The purpose of this var is to know what listing type was selected so that i can trigger a specific type of output depending on what format the user requests to see the data in.</p>
  
  <p>I tried to change</p>
  
  <pre><code>$("#smallGrid").click(function(){
  </code></pre>
  
  <p>to include the var as such</p>
  
  <pre><code>$("#smallGrid").click(function(){
  var listingStyle="small"
  </code></pre>
  
  <p>but when i echo the contents of $listingStyle in my php code it is empty.
  The site can use global vars and they are set like </p>
  
  <pre><code>$GLOBALS['variable_name'] = 'this string';
  </code></pre>
  
  <p>but i don't seem to be able to get a javascript var into a php global var</p>
  
  <p>If anyone has any suggestions it would be very much appreciated.</p>