jquery按鈕和模式窗體

Question

我試圖創建一個窗體，當有人點擊一個「編輯」按鈕。我下面這個例子： http://jqueryui.com/demos/dialog/modal-form.html

我有兩個問題：

1. 的按鈕看起來像一個普通的HTML按鈕。當我點擊時，它變成了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

你或許應該移動，將您editButton到jQuery的按鈕編輯方法以外的JS。你想綁定click()函數，並將其聲明爲按鈕之前你進入你的編輯方法。

所有這些代碼只在第一次點擊按鈕後纔會運行。這就是爲什麼你得到奇怪的功能。

編輯功能外把這個在您的網頁：

$(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，但這取決於您真正想要做什麼。