Question

当有人点击“修改”按钮时，我正在尝试创建表单。我正在关注这个例子： http://jqueryui.com/demos/dialog/modal-form.html

我有两个问题：

该按钮看起来像常规的html按钮。当我点击时，它变成了jquery按钮。然后我再次单击，对话框打开。显然我只想要点击一次的jquery按钮来打开对话框。
我的表单显示在主页面上，当您单击编辑按钮打开对话框时。它不应该出现在主页面中。它应该只存在于对话框中。但是从这个教程（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的单击方法，但这取决于您真正想要做的事情。

jquery按钮和模态形式

1 个答案: