Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by arup on Feb 08, 2009 23:05
open dhtmlx forum
dhtmlxcombo

i want to use combobox in a grid using <select> and option tag. data is populated from mysql database. but its show a simple combobox, i.e box is not editable. i have attached my source code

please help me!!

thanks

1. grid.php

<html>
<head>
<title>Ajax Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="script.js"></script>
<script>
        window.dhx_globalImgPath="codebase/imgs/";
    </script>
    
    
    <script src="codebase/dhtmlxcommon.js"></script>
    <script src="codebase/dhtmlxcombo.js"></script>
<link href="my_css.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="init_table();">
<table width="96%" border="0" cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>
        
        <tr>
            <td colspan='8'> <a href=javascript:requestInfo('showTable.php?mode=new&id=$id','showTable','')>Add New Data </a></td>
            </tr>
            <tr>
            <td width='50'>ID</td>
            <td width='175'>first name</td>
            <td width='174'>Sur name</td>
            <td width='173'>Father's name</td>
            <td width='173'>Father's surname</td>
            <td width='48'>  </td>
            <td>  </td>
                
        </tr>
</table>
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" >

<tr>
<td><div id="showTable" style="border:3px red; height:400px; overflow:auto;border-color:red;">
</div></td>
</tr>
</table>
<p> </p>

</body>
</html>

2. showtable.php

<?php
    require "KoolAjax/koolajax/koolajax.php";
    require "koolautocomplete/koolautocomplete.php";
    function service($text)
    {
        $itemlist = array();
        for($i=0;$i<10;$i++)
        {
            $item = array("text"=>$text." ".$i);
            array_push($itemlist,$item);
        }
        return $itemlist;
    }
    $koolajax->enableFunction("service");
?>
<html>
<head>
<title>Ajax Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
        window.dhx_globalImgPath="codebase/imgs/";
    </script>
    
    
    <script src="codebase/dhtmlxcommon.js"></script>
    <script src="codebase/dhtmlxcombo.js"></script>
<script type="text/javascript" src="script.js"></script>

<link href="my_css.css" rel="stylesheet" type="text/css">

</head>
<body >

<?php
include("includes/host_conf.php");
include("includes/mysql.lib.php");
$obj=new connect;
$mode=$_GET["mode"];

        
echo "<table width='100%' border='0' cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>";

        // For Delete
        if($mode=="delete") {        
            $var_id=$_GET["id"];
            $sqlDelete="Delete from admission where id='$var_id'";
            $obj->query($sqlDelete);
            echo "<tr>";
                echo "<td colspan=3>Data Deleted";
            echo "</tr>";
            
        }
        // End of Delete
        
        
        // For Add New Data -- Display Text box and the Cancel and Save Option
        if($mode=="new") {
            echo "<tr>";
                
                echo "<td> <input type='text' id='id' size=5></td> ";
                echo "<td> <input type='text' id='fname' size=25></td> ";
                echo "<td> <input type='text' id='sname' size=25></td> ";
                echo "<td> <input type='text' id='gfname' size=25></td> ";
                echo "<td> <input type='text' id='gsname' size=25></td> ";
                echo "<td><a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a></td>";
                echo "<td><a href=\"javascript:save_data();\">Save</a></td>";
                
            echo "</tr>";
        }
        // End of Add New Data
        
        
        // After Click on Add >> Save option the data is save into the database
        if($mode=="save_new") {
            $id=$_GET["id"];
            $fname=$_GET["fname"];
            $sname=$_GET["sname"];
            $gfname=$_GET["gfname"];
            $gsname=$_GET["gsname"];
            $sqlSave="Insert into admission (id,fname,sname,gfname,gsname) values('$id','$fname','$sname','$gfname','$gsname')";
            $obj->query($sqlSave);
            echo "<tr>";
                echo "<td colspan=3>Data Saved";
            echo "</tr>";
        }
        // End of save_new
        
        // For Update save Option
        if($mode=="update_data") {
            $prev_id=$_GET["prev_id"];
            $id=$_GET["id"];
            $fname=$_GET["fname"];
            $sname=$_GET["sname"];
            $gfname=$_GET["gfname"];
            $gsname=$_GET["gsname"];
            $sqlUpdate="update admission set fname='$fname',sname='$sname',gfname='$gfname',gsname='$gsname' where id='$prev_id'";
            $obj->query($sqlUpdate);
            echo "<tr>";
                echo "<td colspan=3>Data Updated</td>";
            echo "</tr>";
        }
        // End of Update
        
        // Display all the data from the table
            $sql="select * from admission order by id desc";
            $obj->query($sql);    
            while($row=$obj->query_fetch(0)) {
                $id=$row['id'];
                $fname=$row['fname'];
                $sname=$row['sname'];
                $gfname=$row['gfname'];
                $gsname=$row['gsname'];
            echo "<tr bgcolor='#ffffff'>";
            // if Mode is Update then get the ID and display the text field with value Other wise print the data into the table
            if($mode=="update") {
                $id_=$_GET["id"];
                
            }
            
            if($id_==$id) {
                
                echo "<input type='hidden' value='$id_' name='prev_id' id='prev_id'>";
                echo "<td> <input type='text' name='id' value='$id' id='id' size='5' > </td> ";
                echo "<td> <input type='text' value='$fname' id='fname' size='25'> </td> ";
                
                echo "<td><div id='mydiv' style='height:100px;'><select style='width:170px;' id='tname' name='tname' >";
?>
<option value="<?php $row['sname']; ?>"><?php echo $row['sname']; ?></option>
<?php
$strSQL = "SELECT title FROM title ORDER BY title";
$rs = mysql_query($strSQL);

while ($row1=mysql_fetch_array($rs))
{
    echo '<option value="'.$row1['title'].'"';

echo '>'. $row1['title'] . '</option>'."\n";

}


?>
</select>
<script>
        var z=dhtmlXComboFromSelect("tname");
        z.enableFilteringMode(true);
        

    </script>

     <?php
echo "</div></td> ";
                echo "<td> <input type='text' value='$gfname' id='gfname' size='25'> </td> ";
                echo "<td> <input type='text' value='$gsname' id='gsname' size='25'> </td> ";
                echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a></td> ";
                echo "<td><a href=\"javascript:update_data();\">Update</a></td>";
            } else {
                echo "<td><input type='text' value='$id' ReadOnly id='id' size='5'> </td>";
                echo "<td><input type='text' value='$fname' ReadOnly id='fname' size='25'></td>";
                echo "<td><input type='text' value='$sname' ReadOnly id='sname' size='25'></td>";
                echo "<td><input type='text' value='$gfname' ReadOnly id='gfname' size='25'></td>";
                echo "<td><input type='text' value='$gsname' ReadOnly id='gsname' size='25'></td>";
                echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=update&id=$id','showTable','')\" >Modify</a> </td> ";
                echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=delete&id=$id','showTable','');\" onclick='return confirmLink(this);'>Delete</a></td>";
            }        
            
            echo "</tr>";
            
            }
        echo "</table>";

