jqueryボタンとモーダルフォーム

Question

誰かが「編集」ボタンをクリックしたときにフォームを作成しようとしています。私はこの例を次のようだ：

1. ボタンは通常のHTMLボタンのようになります。 http://jqueryui.com/demos/dialog/modal-form.html

   私は2つの問題を抱えています。クリックすると、jqueryボタンに変わります。次に、もう一度クリックして、ダイアログが表示されます。明らかに、jqueryボタンをクリックするだけでダイアログを開くことができます。

2. 私のフォームはメインページに表示され、編集ボタンをクリックするとダイアログが開きます。メインページには表示されません。ダイアログ内にのみ存在する必要があります。しかし、このチュートリアル（http://jqueryui.com/demos/dialog/modal-form.html）から、私はそれらがフォームを隠しているのを見失ってしまったので、どうやってそれを行うのか分かりません。

マイHTMLフォーム：（すべてのカメラを示す別の表にある）

<div id="dialog-form" title="Change camera settings"> 
     <form> 
     <fieldset> 
      <label for="camera_name">Camera Name</label> 
      <input type="text" size="16" maxlength="32" name="camera_name" id="camera_nameid" class="text ui-widget-content ui-corner-all" /> 
     </fieldset> 
     </form> 
</div> 

マイボタン：

<button id="editbutton" onClick='edit(this, "<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>", "<?php echo $result_cameras[$i]["camera_name"]; ?>", "<?php echo $camera_quality; ?>")'>Edit</button> 

マイjQueryのコード。それはまだ多くの作業が必要であるが、ちょうどcamera_nameである私が処理だ一つのことがあります。

function edit(t, to, cameraname, cameraquality,) 
{ 
var js = jQuery.noConflict(); 
js(function() { 
    var name = js("#camera_name"); 
    allFields = js([]).add(name); 
    js("input:text").val(cameraname); //fill in the current data for cameraname 

    js("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Edit camera settings": function() { 
       allFields.removeClass("ui-state-error"); 

      }, 
      Cancel: function() { 
       js(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 

    js("#editbutton") 
     .button() 
     .click(function() { 
      js("#dialog-form").dialog("open"); 
     }); 
}); 
} 

Answer 1

をあなたはおそらく編集方法の外jQueryのボタンにあなたのeditButtonをオンJSを移動する必要があります。 click()関数をバインドしてボタンとして宣言したい場合は、BEFOREの編集メソッドを使用します。

このコードはすべて、最初にボタンをクリックした後にのみ実行されます。だからあなたは奇妙な機能を得ています。

編集機能の外に、あなたのページでこれを入れて：あなたは本当にそれを必要とする場合

$(function() {  

$("#dialog-form").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 350, 
    modal: true, 
    buttons: { 
     "Edit camera settings": function() { 
      allFields.removeClass("ui-state-error"); 

     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

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

をあなたはおそらくvar js = jQuery.noConflict();を維持することができます。あなたの編集onclickロジックをクリック方法editbuttonに移動したいかもしれませんが、それは本当にやりたいことに依存します。