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

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

javascript jquery

Javascript jQuery对话框不会停留，一秒钟后消失,javascript,jquery,Javascript,Jquery,我试着在我生成的表单上添加一个按钮，它会弹出一个对话，最终会有一个表单，现在它只是说我是一个对话。表单是由我的GetJSON回调生成的。表单只包含一个选择列表，我希望能够添加一个新成员，或者使用一个漂亮的弹出窗口编辑该选择列表中的当前选择出于某种原因，它在大约一秒钟后消失了。然后重新生成页面，实际上这没关系，因为在对话之后，我的数据库中可能会有一条额外的记录，所以我不介意，但我需要很明显地保留对话这与getJSON是异步的有关吗这是我的javascript，下面是html。我在试图让弹出式

我试着在我生成的表单上添加一个按钮，它会弹出一个对话，最终会有一个表单，现在它只是说我是一个对话。表单是由我的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。我只是为中情局做了第一次对话

<!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>

您将对话框打开事件绑定到窗体中按钮的单击操作。button元素的默认操作是提交表单，因此，当您单击按钮打开对话框时，您也在提交表单并重新加载页面。要防止出现这种情况，请尝试将.preventDefault添加到click事件处理程序：

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