jQuery Dialog模式窗体在重新打开时会丢失值

时间:2013-05-25 17:57:31

标签: jquery dialog

我在div中有一个表单,当我打开对话框时,我得到表单和表单的值,如果我按下取消并再次打开,元素的当前值不会填充元素,元素出现但没有价值观,如果我看看萤火虫,我可以看到它有价值。

这是我的对话框代码。

    $( "#divForm" ).dialog({
        autoOpen: false,
        height: 500,
        width: 350,
        modal: true,
        buttons: {
            "Save changes": function() {

                 var bValid = true;
                 allFields.removeClass( "ui-state-error" );
                 bValid = bValid && checkLength( fname, "fname", 2, 80 );
                 bValid = bValid && checkLength( mi, "mi", 0, 5 );
                 bValid = bValid && checkLength( lname, "lname", 2, 80 );
                 bValid = bValid && checkLength( add1, "add1", 5, 80 );
                 bValid = bValid && checkLength( add2, "add2", 0, 50 );
                 bValid = bValid && checkLength( city, "city", 3, 50 );
                 bValid = bValid && checkLength( state, "state", 2, 50 );
                 bValid = bValid && checkLength( zip, "zip", 2, 20 );

                 if ( bValid ) {

                     $( "#disp_fname").html(fname.val());
                     $( "#fname").html(fname.val());

                     $( "#disp_mi").html(mi.val());
                     $( "#mi").html(mi.val());

                     $( "#disp_lname").html(lname.val());
                     $( "#lname").html(lname.val());

                     $( "#disp_add1").html(add1.val());
                     $( "#add1").html(add1.val());

                     $( "#disp_add2").html(add2.val());
                     $( "#add2").html(add2.val());

                     $( "#disp_city").html(city.val());
                     $( "#city").html(city.val());

                     $( "#disp_state").html(state.val());
                     $( "#state").html(state.val());

                     $( "#disp_zip").html(zip.val());
                     $( "#zip").html(zip.val());

                     $( "#disp_country").html(country.find(":selected").text());
                     $( "#country").html(country.val());
                 }

                $( ".ui-dialog-content" ).dialog( "close" );

            },
            Cancel: function() {

                $( ".ui-dialog-content" ).dialog( "close" );
            }
        }, 
        close: function(event, ui) {
            allFields.val( "" ).removeClass( "ui-state-error" );                
        }
    })

这是我的表单代码。

<div id=divForm  title="Edit Information" class="ui-dialog-content ui-widget-content">

        <form id="niceForm" style="margin-top: 10px">
            <input class=textinput name=fname id=fname type=text size='<?=$fname[2]?>' value="<?=$client->fname?>" placeholder="<?=$fname[0]?>">

            <?$mi = $formFields['mi'];?>
            <input class=textinput name=mi id=mi type=text size='<?= $mi[2]?>' value="<?=$client->mi ?>" placeholder="<?=$mi[0]?>"><br />

            <?$lname = $formFields['lname'];?>
            <input class=textinput name=lname id=lname type=text size='<?=$lname[2]?>' value="<?=$client->lname ?>" placeholder="<?=$lname[0]?>"><br />

            <?$add1 = $formFields['add1'];?>
            <input class=textinput name=add1 id=add1 type=text size='<?=$add1[2]?>' value="<?=$client->add1 ?>" placeholder="<?= $add1[0]?>"><br />

            <?$add2 = $formFields['add2'];?>
            <input class=textinput name=add2 id=add2 type=text size='<?=$add2[2]?>' value="<?=$client->add2 ?>" placeholder="<?=$add2[0]?>"><br />

            <?$city = $formFields['city'];?>
            <input class=textinput name=city id=city type=text size='<?=$city[2]?>' value="<?=$client->city ?>" placeholder="<?=$city[0]?>"><br />

            <?$state = $formFields['state'];?>
            <input class=textinput name=state id=state type=text size='<?=$state[2]?>' value="<?=$client->state ?>" placeholder="<?=$state[0]?>">

            <?$zip = $formFields['zip'];?>
            <input class=textinput name=zip id=zip type=text size='<?=$zip[2]?>' value="<?=$client->zip ?>" placeholder="<?=$zip[0]?>"><br />

            <?$country = $formFields['country_index'];?>

            <select style="margin: 5px 0px; width:303px" name=country_index id=country_index>
               <? foreach($country[3] AS $k=>$v) {
                    $country_index = $v['country_index'];
                    $country = $v['country'];
                    if($client->country_index == $country_index) {
                        $selected = " SELECTED";
                    }else{
                        $selected = " ";
                    }
                    echo '<option value=' . $country_index . ' ' . $selected . '>' . $country . '</option>';
                }?>
            </select>
        </form>
    </div>

我谷歌可能会发出问题,对话框div没有得到重新附加到身体但是没有接缝的情况下,这是一个和平如果我的firebug代码关闭表格后(它在打开之前相同)

<body>
<div id="wrapper">
<div id="footer" style="margin_top: 30px">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="position: absolute; height: auto; width: 350px; top: 462px; left: 496px; display: none;" tabindex="-1" role="dialog" aria-describedby="divForm" aria-labelledby="ui-id-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="divForm" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 388px;">
<form id="niceForm" style="margin-top: 10px">
<input id="fname" class="textinput" type="text" placeholder="First Name" value="Gastón" size="27" name="fname">
<input id="mi" class="textinput" type="text" placeholder="MI" value="" size="3" name="mi">
<br>
<input id="lname" class="textinput" type="text" placeholder="Last Name" value="Cortés" size="37" name="lname">
<br>
<input id="add1" class="textinput" type="text" placeholder="Address 1" value="Ave Sta Barbara 205" size="37" name="add1">

是否有同样的问题?

1 个答案:

答案 0 :(得分:1)

您正在删除表单关闭时的所有值:

    close: function(event, ui) {
        allFields.val( "" ).removeClass( "ui-state-error" );                
    }

删除.val()位:

    close: function(event, ui) {
        allFields.removeClass( "ui-state-error" );                
    }