設計一個表單元素時返回ajax數據的問題

即時嘗試設置表單元素的樣式時會遇到一個奇怪的問題。特別選擇元素。設計一個表單元素時返回ajax數據的問題

這個想法很簡單。我有一個選擇，當它的狀態改變時，通過ajax，第二個選擇獲取它的數據通過一個請求。到目前爲止，一切都很好。阿賈克斯工作正常。但是當第一個選擇改變其狀態時，選擇元素樣式正在恢復到正常樣式。

活例子可以發現here

使用2個主文件，文件1的文件的重要內容IM是本

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

並將結果作爲第二個select元素的內容返回到文件1。

問題是造型不見了。

您可以下載示例文件here

任何幫助，將不勝感激。此外，如果我的英語不好，我很抱歉，而且我的編程技巧不能用言辭較少來解釋我的問題。

月

來源

2011-09-13 Jan

基於在頁面上您鏈接，它看起來的問題是，您要更換所有已通過jqtransform產生額外的HTML元素。在您的JavaScript回調，你這樣做：

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

這取代了div的全部內容，吹走所有在那裏jqtransform放多餘的元素。你真正想做的是用你的PHP服務的結果替換select元素本身，或者在更新div之後再次運行jqtransform。

既然你已經包括jQuery的，我會建議使用其強大的選擇功能只更換選擇的元素：

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

我不熟悉的jqtransform庫，所以你可能需要進一步調查看看哪條路線最有意義。

來源

2011-09-13 22:09:41

感謝您的回覆和您的努力。有沒有可能指出一個例子？它會真的幫助和指導我在哪裏看。我知道谷歌是我們的朋友，但說實話根本沒有運氣。 – Jan

一個具體的例子是什麼？如果您的意思是如何替換select的示例，我在回答中包含了一個基於jQuery的示例，但如果您願意，我當然也可以想出一個簡單的舊JavaScript。如果您的意思是由jqtransform生成的標記示例，只需在您鏈接的示例頁面上查看源代碼。如果你的意思是如何使用jqtransform的例子，我不能幫你。 –

jmmcduffie，對不起，如果你誤會了我。我發現了一種用jQuery來做到這一點的方法，但說實話，這根本不起作用。我的意思是，無論是JavaScript或jQuery功能工作正常（我的意思是替換），似乎是問題是jqtransform。 – Jan

設計一個表單元素時返回ajax數據的問題

回答

相關問題