フォーム要素のスタイルを設定しようとしたときに、ajax

Question

が奇妙な問題に直面してデータを取得するフォーム要素をスタイリングする際に問題が発生しました。特に選択要素。

アイデアは簡単です。私は1つのselectを取得し、その状態が変化すると、ajaxを介して、2番目のselectがそのデータを要求にスローします。これまでのところ、すべてが大丈夫です。アヤックスは正常に動作しています。最初の選択がその状態を変えると、選択要素のスタイリングが通常のスタイリングに戻ります。

ライブの例では、2つの主要なファイルを使用してhere

イムを見つけることができ、ファイル1ファイルの重要なコンテンツがこの

<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.responseText;       
         } 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> 

と

<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> 

、ユーザーの後で選択要素1を選択し、ajaxで変数を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> 

結果は、2番目の選択要素の内容としてファイル1にポストバックされます。

問題は、スタイリングがなくなったことです。あなたが例をダウンロードすることができ

は、任意の助けをいただければ幸いですhere

ファイル。また、私の英語がそれほど良くないのであれば申し訳ありません。

あなたはリンク先のページに基づいて月

Answer 1

、それは問題はあなたがjqtransformによって生成された余分なHTML要素の全てを交換することで見えます。 JavaScriptのコールバックでは、あなたはこれをやっている：

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

これはそこでプットをjqtransform余分な要素のすべてを吹き飛ばす、div要素の内容全体を置き換えます。あなたが実際にやりたいことは、select要素自体をPHPサービスの結果で置き換えるか、おそらくdivを更新した後に再度jqtransformを実行することです。あなたは、さらに調査する必要があるかもしれないので、

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

私はjqtransformライブラリに精通していないよ：

は、すでにjQueryのを含めているので、私はselect要素を交換するために彼らの強力な選択機能を使用することをお勧めしますどのルートが最も理にかなっているかを確認します。