追加中 <li> 重視 <ul> 在jQuery對話框不起作用

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() ：

 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); 

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

Answer 2

檢查此代碼段...它的工作原理。 讓我知道

 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); 

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

$("#namelist").append("<li>' + name + '</li>"); 將單引號更改為雙引號..這將起作用..讓我知道