2012-03-04 18 views
0

jqueryダイアログの使用私はフォームでポップアップボックスを作成しました。 私はPHPコードを書いており、可能な限り最小限のJavaScriptを使用したいと考えています。 $ GET変数を送信するphpを使用してフォームを送信したいと思います(私は実行するデータベースとの複雑なアクションを持っています)。 これを行う方法はありますか? 私のコードは次のとおりです。

  $("#dialog-form") 
      .dialog({ 
       autoOpen: false, 
       title: "Add Images", 
       buttons: {"Ok": function() 
            //I want to submit a $GET variable }}, 
       draggable: false, 
       resizable: false 
     }); 

     $("#addImage") 
      .click(function() { 
      $("#dialog-form").dialog("open"); 
     });  


//form 
<div id="dialog-form"> 

    Xml::openElement('form', array(
      'action' => $action, 
      'method' => 'get')). 
     ); 

     Xml::radio('name=addimage', 'value', 'he') . 'Choose from Exisiting'. 
      Xml::radio('name=addimage', 'value=go') . 'Upload Image' 
      //I want to have a XML::submit('ok') button to submit the form. I've tried putting this in but it doesn't do anything.            
       Xml::closeElement('form'); 
     </div> 
<button id="addImage">Add Image</button> 

私の完全なコード: 関数fnAddImages(){ グローバル$ wgOut、$ wgHooks、$ wgUser。

// import addimage javascript and css files 
    $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>'); 
    $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>'); 
    $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>'); 
    $wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');  
    $wgOut->addScript("<style>@import url(extensions/AddImages/style.css);</style>"); 

    //Add Image button with popup onclick 
$wgOut->addScript('<script type="text/javascript"> 
    (function($) { 
     $(document).ready(function() { 
     $("#dialog-form") 
      .dialog({ 
       autoOpen: false, 
       title: "Add Images", 
       buttons: {"Okay": function() {$("#dialog-form form").submit(); }}, 
       //{"Cancel": function() { $(this).dialog("close"); }}, 
       draggable: false, 
       resizable: false 
     }); 

     $("#addImage") 
      .click(function() { 
      $("#dialog-form").dialog("open"); 
     }); 
     });  

    }) (jQuery); 

</script>'); 
//form 


$wgOut->addHTML('<div id="dialog-form">'); 


$wgOut->addHTML(
    Xml::openElement('form', array(
      'action' => '..' , 
      'method' => 'get')). 
     Xml::hidden('wpEditToken', $wgUser->editToken()) 
     ); 

$wgOut->addHTML( 
      Xml::radio('name=addimage', 'value', 'he') . 'Choose from Exisiting'. 
        "<br />" . 
       Xml::radio('name=addimage', 'value=go') . 'Upload Image'. 
        "<br />" . 
       // Xml::submitButton('Ok') . 
       Xml::closeElement('form') 
      ); 
$wgOut->addHTML('</div>'); 
$wgOut->addHTML('<button id="addImage">Add Image</button>'); 


//retun true to run hook function 
return true; 

}

私はMediaWikiのサイト上でそれを実行しています。 ラジオボタンのフォームを提供する「画像を追加」ボタンを作成しようとしていますので、「自分の画像をアップロードする」または「既存の画像をアップロード」を選択できます。私は 'OK'を押す必要があるので、データベースからデータを引き出す機能や、画像をアップロードするための新しいポップアップボックスを表示する機能をコード化することができます。 ご協力いただきありがとうございます。

答えて

1

私はあなたが同期get要求(AJAX)を実行したい:

serializeとの組み合わせでgetのいずれかを見てください。

何かのように:

var form = $("#dialog-form form"); 
var url = form.attr('action');  // use the action URL of the form 
var data = form.serialize();  // serialize form data to key=value&foo=bar.. form 
$.get(url, data, function(){  // perform asynchronous get request to url 
    alert('done');     // the passed in function is called on success 
}); 

あなたは、単に提出する場合:

ここhttp://jsfiddle.net/3uNyN/1/

が本質だ:

$.get(theUrl, $("#dialog-form form").serialize()); 

私はここで、より完全な例を追加しましたフォームは同期的に(通常は提出を押すがトン)、単に電話

$("#dialog-form form").submit(); 
+0

私はどこにコード$( "#ダイアログフォームフォーム")を置くのですか? – LTech

+0

たとえば、「OK」ボタンの機能で、「GET変数を送信したい」と答えた場合 –

+0

ボタンに{{OK}:function(){$( "#ダイアログフォームフォーム")}を入力します。 (); }}、しかしOKを押すと何も起こりません。 – LTech

関連する問題