[英]Appending <li> value to <ul> in jquery dialog box is not working
我有一个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列表不起作用
请分享您的建议。
#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>
检查此代码段...它的工作原理。 让我知道
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>");
将单引号更改为双引号..这将起作用..让我知道
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.