2011-07-01 128 views
0

JQueryのUIはとても新しいです。 JQueryを使用してモーダルダイアログウィンドウを読み込む際に問題に直面しています。 ここでは、ダイアログを開き、ラジオボタンのonClickイベントに新しいページをロードする簡単な例を試しています。 ダイアログに読み込まれる新しいページは、メインページのテキストボックスに表示されたputのユーザーに基づいてデータベースからいくつかの値を取る動的ページです。JQuery UI:ダイアログに値を渡す方法

テキストボックスの値 をメインページから渡す方法がわかりません。 Alsosd私は、URLが URLに属性を付加することにより、テキスト ボックスの値を渡そうとしました..しかし、運:(。つまり、私の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 plugin](http://code.google.com/p/struts2-jquery/)は、これを簡略化し、jQueryコード – nmc

答えて

2

以下 Provindingコードです "オブジェクト:

$.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 put _url: "regressionTestCustomMetadataSelection.action" _私は、完全なURLを正しく書き出すs:urlタグを使いたいと思います。 – Quaternion

+1

jQuery ajaxの呼び出しは、「traditional:true」を追加しない限り、struts2ではデフォルトでは機能しません。これを答えに追加できますか? – Quaternion

+0

私はstruts2を知らない。訂正してくれてありがとう。 – alanvitor

関連する問題