Problems while Styling a form element that gets data back with ajax

im facing a strange problem while trying to style a form element. A select element in particular.

the idea is simple. i got one select, and when its state changes, through ajax, a second selects gets its data throung a request. so far, everything is ok. the ajax is working fine. but when the first select changes its state, the select element styling is getting back to normal styling.

a live example can be found here

im using 2 main files, the important content of file 1 file is this

<script language="javascript" type="text/javascript">

    /* FUNCTION : Ajax Initialize - Start */
        function getXMLHTTP() {
                var xmlhttp=false;  
                try{
                    xmlhttp=new XMLHttpRequest();
                }
                catch(e)    {       
                    try{            
                        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e){
                        try{
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch(e1){
                            xmlhttp=false;
                        }
                    }
                }

                return xmlhttp;
            }
    /* FUNCTION : Ajax Initialize - End */


    /* FUNCTION : Get Values - Start */
        function getValue(numb) {       

            var strURL="find.php?theValue="+numb;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {                        
                            document.getElementById('my_requestDiv').innerHTML=req.r开发者_运维知识库esponseText;                        
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }               
                }           
                req.open("GET", strURL, true);
                req.send(null);
            }       
        }
    /* FUNCTION : Get Values - End */

</script>

and

    <form method="post" action="" name="form1" id="example">

        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="160" class="title_style">What</td>
            <td width="340">
                <select class="select" name="start" onChange="getValue(this.value)">
                    <option value="">please make a selection</option>
                    <option value="1">Colors</option>
                </select>
            </td>
          </tr>

          <tr>
            <td width="160" class="title_style">Result</td>
            <td width="340">
              <div id="my_requestDiv">
                <select class="select1" name="my_request" >
                    <option>Please select above first</option>
                </select>
              </div>
            </td>
          </tr>

        </table>

    </form>

where, after the user makes a selection on select element 1, through ajax, a variable is passed to find.php

<?php

    $what=intval($_GET['theValue']);

    $link = mysql_connect('localhost', 'YOUR_USERNAME_HERE', 'YOUR_PASSWORD_HERE');
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }

    mysql_query("SET NAMES 'utf8'", $link);

    mysql_select_db('cry-for-help');

    $query="SELECT id, value FROM my_table WHERE requested='$what'";
    $result=mysql_query($query);

?>

<select class="select" name="my_request">
    <option>make your selection now</option>
        <?php
            while($row=mysql_fetch_array($result)) {
        ?>
                <option value=<?php echo $row['id']?>><?php echo $row['value']?></option>
        <?php
            }
?>
</select>

and the result is posted back on file 1 as content for the second select element.

The Problem is that the styling is gone.

you can download the example files here

any help would be appreciated. Also, im sorry if my english is not that good, and my programming skills not that advanced to explain my problem with less words.

Jan

Based on the page to which you linked, it looks the problem is that you are replacing all of the extra HTML elements which have been generated by jqtransform. In your JavaScript callback, you are doing this:

 document.getElementById('my_requestDiv').innerHTML=req.responseText;

This replaces the entire contents of the div, blowing away all of the extra elements that jqtransform puts in there. What you actually want to do is replace just the select element itself with the results from your PHP service, or perhaps run jqtransform again after updating the div.

Since you're already including jQuery, I would recommend using their powerful selection functionality to replace just the select element:

$('select[name="my_request"]').replaceWith(req.responseText);

I'm not familiar with the jqtransform library so you may need to investigate further to see which route makes the most sense.