2017-11-09 11 views
0

私はJQuery Mobileを使用してモバイル電子商取引アプリケーションを作っています。次の問題があります。JQuery Mobile Linked Listviewが正しく機能していませんか?

ログインすると、ユーザーはJSONデータが入力されたリンク付きリストビューで構成されるストアエリアに移動します。今すぐストアページが初期化されると、リンクは機能しませんが、ページを更新するとうまく動作します。なぜ誰かがこの行動を取っているのか知っていますか?

注:#storeページから#productページに移動するには、複数ページのテンプレートを使用しています。

ここで私はこのために使用していジャバスクリプト:事前に

$(document).on("pagebeforecreate","#store", function() { 
    getProducts('', 
     function(data){ 
      let products = data.products; 
      storeProducts(products); 
      $(".product-list").html(''); 
      $.each(products, function(i, item){ 
      $(".product-list").append(` 
       <li> 
       <a href="#product" data-index="${item.prod_id}"> 
        <img src="${item.picture}" alt=""> 
        <h2>${item.prod_name}</h2> 
        <p>${item.prod_desc}</p> 
        <small>Price: <strong>€${item.unit_price}</strong></small> 
       </a> 
       </li> 
       `).listview("refresh"); 
      }); 

     }, 
     function(e){ 
      console.log(e); 
     }, 
     function(data){ 
      console.log('always'); 
     }); 
}); 

function getProducts(param, success, error, always){ 
    $.ajax({ 
    type:'GET', 
    url:`./ajax/products-ajax.php?${param}`, 
    dataType: 'json', 
    async:true 
    }).done(function(data){ 
    success(data); 
    }).fail(function(e){ 
    error(e); 
    }).always(function(data){ 
    always('always'); 
    }); 
} 

感謝。

UPDATE:

こんにちはデブロッカー、あなたの答えのために再び 感謝。コンソールログにエラーは表示されません。私は私のブラウザでキャッシュをオフにしようとしたが、同じ問題がまだあります。私が何をしようとしているのかをもっとよく説明できるかどうかを見てみましょう。

私はフロントエンド用のJQuery Mobileとバックエンド用のPHPを使ってこのアプリケーションを作ろうとしています。私は、あなたがログインするか、登録するためのリンクを持つindex.phpを持っています。 loginオプションを選択するとlogin.phpに進みます。ここにフォームを送信すると、サーバーにajaxリクエストが送信され、認証が行われます。応答が成功すると、listviewが存在するstore.phpにリダイレクトされます。私が前に言ったように、あなたがリストビューのリンクにログインした後にstore.phpに着陸したときには動作しません。ここで

+0

これは何が起きているかを考えます。ログインすると、私はプログラムによって、$ .mobile.changePage( "store.php")を使用してユーザーをstore.phpにリダイレクトします。しかし、私がこれを行うと、Jqueryモバイルは既にこのページをDOM内にあるページの上にロードしています(Ajaxナビゲーション)。これは私の場合は望ましくありません。なぜなら、このページには認証のためのPHPスクリプトがいくつかあるからです。私は$ .mobile.ajaxEnabled = falseを使って試しました。これを行うことからajaxを防ぐために、それでもそれを行います。 – josel82

答えて

0

が問題を引き起こしていたものです:認証後store.phpするようにユーザーをリダイレクトする場合

、jQueryのモバイルのAjaxのナビゲーションは、私がそこにいた最初のページをつかんました(store.phpは#storeを含む、複数ページです#product)を作成し、それをDOMに既にあるものの上に注入します。もちろん、私がリンクをクリックしたとき、DOMにid = "product"のページコンテナがなかったので、これらはうまくいきませんでした。私はページをリフレッシュすると、JQuery mobileがサーバーにhttpリクエストを行いました。今回はstore.phpを#storeと#productの両方のページで取得しました。したがって、リンクは想定通り動作します。

私の解決策:#storeと#productの両方を外部ページとして使用してください。それらを分離して外部ページとして呼び出すことで、Ajaxナビゲーションでこの問題を回避します。

関連する問題