Get KoolPHP UI with 30% OFF!

[Resolved] KoolAjaxRequest - Customized Ajax Request example

ADavid Wulkan
20160102 04:27pm [RESOLVED]
1. See function select_grid() { in the file tables2.php!
Right after this line: [ document.getElementById("gridPanel").innerHTML = result; ]
You MUST next run the function: run_script_in_element()
run_script_in_element("gridPanel");//This function is inside koolajax_extension.js
2. It looks to me that the grid must render within <updatepanel></updatepanel> tags! It would not work rendering within the <div> tags! (Grid appeared but, no data)
Still can't get the "Add Image" button to work?
tables2.php
1. Database list box populates and displays
2. Table list box populates and displays
3. 20160102 got grid to render correctly, see notes above!
<?php include "inc/header_inc.php"; ?>
<?php include "inc/dbkool.php"; ?>
<?php include "inc/ajax.php"; ?>
<!-- ***********Display the Control***************** -->
<?php echo "*TBL002*<br>"; ?>
<style>
       .page{width:100%; min-height:900px;}
       .menuleftcontent{min-width:200px;max-width:200px;float:left;height:900px;border:dotted 1px black;}
       .maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
</style>
<div id="page" class="page">   
 <!-- LEFT MENU -->
 <div id="menuleftcontent" class="menuleftcontent">
     <div style="padding:10px;">
       <?php //echo $treeview->Render();?>
     </div>    
 </div> 
 <!-- MAIN PAGE -->
 <div id="maincontent" class="maincontent">   
 <form is="form1" method="post">
 <script type="text/javascript" src="<?php echo $KoolControlsFolder; ?>/KoolAjax/koolajax_extension.js"></script>
 <style>
  #lbx1 {
    width:200px;
    <!-- border:dotted 1px gray; -->
    min-height:50px;
    padding:10px;
  }
  #lbx2 {
    width:200px;
    <!-- border:dotted 1px gray; -->
    min-height:50px;
    padding:10px;
  }
 </style>
