Question

我正在尝试在我生成的表单上添加一个“添加”按钮，这将弹出一个对话框，最终会有一个表单（现在它只是说“我是对话”）。表单由我的GetJSON回调生成（表单只包含一个选择列表，我希望能够“添加”一个新成员，或者“编辑”该选择列表中的当前选择，并带有一个很好的弹出窗口）

由于某种原因，它会在一秒左右后消失。然后页面被重新生成，这确实可以，因为我的数据库在对话之后可能会有一个额外的记录，所以我不介意，但我需要明确的对话。

这与getJSON（）是异步的吗？

这是我的javascript，下面是html。我有一些问题，错误的jquery-ui.js试图让弹出对话工作，所以可能我仍然有错误版本的东西。但我可以让演示网站的简单版本工作正常，这就是为什么我现在怀疑getJSON。

function getTable(tableName,keyName,displayField,matchField,matchValue){
    $url= "/GeeREST/Entity?entity="+tableName+"&order="+displayField;

    if (matchField != null){
        $url+="&field="+matchField+"&value="+matchValue;
    }

    $.getJSON($url, 
            function( data ) {
            var items = [];
            $("#form-"+tableName).remove();
            $("#select-"+tableName).remove();
            $("<form>",{id:"form-"+tableName}).appendTo("#"+tableName);

            $.each( data, function( key, val ) {
                items.push("<option value=\"" + val[keyName]+"\">"+val[displayField]+"</option>");
            });
            $("<select/>", {
                id: "select-"+tableName,
                name: "select-"+tableName,
                html: items.join( "" )
                }).appendTo("#form-"+tableName);
            $("<button>",{
                id:"opener-"+tableName,
                html:"Add"
                }).appendTo("#form-"+tableName);
            $( "#dialog-"+tableName ).dialog({ autoOpen: false });
            $( "#opener-"+tableName ).click(function() {
                $( "#dialog-"+tableName ).dialog( "open" );
            });

            addChangeFunction(tableName);
            configureSubSelects(tableName);
        });

}

function SetUp(){
    getTable("Agency","agencyId","agencyName");
    getTable("Routes","routeId","routeId");
    getTable("Stops","stopId","stopName");
    getTable("Calendar","calendarId","serviceId");
//  getTable("Trips","tripId","tripId");
//  getTable("StopTimes","stopId","stopId");
}

function addChangeFunction(tableName){
    switch (tableName){
        case 'Routes': 
            $('#select-Routes').change(function() {
                configureSubSelects('Routes');
            });
        break;
        case 'Trips': 
            $('#select-Trips').change(function() {
                configureSubSelects('Trips');
            });
        break;
    }
}

function configureSubSelects(tableName){
    switch (tableName){
        case 'Routes': 
            getTable("Trips","tripId","tripId","routeId",$('#select-Routes').val());
        break;

        case 'Trips': 
            getTable("StopTimes","stopId","stopId","tripId",$('#select-Trips').val());
        break;
    }
}

这是我的HTML。我只在第一个对话框（ue）中输入“Agency”

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script type="text/javascript" src="Editor.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<title>Welcome to Gee</title>
</head>
<body>
<div id="dialog-Agency" title="Add Agency">I'm an add agency dialogue</div>

<script>
SetUp();
</script>

<div id="Agency">
Agencies
</div>
<div id="Routes">
Routes
</div>
<div id="Stops">
Stops
</div>
<div id="Calendar">
Calendar
</div>
<hr>
<div id="Trips">
Trips
</div>
<div id="StopTimes">
Stop Times
</div>
</body>

Answer 1

您将对话框打开事件绑定到表单中按钮的单击操作。按钮元素的默认操作是提交表单，所以似乎正在发生的是当您单击按钮打开对话框时，您还要提交表单并重新加载页面。为防止这种情况，请尝试将.preventDefault()添加到您的点击事件处理程序：

$( "#opener-"+tableName ).click(function(e) {
    e.preventDefault();
    $( "#dialog-"+tableName ).dialog( "open" );
});

jQuery对话框不会停留，一秒后消失

1 个答案: