2011-07-01 99 views
0

我對JQuery UI非常陌生。 我在使用JQuery加載模態對話窗口時遇到問題。 在這裏,我正在嘗試一個簡單的例子,它將打開對話框,並將在單選按鈕的onClick事件上加載一個新頁面。 對話框中加載的新頁面是通過主頁面的文本框提供的基於用戶輸入的數據庫中的一些值的動態頁面。JQuery UI:如何將值傳遞給對話框

我不知道如何從主頁面傳遞文本框的值 ? Alsosd 我試圖通過添加鏈接屬性 URL傳遞文本 框的值..但沒有運氣:(。也就是說我的網址是 regressionTestCustomMetadataSelection.action ,我試圖把它作爲 regressionTestCustomMetadataSelection.action *?消費者* 其中消費者從文本值這個 box.Is正確的方法是什麼?下面

<!DOCTYPE html> 

<html> 
<head> 
    <script type="text/javascript" language="javascript" src="JS/jquery-1.6.1.js"></script> 
    <script type="text/javascript" language="javascript" src="JS/jquery-ui-1.8.14.custom.min.js"></script> 



<style type="text/css" title="currentStyle"> 
      @import "css/jquery-ui-1.8.4.custom.css"; 
     </style>  

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#CUSTOM").click(showDialog); 
      //variable to reference window 
      myWindow = $('#dialog'); 

      } 
     );  
     //function to show dialog   
     var showDialog = function() {   
      //instantiate the dialog 

      myWindow.load("regressionTestCustomMetadataSelection.action?consumer").dialog({ height: 350, 
          width: 400, 
          modal: true, 
          position: 'center', 
          autoOpen:false, 
          title:'Hello World', 
          overlay: { opacity: 0.5, background: 'black'} 
      }); 

      //if the contents have been hidden with css, you need this   
      myWindow.show();   
      //open the dialog 
      myWindow.dialog("open"); 
      }  
     //function to close dialog, probably called by a button in the dialog  
     var closeDialog = function() { 
      myWindow.dialog("close"); 
      } 
    </script> 

    <script> 




    function setSession() 
    { 
     $(document).ready(function() { 
     $("#dialog").load("regressionTestCustomMetadataSelection.action?as").dialog({ modal: true, resizable: false, draggable: false, width: 515, height: 245 }); 
     }); 

     $("#dialog").dialog('open'); 
    } 
    </script> 
</head> 
<body style="font-size:62.5%;"> 
<div> 
             <input type="radio" name="submittedMetadataSelection" id="DEFAULT" value="DEFAULT" checked/> 
             <label for="DEFAULT">DEFAULT</label> 

             <input type="radio" name="submittedMetadataSelection" id="CUSTOM" value="CUSTOM" "/> 
             <label for="CUSTOM">CUSTOM</label> 

</div> 
<div id="dialog" title="Dialog Title"></div> 

</body> 
</html> 
+0

[Struts2-jQuery插件](http://code.google.com/p/struts2-jquery/)可能有助於簡化您的工作並節省您不必編寫大量jQuery代碼 – nmc

回答

2

而是「負荷」,儘量使用$阿賈克斯方法,以「數據發送參數 Provinding代碼「object:

$.ajax({ 
    url: "regressionTestCustomMetadataSelection.action", 
    data: ({customer: "John"}), 
    traditional: true, 
    success: function(loadedData) { 
     // assuming that the contents of loadedData is html 
     myWindow.html(loadedData); 
     myWindow.dialog(); 
    } 
}); 
+0

+1這就是我在做什麼... avitor放在哪裏_url:「regressionTestCustomMetadataSelection.action」_我喜歡使用s:url標記,它正確地寫出完整的url。 – Quaternion

+1

默認情況下,jQuery ajax調用不適用於struts2,除非您還添加「traditional:true」,您可以將其添加到您的答案中嗎? – Quaternion

+0

當然!我不知道struts2。感謝您的更正。 – alanvitor