Question

我有一个jQuery对话框，其中添加了文本框，按钮和列表。我试图在不加载页面的情况下将输入的文本框值附加到同一个对话框的列表中。

<a href="#"  class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
    <div id="list" class="ui-popup">
        <label for="name">Add name</label><br/>
        <input style="width: 50%;" type='text' id="name" value="" >
        <input type="submit" class="save" id="save" value="SAVE"/>

        <ul id="namelist">
            <li>Reena</li>
        </ul>
    </div>
</div>

var view = function(eventData) {
    $("#dialogBox").dialog({resizable: false,
        height:'auto',
        width:950,
        modal: true
    }).css("maxHeight", window.innerHeight - 200);
};

$('.view').click(view);

var update = function(e) {
    var name = $("#name").val(); 

    $.ajax({
        url : "someApi.php",
        type: "POST",
        data : "function=updatenames&name="+name,
        success: function() {
            $("#namelist").append('<li>'+name+'</li>');
        },
        error: function () {
            alert( "Could not Update" );
            return false;
        }
    });
};

$('.save').click(update);

我上面尝试过，ajax函数和所有工作正常，但是成功函数追加列表到ul是不行的

请分享您的建议。

Answer 1

#name位于模态窗口中 - 要获取其值，您需要在输入ID之前添加模态窗口名称 - 请尝试以下操作：var name = $('#dialogBox #name').val()：

＆＃13;

var view = function() {
    $("#dialogBox").dialog({resizable: false,
        height:'auto',
        width:950,
        modal: true
    });
};

$('.view').click(view);

var update = function(e) {
    var name = $('#dialogBox #name').val(); 

     $("#dialogBox #namelist").append('<li>'+name+'</li>');
      
};

$('.save').click(update);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"   integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="   crossorigin="anonymous"></script>
<a href="#"  class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
    <div id="list" class="ui-popup">
        <label for="name">Add name</label><br/>
        <input style="width: 50%;" type='text' id="name" value="" >
        <input type="submit" class="save" id="save" value="SAVE"/>

        <ul id="namelist">
            <li>reena</li>
        </ul>
    </div>
</div>

＆＃13;

Answer 2

检查此代码段...其工作情况。让我知道

＆＃13;

var view = function() {
    $("#dialogBox").dialog({resizable: false,
        height:'auto',
        width:950,
        modal: true
    });
};

$('.view').click(view);

var update = function(e) {
    var name ='Nithya'; 

     $("#namelist").append('<li>'+name+'</li>');
      
};

$('.save').click(update);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"   integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="   crossorigin="anonymous"></script>
<a href="#"  class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
    <div id="list" class="ui-popup">
        <label for="name">Add name</label><br/>
        <input style="width: 50%;" type='text' id="name" value="" >
        <input type="submit" class="save" id="save" value="SAVE"/>

        <ul id="namelist">
            <li>reena</li>
        </ul>
    </div>
</div>

＆＃13;

$("#namelist").append("<li>' + name + '</li>");将单引号更改为双引号..这将有效..让我知道

在jquery对话框中将<li>值附加到<ul>不起作用

2 个答案: