Ajax Form Submit not loading newly submitted data

Question

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.

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

The 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 id="content" data-role="content">  
    <ul data-role="listview" data-theme="d" data-divider-theme="d"></ul>
</div><!-- /content -->

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

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.

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.

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.

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