acessing PHP variables in javascript - php

Question

OK, so I'm not a programmer so please don't beat me up too much... I have a situation where I have some javascript (for jqgrid) that I would like some of the values to be populated from a PHP variable. What I did to get around this is to use PHP and put all the javascript code within a 'here document'. All looks to work well but I thought I'd reach out to all of you to see if there is a way to streamline my programming. The code is below for reference.
global $database;
$switchesStr = "";
$sql = "SELECT id,name FROM switch ORDER BY name asc";
$result = $database->query($sql);
while($row = mysql_fetch_array($result,MYSQL_NUM)) {
$switchesStr .= $row[0].":".$row[1].";";
}
$switchesStr = substr_replace($switchesStr,"",-1);
$vlansStr = "";
$vlansStr = "0:System Default;";
$sql = "SELECT id,vlan_description FROM vlan ORDER BY default_name asc";
$result = $database->query($sql);
while($row = mysql_fetch_array($result,MYSQL_NUM)) {
$vlansStr .= $row[0].":".$row[1].";";
}
$vlansStr = substr_replace($vlansStr,"",-1);
echo <<<DOC
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#htmlTablePorts").jqGrid({
url:'crud_ports.php',
editurl:'crud_ports.php',
datatype: 'json',
mtype: 'POST',
colNames:['id','switch','Switch IP','Switch Name','Port Name','up','Comment','restart_now','Auth Profile','VLAN','Shutdown','Last Seen'],
colModel :[{
name:'id'
,width:55
},{
name:'switch'
,index:'switch'
,editable:true
},{
name:'ip'
,index:'ip'
,width:70
},{
name:'sname'
,index:'sname'
,width:120
,edittype:'select'
,editoptions:{value:"$switchesStr"}
},{
name:'pname'
,index:'pname'
,width:65
},{
name:'up'
,index:'up'
,width:80
},{
name:'comment'
,index:'comment'
,width:125
,editable:true
},{
name:'restart_now'
,index:'restart_now'
,width:110
},{
name:'auth_profile'
,index:'auth_profile'
,width:110
,editable:true
,edittype:'select'
,editoptions:{value:"0: ;1:Static;2:Dynamic"}
},{
name:'vlan_description'
,index:'vlan_description'
,width:110
,editable:true
,edittype:'select'
,editoptions:{value:"$vlansStr"}
},{
name:'shutdown'
,index:'shutdown'
,width:110
,editable:true
,edittype:'checkbox'
,editoptions:{value:"Yes:No"}
},{
name:'last_monitored'
,index:'last_monitored'
,width:110
}],
pager: jQuery('#htmlPagerPorts'),
rowNum:20,
rowList:[10,20,30,50,100],
sortname: 'switch',
sortorder: "asc",
viewrecords: true,
height: "auto",
imgpath: 'themes/steel/images',
caption: 'Port Management',
multiselect: false,
afterInsertRow: function(rowid, aData){
switch (aData.shutdown) {
case '0': jQuery("#htmlTablePorts").setCell(rowid,'shutdown','No',{}); break;
case '1': jQuery("#htmlTablePorts").setCell(rowid,'shutdown','Yes',{}); break;
}
switch (aData.auth_profile) {
case '0': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile',' ',{}); break;
case '1': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','Static',{}); break;
case '2': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','Dynamic',{}); break;
}
switch (aData.up) {
case '2': jQuery("#htmlTablePorts").setCell(rowid,'sname','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'pname','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'shutdown','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'ip','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'comment','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'vlan_description','',{background:'red',color:'white'});
jQuery("#htmlTablePorts").setCell(rowid,'last_monitored','',{background:'red',color:'white'});
break;
}
switch (aData.shutdown) {
case '2': jQuery("#htmlTablePorts").setCell(rowid,'sname','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'pname','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'shutdown','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'ip','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'comment','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'vlan_description','',{color:'red'});
jQuery("#htmlTablePorts").setCell(rowid,'last_monitored','',{color:'red'});
break;
}
}
}).navGrid('#htmlPagerPorts',
{add:false}, //options
{height:130,reloadAfterSubmit:true}, // edit options
{height:130,reloadAfterSubmit:true}, // add options
{reloadAfterSubmit:true}, // del options
{} // search options
).hideCol(["id","switch","auth_profile","up","restart_now","shutdown"]);
});/* end of on ready event */
</script>
DOC;

Answer 1

I believe the best way to do this would be to inside your javascript echo out what you need. For example with json_encode:
<?php $name = 'Ben'; ?>
<script type="text/javascript">
var name = <?php echo json_encode($name); ?>;
alert(name);
</script>
Or if you know the type of the value and it is not complex (like a string):
<script type="text/javascript">
var name = "<?php echo $name; ?>";
alert(name);
</script>

Answer 2

You could have PHP write in the information at runtime...
<script type="text/javascript" language="<strong class="highlight">javascript</strong>">
<!--
<?php
echo("firstVar = $var1;");
echo("2ndVar = $var2;");
?>
// -->
</script>

Answer 3

Well, if you are confortable with this way, continue. Style is always personal...
The methods by BenMills and Urda are ok too. And, when the vars in javascript are strings, don't forget to quote it too.