Ajax表单提交不加载新提交的数据

I updated jquery so i could play with the new jquery mobile ui 1.3 and for some reason my form no longer update page any more, it worked previously but it wasn't through ajax, it simply submitted the form without ajax, I would however like ajax to just fetch the new data and append it to the div instead of reloading the whole page again when the popup closes.

我更新jquery,那么我就可以玩新的jquery ui移动1.3和出于某种原因我不再更新页面,以前工作但不是通过ajax,它只是没有ajax提交表单,我不过想ajax获取新数据并将它附加到div而不是弹出关闭时再重新加载整个页面。

I use a popup module for the form and on submission it should append the new information to #content ul

我为表单使用了一个弹出模块，在提交时，它应该将新信息附加到#content ul

The JS.

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>

The form

表单

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

and the content div

和内容div

<div id="content" data-role="content">  
    <ul data-role="listview" data-theme="d" data-divider-theme="d"></ul>
</div><!-- /content -->

1 个解决方案

#1

Intro

Your problem is probably due to $(document).ready(function(){. In jQuery Mobile, Ajax is used to load the content of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh.

您的问题可能是由于$(document).ready(function(){。在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中。因为这个$(文档).ready()将在加载第一个页面之前触发，而用于页面操作的所有代码将在页面刷新之后执行。

Everything here can be found described with more details in my personal blog article.

这里的一切都可以在我的个人博客文章中找到更多的细节。

In case this is not a problem, use Firefox/Chrome plugin Firebug to test if ajax call has reached a server and if response has been received.

如果这不是问题，可以使用Firefox/Chrome插件Firebug测试ajax调用是否到达服务器，是否收到响应。

Last thing, don't refresh listview every time you append a new element. listview refresh is a huge time sink, every refresh can last around 50ms but do it numerous time and your restyling could go forever.

最后，不要在每次添加新元素时都刷新listview。listview刷新是一个巨大的时间汇聚，每一次刷新可以持续大约50毫秒，但是做了很多次，您的重新设计可能会永远持续下去。

Solution

So change this:

所以改变这个:

    $.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');
     });
    });

to this:

:

    $.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');
    });

EDIT

Your problem with constant post repeating comes to how jQuery Mobile handles event binding. Because pages are constantly revisited each time events are going to be bound over and over. In your case that would be an event that executes JSON call.

不断重复post的问题在于jQuery Mobile如何处理事件绑定。因为每一次事件都会被反复地重复访问。在您的示例中，该事件将执行JSON调用。

This can be prevented in several ways, most common one is to unbind event before binding it. For example:

可以通过几种方式防止这种情况，最常见的一种是在绑定事件之前解绑定事件。例如:

$('#test-button').off('click').on('click', function(e) {
    alert('Button click');
});