1

jQuery Mobile でアプリを作成しています。サーバーからデータをロードするページが必要です。さまざまな理由で、ロード時に PHP でリスト項目を作成しています。

そのため、最初にページをロードすると、すべてがスムーズに進みます。もう一度ロードすると、データは再挿入されますが、マークアップは強化されません。

この正確な問題に対処する SO にはいくつかのスレッドがありますが、受け入れられる答えは常に .trigger('create') を使用することです。これを実行しましたが、成功しませんでした.listview('refresh')、.trigger('updatelayout')を使用してみました。 listview div、それを完全に入れます：私のajax呼び出しのですが、何もありません。だから私はあなたのコミュニティに尋ねることに頼りました：

私は jQM 1.1.1 を使用しています: より多くの情報が必要な場合は、何か見逃したことがありますか? 喜んで提供します:

これが私のフロントページです

<div data-role="page" id="frontPage">
    <div data-role="header" data-theme="e" data-id="commonHead" data-position="fixed">
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext"></a>
        <h1>
            myApp
        </h1>
    </div>
    <div data-role="content" class="content">
        <ul data-role="listview">
            <li><a href="#" onClick="viewfList()">List</a></li>
        </ul>
    </div>
</div>

これが私がナビゲートするページです：

<div data-role="page" id="fView">
    <div class="commonHeader"></div>
    <div data-role="content">
        <ul data-role="listview" id="fList">

        </ul>
    </div>
</div>

ここに、ページを呼び出すために使用するviewfList関数があります

function viewFeatList(){
    jQuery.ajax({ //getting my new <li>
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty(); //emptying the listview                
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]); //appending the <li>
                    }
                $('#fList').trigger('create'); //this version's attempt to re-enhance markup
                $.mobile.changePage('#fView');   //navigate to page                         

                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }
4

1 に答える 1

0

コメントからのインスピレーションのおかげで、欲求不満による自分の過失を克服し、解決策を見つけました:

これが私の新しい機能です

function viewfList(){
    jQuery.ajax({
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty();;               
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]);
                    }

                $.mobile.changePage('#fView');  
                $('#fList').listview('refresh');                                            
                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }

.listview('refresh') が機能し、CrimsonChinの提案に従ってJavascriptコンソールで実際にエラーをスローしましたが、実際のリストビュー要素ではなくページでこれらを実行していました。リストビュー要素で実行すると、次のエラーが発生しました。

Uncaught は、初期化の前にリストビューでメソッドを呼び出すことはできません。メソッド 'refresh' を呼び出そうとしました

これにより、明らかに、ページが変更された後に更新を呼び出すようになりました。

これに関する私の唯一の懸念は、ある日、ページで多くのことを行う場合、画面が変更される前に、拡張されていないマークアップが一瞬画面に表示される可能性があるかどうかです...これは現在発生していませんしかし、当面は非常に基本的なページを実行しています。

ご協力いただきありがとうございます。

于 2012-09-11T15:44:45.037 に答える