2017-02-06 4 views
0

yii2를 백엔드 프레임 워크로 사용하고 내 앱을 둘러보고 싶지만 부트 스트랩 둘러보기 팝업이 두 번째 페이지에 표시되지 않으면 에셋 번들을 만듭니다. 부트 스트랩 투어를 등록하고 레이아웃에 등록하면 부트 스트랩 투어가 첫 번째 페이지에서 올바르게 작동하지만 다른 페이지로 갈 때 문제가 발생하고 다음 페이지에서 디버그 할 수 있습니다 :
부트 스트랩 투어 '둘러보기'| 종이/리디렉션에 리디렉션
부트 스트랩 투어 '둘러보기'| tour_current_step 값 2,다중 페이지 부트 트랙 둘러보기, 두 번째 페이지에 팝업 표시가 없습니다.

: 종이에 오류 리디렉션 루프/

이미 크롬의 개발자 도구 창에서 로컬 저장소를 확인하고 창 로컬 스토리지가 나타났다 두 번째 페이지에 갈 때 올바른 단계에 참조 업로드

및 다른 질문, yii2 라우터의 부트 스트랩 둘러보기에서 경로 옵션의 값을 어떻게 설정해야합니까? 내 경로가 올바른 것입니까? 예를 들어, 첫 번째 단계는 사이트의 메인 페이지에 있습니다 : "", 맞습니다, 누군가가 이전 단계로 돌아가는 popover의 이전 버튼을 클릭하면 좋을 것입니다.
여기 내 자바 스크립트 코드입니다, 내가 레이아웃 파일이 자바 스크립트 코드 등록 :

$(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, 옵션으로 정의하십시오.하지만 부트 스트랩 둘러보기의 소스 코드를 변경하는 것은 좋지 않지만 제 경우에는 효과가 있다고 생각합니다.