2017-02-06 8 views
0

私はyii2をバックエンドフレームワークとして使用しています。私は自分のアプリケーションをツアーしたいのですが、ブートストラップツアーポップオーバーは2ページ目に表示されません。ブートストラップツアーを作成してレイアウトに登録すると、ブートストラップツアーは最初のページで正常に動作しますが、別のページに行くと問題が発生し、次のページのデバッグに表示されます:
ブートストラップツアー 'ツアー' |ペーパー/アップロードにリダイレクト
ブートストラップツアー 'ツアー' |紙/アップロードマルチページブートストラップツアー、第2ページのポップオーバー

にエラーのリダイレクトループ私はすでにクロームの開発ツールでウィンドウのローカルストレージをチェックして、第二のページウィンドウに行くローカルストレージが示されたとき、それは正しいステップである参照: tour_current_step値2を、

と別の質問、どのようにyii2ルーターのブートストラップツアーでパスオプションの値を設定する必要があります、私のパスは正しいですか?例えば、最初のステップはサイトのメインページです: ""、それは正しいです、誰かが前のステップに戻るpopoverの前のボタンをクリックした場合、私は欲しいです。ここ
は私のjavascriptのコードで、私はレイアウトファイルにこのJavaScriptコードを登録します。私は、コード上の多くの作業を行い、最終的に答えを見つける

$(function() { 
 
    var $demo, duration, remaining, tour; 
 
    $demo = $("#demo"); 
 
    duration = 5000; 
 
    remaining = duration; 
 
    tour = new Tour({ 
 
     onStart: function() { 
 
     return $demo.addClass("disabled", true); 
 
     }, 
 
     onEnd: function() { 
 
     return $demo.removeClass("disabled", true); 
 
     }, 
 
     debug: true, 
 
     steps: [ 
 
     { 
 
      path: "", 
 
      element: "#demo", 
 
      placement: "bottom", 
 
      title: "Welcome to Bootstrap Tour!", 
 
      content: "Introduce new users to your product by walking them through it step by step." 
 
     }, { 
 
      path: "", 
 
      element: "#Wordcounter", 
 
      placement: "bottom", 
 
      title: "Step One", 
 
      content: "For translation click on word counter menu item" 
 
     }, { 
 
      path: "paper/upload", 
 
      element: "#myDropzone", 
 
      placement: "top", 
 
      title: "Step two", 
 
      content: "Drag and Drop your file here or click to upload plz wate to complete upload" 
 
     } 
 
     , 
 
     { 
 
      path: "paper/upload", 
 
      element: "#next", 
 
      placement: "bottom", 
 
      title: "Step three", 
 
      content: "then Click on the Next Bottom", 
 
      reflex: true 
 
     }, { 
 
      path: "paper/show", 
 
      element: "#save", 
 
      placement: "top", 
 
      title: "Step four", 
 
      content: "click on save and continue and choose language plan", 
 
      duration: 5000 
 
     } 
 
     ] 
 
    }).init(); 
 
    if (tour.ended()) { 
 
     $('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert(); 
 
    } 
 
    $(document).on("click", "[data-demo]", function(e) { 
 
     e.preventDefault(); 
 
     if ($(this).hasClass("disabled")) { 
 
     return; 
 
     } 
 
     tour.restart(); 
 
     return $(".alert").alert("close"); 
 
    }); 
 
    });

答えて

0

、問題は、パス上にありました私はURLマネージャーでかなりのURLを使用していました。ブートストラップツアーには関連パスが必要です。現在のページのパスがブートストラップツアーのステップのパスと同じでなければ、リダイレクトループが発生します。ブートストラップツアーが見つかるか、リダイレクトする必要があるかどうか、これはブートストラップツアーの短いコードです。リダイレクトループに行く場所

 if (step.redirect && this._isRedirect(step.host, path, document.location)) { 
     this._redirect(step, i, path); 
     if (!this._isJustPathHashDifferent(step.host, path, document.location)) { 
      return; 
     } 
     } 

ルータからパスを取得する必要がある場合(Yii、Laravel、Symfonyなどのフレームワークなど)、ブートストラップツアーでは、ステップのonNext属性を使用してアドレスにリダイレクトすることを推奨します。
が、私の場合、私はより良い形で私の答えを見つけて、このコードで上記のコードを置き換えるために、ブートストラップツアーのソースコードを変更します。

var current_url = document.URL; 
    var result = current_url.includes(path);   
    if(!result){ 
     this._redirect(step, i, path); 
     if (!this._isJustPathHashDifferent(step.host, path, document.location)) { 
      return; 
     }    
    } 

及びこれにリダイレクトコード変更:

Tour.prototype._redirect = function(step, i, path) { 
     var href; 
     if ($.isFunction(step.redirect)) { 
     return step.redirect.call(this, path); 
     } else { 
      href = this._options.domainAddress + path; 
//  href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path; 
     this._debug("Redirect to: " + href); 
     if (this._getState('redirect_to') === ("" + i)) { 
      this._debug("Error redirection loop to " + path); 
      this._removeState('redirect_to'); 
      if (step.onRedirectError != null) { 
      return step.onRedirectError(this); 
      } 
     } else { 
      this._setState('redirect_to', "" + i); 
      return document.location.href = href; 
     } 
     } 
    }; 

グローバル変数をオプションdomainAddress に定義しますが、ブートストラップツアーのソースコードを変更するのは良い方法ではないと思いますが、私の場合はうまくいきます。

関連する問題