6

新しいjquerymobileui 1.3で遊ぶことができるように、jqueryを更新しました。何らかの理由で、フォームがページを更新しなくなりました。以前は機能していましたが、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 -->
4

1 に答える 1

1

はじめに

あなたの問題はおそらく $(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');
});
于 2013-01-25T08:47:10.670 に答える