2012-08-02 9 views
7

MVCフレームワークに基づいてJQuery Mobileアプリケーションを構築しています。Ajaxコールを使用したJqueryモバイルでのページリダイレクトのサポート

私の問題は、ブラウザに "リダイレクト"指示(HTTP、Javascript、META-refresh)を送信できないことです。

ブラウザに「は定義されていない」と表示されます。ここで

は、サーバー側のリダイレクト用のコードです:

<html><head> 
     <script>location.href='$url'</script> 
</head></html> 

私はdata-ajax=falseを使用して問題を解決できることを知っている、しかし、私は以来、したくない:

  • 私は素敵なJqueryのモバイルトランジションを望んでいます
  • これはAjaxではるかに高速です
  • フレームワークがリダイレクトを送信するかもしれない

JQuery Mobileで1種類のリダイレクトが正しく処理されるようにする方法はありますか? HTTP、HTML META、Javascriptのいずれか?

+0

使用しているサーバー側の技術は何ですか?そこにリダイレクトする必要があります。 – Jasper

+0

私はPHPを使用しています。 ここで私はリダイレクトを行います。 JqueryのモバイルラップはAjaxで考えており、標準のリダイレクトではうまく機能しません。 –

+0

あなたはどんな問題を抱えていますか?あなたはどんなエラーを出していますか?なぜリダイレクトしていますか?リダイレクトを作成するコードはどのように見えますか?これはあいまいな質問です。 – Jasper

答えて

8

JQuery mobile communityの助けを借りて、標準的なHTMLリダイレクト(data-ajax="false")とJQMページ遷移の両方を処理できる洗練されたソリューションを考え出しました。

JQMトランジションを行うとき、JQMは結果HTMLをjavascriptで読み込みます。 `data-role = 'page'というページを検索し、それをDOMに置き換えます.HTMLヘッダーは無視されます。

したがって、ヘッダーには標準のJavascriptリダイレクトを、ダミーページにはJQMページをロードする必要があります。ここで

は私のMVCテンプレートのリダイレクション方式のコードです:

<html> 
    <head> 
     <!-- HTML reload (for data-ajax=false) --> 
     <script> 
      location.href='<?= $url ?>' 
     </script> 
    </head> 
    <body> 
     <!-- Change page : JQueryMobile redirect --> 
     <div data-role="page" id="redirect"> 
      <script> 
       $.mobile.changePage('<?= $url ?>'); 
      </script> 
     </div> 
    </body> 
</html> 

私は、これは誰かに役立ちます願っています。

+0

あなたは正しくURLを渡していないのですか? あなたは、私が何かが欠けていない限り、 '' はそれが すべきではないとして、それを渡す:P – BExDeath

+1

は、サーバーサイドコード –

+0

からシードされた値は、あなたがこのためのよりよい解決策を見つけるかありますか?または、サーバー側のリダイレクトのフレームワークサポートが向上しましたか?今何らかの理由でそれが重複している場合、私はこれをしたくありません –

1

jQuery Mobileのデモから、これがより良い解決策になるようです。

リダイレクトにhttpヘッダーを設定して、pagecontainerloadを探します。これは、ブラウザの奇妙さを避ける必要があります。

は、ここであなたがURLを傍受し、それをリセットするために、これを行うあなたのJavaScriptで次に、この

<?php 
// ************************************************************************ 
// The two-second sleep simulates network delays, hopefully causing a 
// loading indicator message to appear on the client side. 
// ************************************************************************ 
sleep(2); 

$dst = (isset($_GET[ "to" ]) 
    ? $_GET[ "to" ] 
    : (isset($_POST[ "to" ]) 
     ? $_POST[ "to" ] 
     : false)); 
if ($dst) { 
    // ********************************************************************** 
    // The crucial line: Issue a custom header with the location to which the 
    // redirect should happen. For simplicity, we simply redirect to whatever 
    // location was specified in the request's "to" parameter, but real-world 
    // scripts can compute the destination based on server-side state. 
    // 
    // NB: This is not a HTTP redirect. As far as HTTP is concerned, this is 
    // a normal request/response cycle with a status code of 200. 
    // ********************************************************************** 
    header("X-Redirect: " . $dst); 
} 
?> 

を行うPHPでページ

<a href="redirect.php?to=redirect-target.html" 
    data-role="button" data-inline="true">Redirect</a> 

を取得するa hrefです。

$(document).bind("pagecontainerload", function(e, triggerData) { 

     // We can use this event to recognize that this is a redirect. The event is 
     // triggered when jQuery Mobile has finished loading a page and inserting 
     // it into the DOM, but before it has altered the browser history. In this 
     // example the server helpfully returns a custom header. However, if you 
     // don't have access to the server side, you can still examine 
     // triggerData.page, which contains the page that was loaded, but which 
     // has not yet been displayed or even recorded in the browser history. You 
     // can also examine triggerData.xhr which contains the full XMLHTTPRequest. 
     // If there is a way to recognize that this is not the expected page, you 
     // can discard it and issue a second load() call for the page that really 
     // needs to be displayed to the user, reusing the options from the overall 
     // page change process. 

     var redirect = triggerData.xhr.getResponseHeader("X-Redirect"); 
     if (redirect) { 

      // We have identified that this page is really a redirect. Thus, we load 
      // the real page instead, reusing the options passed in. It is important 
      // to reuse the options, because they contain the deferred governing this 
      // page change process. We must also prevent the default on this event so 
      // that the page change process continues with the desired page. 
      $(e.target).pagecontainer("load", redirect, triggerData.options); 
      e.preventDefault(); 
     } 
    }); 

注:執筆時点では、このデモのためにjqueryのデモページ上のリンク切れが私は1.3のデモがある

https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/index.php https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/redirect.php

githubの上でそれを見つけなければならなかったがありましたまだ動作中http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

関連する問題