<!-- DATABASE LISTBOX  -------------------------------------- -->
<table><tr>
<td width="100%">
   Select a Database:<br>
   <select id="lbxDatabase" onchange="select_tables()">
      <option value="">--</option>
      <?php
         //For my protection!  (did not work!)
         //   $sql = "SELECT distinct table_schema  FROM INFORMATION_SCHEMA.COLUMNS "
         //   $sql.= "WHERE table_schema NOT IN ('information_schema','performance_schema','mysql');"
         //$result = mysql_query($sql);
         $result = mysql_query("SELECT distinct table_schema  FROM INFORMATION_SCHEMA.COLUMNS;");
         while($row= mysql_fetch_assoc($result)) {
              echo "<option value='".$row["table_schema"]."'>".$row["table_schema"]."</option>";
         }	
       ?>
   </select>
   <script type="text/javascript">
      function select_tables() {
         var request = new KoolAjaxRequest( {
                       method:"post",		
                       url:"tableedit.php",				
                       onDone:function(result) {
                           //Show list of tables
                           document.getElementById("divTable").innerHTML = result;
                        } <!-- END onDone:function -->			
         }); <!-- END var request = new KoolAjaxRequest -->
         var _database=document.getElementById("lbxDatabase").value;
         <!-- alert(_database); -->
         if(_database!="") {
            request.addArg("action","getTable");
            request.addArg("database",_database);
            koolajax.sendRequest(request);				
         } <!-- END if(_database!="") -->
      } <!-- END function select_database() { -->
   </script>
  
<!-- TABLE LISTBOX -- AJAX RECEIVER DIV -------------------- -->
 <!-- ***********AJAX RECEIVER PANEL*****xhttp.open(method,url,async)************ -->
 <div id="divTable" style="padding-top:10px;width:300px;"></div>
   <script type="text/javascript">
      function select_grid() {
         var request = new KoolAjaxRequest( {
                       method:"post",		
                        url:"tableedit.php",				
                        onDone:function(result) {
                           //Show GRID
                           document.getElementById("gridPanel").innerHTML = result;
                            run_script_in_element("gridPanel");//This function is inside koolajax_extension.js
                        } <!-- END onDone -->			
              }); <!-- END new KoolAjaxRequest -->
         var _database = document.getElementById("lbxDatabase").value;
         var _table = document.getElementById("lbxTable").value;
         if(_table!="") {
            request.addArg("action","getGrid");
            request.addArg("database",_database);
            request.addArg("table",_table);
            koolajax.sendRequest(request);
         } <!-- END if(_database!="") -->
      } <!-- END function select_database() { -->
   </script>
</td></tr>
<!-- GRIDPANEL -- AJAX RECEIVER UPDATEPANEL --------------- -->
<tr><td width="100%"><hr>
<?php echo KoolScripting::Start();?>
 <updatepanel id="gridPanel" style="padding-top:10px;width:655px;">
   <content>
   </content>
   <loading image="<?php echo $KoolControlsFolder;?>/KoolAjax/loading/5.gif" />
</updatepanel>
<?php echo KoolScripting::End();?>
</td>
</tr></table>
 </form>
</div>  <!-- END inc/header_inc.php Wrap ALLL -->
</body>
</HTML>

The tableedit.php file:
1. Correction: the ajax include and the ajax->Render() is required!!!
<?php
if(isset($_POST["action"])) {
  switch($_POST["action"]) {
     case "getTable":
       if(isset($_POST["database"])) {
          include_once "inc/dbkool.php";
          $sql  ="select DISTINCT TABLE_NAME FROM INFORMATION_SCHEMA.COLUMNS where TABLE_SCHEMA = '";
          $sql .= $_POST["database"] . "';";
        //  echo "<br>sql= ".$sql;
          echo "Select a Table:<br>";
          $slct  = "<select id='lbxTable' onchange='select_grid()'>";
          $slct .= "<option value''>--</option>";
              $result = mysql_query($sql);
              while($row= mysql_fetch_assoc($result)) {
                 $slct .= "<option value='".$row["TABLE_NAME"]."'>".$row["TABLE_NAME"]."</option>";
              }	
          $slct .= "</select>";
          echo $slct;
          mysql_close($dbcon);
       }    //END if
       break;
     case "getGrid":
       ECHO "<br>getGrid Tablename= ".$_POST["table"];
       if(isset($_POST["table"])) {
         include_once "inc/dbkool.php";
         mysql_select_db($_POST["database"]);
         require_once "inc/gvars.php";
	 require_once $KoolControlsFolder."/KoolAjax/koolajax.php";
	 $koolajax->scriptFolder = $KoolControlsFolder."/KoolAjax";
         require_once $KoolControlsFolder."/KoolGrid/koolgrid.php";
	 $lvl1Datasource = new MySQLDataSource($db_con); 
         $lvl1sql="select * from ".$_POST["table"];
	 $lvl1Datasource->SelectCommand = $lvl1sql;
	 $grid = new KoolGrid("grid");
	 $grid->scriptFolder = $KoolControlsFolder."/KoolGrid";
	 $grid->styleFolder="default";
	 $grid->Width = "655px";
	 $grid->AllowResizing = true;
	 $grid->RowAlternative = true;
	 $grid->AllowScrolling = true;
	 $grid->AjaxEnabled = true;
	 $grid->AjaxLoadingImage =  $KoolControlsFolder."/KoolAjax/loading/5.gif";
//MASTER TABLE
	 $grid->MasterTable->DataSource = $lvl1Datasource;
	 $grid->MasterTable->AutoGenerateExpandColumn = true;
	 $grid->MasterTable->AutoGenerateColumns = true;
 
	 $grid->MasterTable->Pager = new GridPrevNextAndNumericPager();
	 $grid->Process();
	 //echo $koolajax->Render();       }              //These braces should not have been here!
	 //echo $grid->Render();       }
	 echo $koolajax->Render();                         //These now work (kind of)
	 echo $grid->Render(); 
       }    //END if(isset($_POST["table"]))
       ECHO "<br>2. getGrid Tablename= ".$_POST["table"];
       break;
  }    //END switch
}    //END if
?>
Posted Dec 30, 2015 , edited Jan 17, 2016 Kool