[watadude]

Attempting: Building HTML code for a 2-level menu. An PHP array is created from a MySQL query for both levels. A javascript function handles the 'onmouseover' event to populate the 2nd level of the menu.

I had everthing working until I began passing anchor tags to the js function.

So instead of passing preformated HTML text (entire 2nd menu level) to the js function, I decided to pass only the required index to the PHP array.

Problem: Converting the passed js argument (index) to a PHP variable. Quite simple I imagine, but I have researched this and everything I tried to plug in - fails. Here's the line I'm trying to get right:

PHP Code:

    $indx = echo '<script type="text/JavaScript"> echo index; </script>'; 

Here's the js function with embedded PHP code:

PHP Code:

function show_text(index,whichdiv){

  <?php

//  $indx = 2;  // Hardcode Works - but index actually varies with ea. call

//  Now try passing JS variable:  does not work

    $indx = echo '<script type="text/JavaScript"> echo index; </script>';  



    $arrCmds   = array_values($arrButtons[$indx]['cat2']);

    $arrRefs   = array_values($arrButtons[$indx]['ref2']);



    $txtSubMenu = '';

    for ($c=0; ($c < count($arrCmds)); $c++) {

      if (($c+1) < count($arrCmds)) {

        $txtSubMenu .= '<a href='.$arrRefs[$c].'>'.$arrCmds[$c].'</a>  |  ';

      }

      else {

        $txtSubMenu .= '<a href='.$arrRefs[$c].'>'.$arrCmds[$c].'</a>';

      }

    }

    echo "thetext = '$txtSubMenu';\n  ";

  ?>



  var text = '<font size="2" face="Arial" color=<?php echo $colDarkGray;?>>'+

                 thetext+'</font>';

    

  if (ie) eval("document.all."+whichdiv).innerHTML=text

  else if (ns6) document.getElementById(whichdiv).innerHTML=text

}

Thanks,
Steve

[sarat.pediredla]

Steve,

Javascript and PHP ARE NOT THE SAME. You're thinking, duh! obviously but I mean Javascript is a "client side" technology while PHP is a "server side" technology.

Your Javascript can read from PHP variables only because the .php page is being processes on the server "first" and the output returned. Hence any variables will be output into the JS.

However, the reverse is NOT true. Your Javascript does not have access to any PHP information as it resides on the server. The only way you can make JS variables accessible to PHP is to make POST or GET back to the server (call the .php again) with the required variables+values.

[watadude]

Sarat

Thanks, I'm new at this. As I understand, the PHP code is parsed first on the server, all executions/substitutions are made and HTML code is the result.

Now in the following code, the 'onmouseover' code is rendered as "show_text('1','Words')" for button #1 and this is stored as part of the HTML code.

Once the mouse hovers over it on the client side, then the JS "show_text()" is actually called and executed. The PHP array no longer exists. Right so far?

The only way you can make JS variables accessible to PHP is to make POST or GET back to the server (call the .php again) with the required variables+values.

Can you give an example of calling the same php with var=value? Would this refresh (repaint the browser) the same page everytime it is called?

Could I give the table cell (<td id="value1,value2">) an ID with the (2) values I want to recall in my JS show_text() function?

Thanks again,
Steve

PHP Code:

<table>

  <tr>

<?php

  for ($j=0; ($j < count($arrButtons)); $j++) {

    $txtButton = $arrButtons[$j]['cat1'];

    $txtColor  = $arrButtons[$j]['col1'];

    $tblID     = "tbl".$txtButton;

?>

   <td>

      <table id=<?=$tblID;?> >

        <tr>

          <td bgcolor=<?=$colMidGray;?> 

              onclick="dspSubMenu.php" 

              onmouseover="show_text('<?=$j;?>','Words')" 

              onmouseout="reset('Words')" 

              style="cursor:pointer; cursor:hand">

                            

              <p align="center"><font face="Arial" color=<?=$txtColor;?> ><b>

              <?=$txtButton;?>

              </b></font></p>

          </td>

        </tr>

      </table>

    </td>

<?php

    }

?>

  </tr>

</table>

    

<table>    

    <tr height="30">

        <td align="center" height="30">

        <span id="Words">

        <font size="2" face="Arial" color=<?=$colDarkGray;?> >

        Select A Category Above

        </font>

        </span>

        </td>

    </tr>

</table>

[watadude]

Ok, here's my new attempt:

The first code frag converts a PHP 2D array ($arrButtons[]) to javascript array ($js_menu()):

PHP Code:

<?php

$js_menu = 'var arrButts = new Array(';

for ($x=0; $x < count($arrButtons); $x++) {

  $js_menu .= '"'.$arrButtons[$x]['cat2'].'"';

  if ($x < (count($arrButtons)-1)) {

    $js_menu .= ',';

  }

}

$js_menu .= ')';

?>

This 2nd set uses the prev created JS array to display on the page:

PHP Code:

<?php

  echo<<<END

  <script language="JavaScript">

  <!-- Begin

  var ns6=document.getElementById&&!document.all

  var ie=document.all

  $js_menu        // var arrButts=new Array(,,,)

  function show_text(index,whichdiv){

    thetext = arrButts(index)

    var text = '<font size="2" face="Arial" color="#FFFFFF" >'+thetext+'</font>'

        

    if (ie) eval("document.all."+whichdiv).innerHTML=text

    else if (ns6) document.getElementById(whichdiv).innerHTML=text

  }

  //  End -->

  </script>

  END;

?>

Most of this code was extracted from various gurus in this forum - thanks.

Somewhere in here is an error that prevents the whole page from loading. There's a nickel for the first persons who finds it, so I can get some sleep!

Thanks,
Steve

[job0107]

Originally Posted by watadude

Ok, here's my new attempt:

The first code frag converts a PHP 2D array ($arrButtons[]) to javascript array ($js_menu()):

PHP Code:

<?php
$js_menu = 'var arrButts = new Array(';
for ($x=0; $x < count($arrButtons); $x++) {
  $js_menu .= '"'.$arrButtons[$x]['cat2'].'"';
  if ($x < (count($arrButtons)-1)) {
    $js_menu .= ',';
  }
}
$js_menu .= ')';
?>

This 2nd set uses the prev created JS array to display on the page:

PHP Code:

<?php
  echo<<<END
  <script language="JavaScript">
  <!-- Begin
  var ns6=document.getElementById&&!document.all
  var ie=document.all
  $js_menu        // var arrButts=new Array(,,,)
  function show_text(index,whichdiv){
    thetext = arrButts(index)
    var text = '<font size="2" face="Arial" color="#FFFFFF" >'+thetext+'</font>'
        
    if (ie) eval("document.all."+whichdiv).innerHTML=text
    else if (ns6) document.getElementById(whichdiv).innerHTML=text
  }
  //  End -->
  </script>
  END;
?>

Most of this code was extracted from various gurus in this forum - thanks.

Somewhere in here is an error that prevents the whole page from loading. There's a nickel for the first persons who finds it, so I can get some sleep!

Thanks,
Steve

You need to use AJAX.

Setup your main page to look the way you want when it first loads.
Then use the body elements onload event to invoke an Ajax routine that calls a PHP page that sends back the info you need to populate your JavaScript array.
Now you can use JavaScript to grab values from the array to use in your HTML.
Any time you need new data for your JavaScript array, you just invoke the Ajax routine to get the requested data.

You have to remember that you can not mix PHP and JavaScript at the server.
PHP has to be requested from the server and JavaScript can then use it at the client.