我更新了jquery,所以我可以使用新的jquery移动UI 1.3,由于某种原因,我的表单不再更新页面,它以前可以工作,但它不是通过ajax,它只是在没有ajax的情况下提交了表单,但是我希望ajax只是获取新数据并将其附加到div,而不是在弹出窗口关闭时再次重新加载整个页面。
我在表单中使用了一个弹出模块,提交时它应该将新信息附加到#content ul
JS.
<!-- Load Json data and events -->
<script type="text/javascript">
jQuery('#new_rave').live('submit',function( event ) {
$.ajax({
url: 'http://whoops/goodtimes',
type: 'POST',
dataType: 'json',
data: $('#new_rave').serialize(),
success: function( data ) {
for( var id in data ) {
jQuery('#').html(data[id]);
}
}
});
return false;
});
$(document).ready(function() {
$.getJSON('http://whoops/goodtimes', function( goodtimes ) {
$.each(goodtimes, function( goodtime ) {
var output =
"<li><a href="+this.goodtime.id+">" +
"<h3>" + this.goodtime.title + "</h3>" +
"<p>" + this.goodtime.post + "</p>" +
"<p class='ui-li-aside'><strong>" +
this.goodtime.created_at + "</strong></p>" +
"</a></li>";
$('#content ul').append(output).listview('refresh');
});
});
});
</script>
表格
<!-- New item Popup -->
<div data-role="popup" class="ui-content"
data-overlay-theme="a" data-position-to="window" id="add">
<form id="new_rave">
<label for="goodtime_title">Title</label>
<input type="text" name="goodtime[title]" id="goodtime_title">
<label for="goodtime_post">Rave</label>
<div data-role="fieldcontain">
<textarea name="goodtime[post]" id="goodtime_post"></textarea>
</div>
<input type="submit" value="submit">
</form>
</div>
和内容div
<div id="content" data-role="content">
<ul data-role="listview" data-theme="d" data-divider-theme="d"></ul>
</div><!-- /content -->
简介
您的问题可能是由于 $(document).ready(function(){. 在jQuery Mobile
中,Ajax用于在导航时将每个页面的内容加载到DOM
中。因此,$(document).ready()
将在加载第一个页面之前触发,并且用于页面操作的每个代码将在页面刷新后执行。
这里的所有内容都可以在我的个人博客文章中找到更多详细信息。
如果这不是问题,请使用 Firefox/Chrome 插件Firebug
来测试 ajax 调用是否已到达服务器以及是否已收到响应。
最后,不要在每次追加新元素时刷新listview
。 listview
刷新是一个巨大的时间槽,每次刷新可以持续大约 50 毫秒,但要多次刷新,您的重新设计可能会永远持续下去。
溶液
所以改变这个:
$.getJSON('http://whoops/goodtimes', function(goodtimes) {
$.each(goodtimes, function(goodtime) {
var output =
"<li><a href="+this.goodtime.id+">" +
"<h3>" + this.goodtime.title + "</h3>" +
"<p>" + this.goodtime.post + "</p>" +
"<p class='ui-li-aside'><strong>" + this.goodtime.created_at + "</strong></p>" +
"</a></li>";
$('#content ul').append(output).listview('refresh');
});
});
对此:
$.getJSON('http://whoops/goodtimes', function(goodtimes) {
$.each(goodtimes, function(goodtime) {
var output =
"<li><a href="+this.goodtime.id+">" +
"<h3>" + this.goodtime.title + "</h3>" +
"<p>" + this.goodtime.post + "</p>" +
"<p class='ui-li-aside'><strong>" + this.goodtime.created_at + "</strong></p>" +
"</a></li>";
$('#content ul').append(output);
});
$('#content ul').listview('refresh');
});
编辑
你对不断重复的帖子的问题在于jQuery Mobile如何处理事件绑定。因为每次事件要一遍又一遍地绑定时,页面都会不断被重新访问。在您的情况下,这将是执行 JSON 调用的事件。
这可以通过多种方式防止,最常见的一种是在绑定事件之前取消绑定事件。例如:
$('#test-button').off('click').on('click', function(e) {
alert('Button click');
});