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() 函数并将其声明为一个按钮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 的 click 方法中，但这取决于您真正想要做什么。