Question

I’m building my first phone gap application to connect to an API I’ve already built in rails, I have a section where users can post content but when the user clicks submit, it submits the form with no issues and appends the post just fine, however if the user navigates to another section of the app, then comes back there will be a second copy of the post, if I watch my server console I can see it post multiple times, The other really odd thing is if the user goes on to post again in that section it’ll add an additional post on top of the additional post, and so on till the user is making the same post 10 times at once.

It seems like it’s looping through the function multiple times for some reason, but i’m really not sure why, I have a hunch it has something to do with my the

jQuery('#new_rave').live('submit', function( event ) {

But other methods I’ve tried result in the page not loading.

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

i dont really know what your code is right now ..
but for ajax calles i mostly assign variables with the values ..
like so

jQuery('#new_rave').click(function( event ) {
    var title = $(':input[name="goodtime[title]"]').val() ;
    var post = $(':input[name="goodtime[post]"]').val() ;
    $.ajax({
        url: 'http://whoops/goodtimes',
        type: 'POST',
        dataType: 'json',
        data: {'title' : title , 'post': post},
        success: function( data ) {
            for( var id in data ) {
               jQuery('#').html(data[id]);
            }
        }
    });
    return false;
});

and just replace the submit input with a button element ..
this will save a lot of un-needed work an avoid lot’s of trouble