?>

</body>


</html>

3. script.js

function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}

}
return xmlhttp;


}
var http = getHTTPObject(); // We create the HTTP Object

/*
    Funtion Name=requestInfo
    Param = url >> Url to call : id = Passing div id for multiple use ~ as a seprator for eg. div1~div2 :
    redirectPage >> if you like to redirect to other page once the event success then
    the response text = 1 and the redirectPage not left empty
*/

function requestInfo(url,id,redirectPage) {
        var temp=new Array();
            http.open("GET", url, true);
            http.onreadystatechange = function() {
                if (http.readyState == 4) {
                 if(http.status==200) {
                     var results=http.responseText;
                    if(redirectPage=="" || results!="1") {
                        
                        var temp=id.split("~"); // To display on multiple div
                        //alert(temp.length);
                        var r=results.split("~"); // To display multiple data into the div
                        //alert(temp.length);
                        if(temp.length>1) {
                            for(i=0;i<temp.length;i++) {    
                                //alert(temp[i]);
                                document.getElementById(temp[i]).innerHTML=r[i];
                            }
                        } else {
                            document.getElementById(id).innerHTML = results;
                        }    
                    } else {
                        alert(results);
                        window.location.href=redirectPage;            
                    }
                 }
                }
            };
            http.send(null);
        
        

}

/*
    Function Name= emptyValidation
    Desc = This function is used to validation for the empty field
    Param fieldList = This arguments set as a string varialble. you just need to supply the textbox name
    if the textbox is multiple then supply with ~ separator for eg. username~password
*/
function emptyValidation(fieldList) {
        
        var field=new Array();
        field=fieldList.split("~");
        var counter=0;
        for(i=0;i<field.length;i++) {
            if(document.getElementById(field[i]).value=="") {
                document.getElementById(field[i]).style.backgroundColor="#FF0000";
                counter++;
            } else {
                document.getElementById(field[i]).style.backgroundColor="#FFFFFF";    
            }
        }
        if(counter>0) {
                alert("The Field mark as red could not left empty");
                return false;
                
        } else {
            
            return true;
        }
        
}

function init_table() {
        requestInfo('showTable.php?mode=list','showTable','');
    }
    
    function save_data() {
            var id=document.getElementById("id").value;
            var fname=document.getElementById("fname").value;
            var sname=document.getElementById("sname").value;
            var gfname=document.getElementById("gfname").value;
            var gsname=document.getElementById("gsname").value;
            var checkValidation=emptyValidation('id~fname~sname~gfname~gsname');
    
        if(checkValidation==true) {
            requestInfo('showTable.php?mode=save_new&id='+id+'&fname='+fname+'&sname='+sname+'&gfname='+gfname+'&gsname='+gsname,'showTable','');
        }
    }
    
    function update_data() {
            var prev_id=document.getElementById("prev_id").value;
            var id=document.getElementById("id").value;
            var fname=document.getElementById("fname").value;
            var sname=document.getElementById("sname").value;
            var gfname=document.getElementById("gfname").value;
            var gsname=document.getElementById("gsname").value;
            var checkValidation=emptyValidation('id~fname~sname~gfname~gsname');
    
        if(checkValidation==true) {
            requestInfo('showTable.php?mode=update_data&id='+id+'&fname='+fname+'&sname='+sname+'&gfname='+gfname+'&gsname='+gsname+'&prev_id='+prev_id,'showTable','');
        }
    }
    
    
function confirmLink(theLink)
{

var is_confirmed = confirm('Are you sure to delete this record?\n\nThis will permanently delete the Record!');
if (is_confirmed) {
theLink.href += '';
}

return is_confirmed;
}

Answer posted by Alex (support) on Feb 10, 2009 10:00

The issue looks like the dhtmlXComboFromSelect is not called. 

Please, check that there are no errors on the page and all combo libraries are correctly included (paths are correct). I can see in this example that the dhtmlxcombo.css is not included. 

If problem persists, please, provide the sample where it can be reproduce (with html files).