在jquery对话框中输入文本值不会更改

时间:2014-04-02 14:26:25

标签: javascript jquery dialog

我正在尝试根据用户在用户提交的上一个表单中的选择选项中选择的值来更改对话框内输入文本框的值。我能够获取值,并且我能够首先将值设置到对话框内的文本框中。但是当我重新提交选择了不同选项的表单并再次打开对话框时,该值最初不会更改。它仅在我第二次打开对话框时才会更改。

下面是调用对话框的代码,以及将值设置为文本框的函数:

$("#displayOrderDetailsDiv").on('click','.shippedOrder',function() {
    var dc = $("#DC").val();
    var shipmentKey = $(this).closest('tr').find('td:first').text().trim();
    $("#printLabelDialog").html("<form><fieldset><label for=\"ip\">Printer IP</label> <input type=\"text\" name=\"ip\" id=\"ipAddr\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"IP address of printer(eg: 10.56.89.175)\"> <labelfor=\"stnid\">Station ID:</label> <input type=\"text\" name=\"stnid\" id=\"stnid\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"station id in 3 digits(Eg: 002)\"></fieldset></form>");
    setIPandStn(dc);
    $( "#printLabelDialog" ).dialog( {
        autoOpen: false,
        height : 200,
        width : 900,
        modal: true,
        buttons: [ { 
            text: "Print", 
            click: function() {
                var ip = $("#ipAddr").val().trim();
                if (!validateIp(ip)){
                    alert("Please enter a valid IP");
                    return false;
                }
                var stnid = $("#stnid").val().trim();
                if ((stnid.length != 3) || (isNaN(stnid))){
                    alert("Please enter a valid station Id");
                    return false;
                }
                var ajax_load = "<img class='loading' src='loading.gif' alt='loading...' style='width: 35px; height: 35px; top: 50%; left: 50%; position:absolute;' />";
                $( this ).html(ajax_load);
                var options = {
                    buttons: {}
                };
                $("#printLabelDialog").dialog('option', options);
                $( "#printLabelDialog" ).dialog( "option", "width", 150 );
                $( "#printLabelDialog" ).dialog( "option", "height", 120 );
                $.ajax({
                    url : 'printLabelTrackingNumber.jsp',
                    type : 'POST',
                    data : {
                        ipAddr : ip,
                        stationId : stnid,
                        sKey : shipmentKey
                    },
                    success : function(data) {

                        $( "#printLabelDialog" ).dialog( "option", "width", 400 );

                        $("#printLabelDialog").dialog('option', options);
                        $("#printLabelDialog").html(data);
                    },
                    error : function(err) {
                        alert(err.responseText);
                    },
                    close : function(e,ui){
                        $(this).dialog('destroy').remove();
                    }
                }); 
            } 
        } ]


    });


    $( "#printLabelDialog" ).dialog( "open" );

});

以下是将值设置为对话框的功能

function setIPandStn(dcVal){
    if (dcVal == "02"){
        $("#ipAddr").val("10.56.89.175");
        $("#stnid").val("102");
    }
    else if (dcVal == "13"){
        $("#ipAddr").val("10.56.111.48");
        $("#stnid").val("101");
    }
    else if (dcVal == "12"){
        $("#ipAddr").val("10.26.25.166");
        $("#stnid").val("004");
    }
}

如您所见,我正在尝试使用函数$("#ipAddr")设置setIPandStn()的值。当我提交表单时,dc值会更改,但只有当我打开并关闭对话框并第二次打开它时,文本框内的值才会更改。

有人可以帮我确定问题吗?

1 个答案:

答案 0 :(得分:0)

乍一看,看起来您通过Ajax提交表单,然后在success函数中打开一个新对话框。但是,您不运行“setIPandStn(dc);”再次运行,直到再次单击对话框触发器。

我建议运行setIPandStn(dc);再次在您的ajax调用的成功函数中,打开新对话框后。

[...]
success : function(data) { 
  $( "#printLabelDialog" ).dialog( "option", "width", 400 );  
  $("#printLabelDialog").dialog('option', options);
  $("#printLabelDialog").html(data);
  setIPandStn(dc);
},
[...]