Putting PHP/MySql Results into Javascript

Question

I think I'm getting closer to understanding how to move my site towards a more PHP OOP approach.

I have different pages for each of my users because they all have different needs for a javascript generated grid. For maintainability, can I have one page and just inject php into the javascript as I (sort of) show below?? Is standard practice to just keep the php variables in MySQL and spit them out depending on the $_SESSION['user_id'];?? Just wondering if I'm on the right path with my thoughts so far?

ORIGINAL GRID
var mygrid;

            function doInitGrid(){  
            mygrid = new dhtmlXGridObject('gridbox');
            var combo=mygrid.getCombo(4);
            combo.put(2, 'Approve / Deny');
            combo.put(1, 'Approve');
            combo.put(0, 'Deny');
            mygrid.setImagePath("../codebase/imgs/");           
            mygrid.setHeader("Submit Date, Manufacturer, Product Category, Progress, Approval Status",null,["text-align:center;","text-align:center;","text-align:center","text-align:center","text-align:center"]);        
            <!--mygrid.attachHeader("#text_filter,#text_filter,#text_filter");-->
            mygrid.setInitWidthsP("10,16,44,18,12");
            mygrid.setColAlign("center,left,left,center,center");
            mygrid.enableAutoWidth(false);
            mygrid.setColTypes("ro,ro,ro,button,coro");
            mygrid.setColSorting("str,str,str,str,str,str");
            mygrid.enableRowsHover(true,'grid_hover');              
            mygrid.setSkin("modern");
            mygrid.init();          
            mygrid.setStyle("font-size:11px;","font-size:11px;","font-size:11px","font-size:11px","font-size:11px");
            mygrid.loadXML("connector.php?hospid=<?php echo $hospid; ?>");
            mygrid.setColumnIds("date,man_name,group,approval_progress, approval_status");          
            var dp = new dataProcessor ("connector.php?hospid=<?php echo $hospid; ?>");     
            dp.init(mygrid);                        
            dhxWins = new dhtmlXWindows();
            dhxWins.setImagePath("../codebase/imgs/");          
            mygrid.attachEvent("onRowSelect", function(id,ind){ 
                 if (ind == 0 || ind == 1 || ind == 2 || ind == 3){  
                dhxWins = new dhtmlXWindows();
                var w1 = dhxWins.createWindow("w1", 60, 60,925, 575);
                dhxWins.setSkin("dhx_web");
                dhxWins.setImagePath("../codebase/imgs/");
                w1.centerOnScreen();
                w1.setText("");
                w1.setModal(false);
                theVar11 = (id);
                w1.attachURL("pop_details.php?var1=" +theVar11);
                return true;
                 };
                 });

MY IDEA FOR OOP GRID
    var mygrid;

                function doInitGrid(){  
                mygrid = new dhtmlXGridObject('gridbox');
                var combo=mygrid.getCombo(4);
                combo.put(2, 'Approve / Deny');
                combo.put(1, 'Approve');
                combo.put(0, 'Deny');
                mygrid.setImagePath("../codebase/imgs/");           
                mygrid.setHeader(<?php $MySQL_results ?>);      
                <!--mygrid.attachHeader("#text_filter,#text_filter,#text_filter");-->
                mygrid.setInitWidthsP("<?php $MySQL_results ?>");
                mygrid.setColAlign("<?php $MySQL_results ?>");
                mygrid.enableAutoWidth(false);
                mygrid.setColTypes("<?php $MySQL_results ?>");
                mygrid.setColSorting("<?php $MySQL_results ?>");
                mygrid.enableRowsHover(true,'grid_hover');              
                mygrid.setSkin("modern");
                mygrid.init();          
                mygrid.setStyle("<?php $MySQL_results ?>");
                mygrid.loadXML("connector.php?hospid=<?php echo $hospid; ?>");
                mygrid.setColumnIds("date,man_name,group,approval_progress, approval_status");          
                var dp = new dataProcessor ("connector.php?hospid=<?php echo $hospid; ?>");     
                dp.init(mygrid);                        
                dhxWins = new dhtmlXWindows();
                dhxWins.setImagePath("../codebase/imgs/");          
                mygrid.attachEvent("onRowSelect", function(id,ind){ 
                     if (ind == 0 || ind == 1 || ind == 2 || ind == 3){  
                    dhxWins = new dhtmlXWindows();
                    var w1 = dhxWins.createWindow("w1", 60, 60,925, 575);
                    dhxWins.setSkin("dhx_web");
                    dhxWins.setImagePath("../codebase/imgs/");
                    w1.centerOnScreen();
                    w1.setText("");
                    w1.setModal(false);
                    theVar11 = (id);
                    w1.attachURL("pop_details.php?var1=" +theVar11);
                    return true;
                     };
                     });

Answer 1

In my opinion, (and others may feel free to disagree) what you propose is a perfectly viable option. If you'd rather not include so much php in your javascript, you can use the php json_encode() function to create an initial javascript object, and use it's properties instead of php echoes. Something like this for example:

var gridOpts = <?php echo json_encode($MySQL_results);?>;
mygrid.setColTypes(gridOpts.colTypes);

Answer 2

I can't read that code, it's too messy...

But for general use:

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>;
</script>

This method allows you to pass any type of PHP variable (except Resources) through to JS.