복붙노트

[JQUERY] 때마다 원격 모달 쇼에게 동일한 콘텐츠를 부트 스트랩 트위터

JQUERY

때마다 원격 모달 쇼에게 동일한 콘텐츠를 부트 스트랩 트위터

해결법


  1. 1.문제는 두 가지입니다.

    문제는 두 가지입니다.

    모달 객체가 인스턴스화되면 첫째, 그것은 지속적 만에 () 토글 호출이 모달을 보여 데이터 대상 및 후속 호출에 의해 지정된 요소에 연결되어 있지만 옵션의 값을 업데이트하지 않습니다. 그래서, HREF 속성이 모달이 토글하여 다른 링크에 다른 경우에도, 원격의 값이 업데이트 점점되지 않습니다. 대부분의 옵션은, 하나는 직접 객체를 편집하면이 문제를 해결할 수 있습니다. 예를 들어 :

    $('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
    

    둘째, 모달 플러그인은 변화가 options.remote에 만든 경우에도 불행하게도 수단, 그것은 다시로드되지 않습니다 모달 객체의 생성자에서 원격 리소스를로드하기 위해 설계되었습니다.

    간단한 해결 방법은 다음 토글하기 전에 모달 오브젝트를 파괴하는 것입니다. 하나의 옵션은 숨어 끝난 후 단지 그것을 파괴하는 것입니다 :

    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
    

    참고 : 필요에 따라 선택기를 조정합니다. 이것은 가장 일반적이다.

    아니면 모달를 시작 링크가 이전과 다른 여부를 확인 같은 뭔가를 더 복잡하게 계획을 세우는 시도 할 수 있습니다. 이 경우, 파괴; 그렇지 않은 경우, 다음에는 다시로드 할 필요가 없습니다.


  2. 2.부트 스트랩 3의 당신은 사용해야합니다 :

    부트 스트랩 3의 당신은 사용해야합니다 :

    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });
    

  3. 3.부트 스트랩 3.1 당신은 부하에 원격 콘텐츠를 기다리는 동안 깜박 거림을 방지하기 위해 전체 대화 (3.0)보다는 모달 콘텐츠를 데이터를 제거하고 비워 할 것입니다.

    부트 스트랩 3.1 당신은 부하에 원격 콘텐츠를 기다리는 동안 깜박 거림을 방지하기 위해 전체 대화 (3.0)보다는 모달 콘텐츠를 데이터를 제거하고 비워 할 것입니다.

    $(document).on("hidden.bs.modal", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

    그런 다음 위의 코드는 물론, 폐쇄 (나쁜) 한 번 자신의 콘텐츠를 제거합니다 비 원격 조동사를 사용하는 경우. 당신은 그들이 영향을받지 않도록 (A .local의 모달 클래스처럼) 그 조동사에 무언가를 추가해야 할 수도 있습니다. 그런 다음 위의 코드를 수정 :

    $(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

  4. 4.감사 메르. 나는 bootstrap.js 주위 땜질 시작했지만 답변은 빠르고 깨끗하고 해결 방법입니다. 여기에 내 코드에서 사용 결국거야.

    감사 메르. 나는 bootstrap.js 주위 땜질 시작했지만 답변은 빠르고 깨끗하고 해결 방법입니다. 여기에 내 코드에서 사용 결국거야.

    $('#modal-item').on('hidden', function() {
        $(this).removeData('modal');
    });
    

  5. 5.나는 그것을 할 자바 스크립트와 함께 갔다 있도록 허용 대답은 나를 위해 작동하지 않았다.

    나는 그것을 할 자바 스크립트와 함께 갔다 있도록 허용 대답은 나를 위해 작동하지 않았다.

    <a href="/foo" class="modal-link">
    <a href="/bar" class="modal-link">
    
    <script>
    $(function() {
        $(".modal-link").click(function(event) {
            event.preventDefault()
            $('#myModal').removeData("modal")
            $('#myModal').modal({remote: $(this).attr("href")})
        })
    })
    

  6. 6.부트 스트랩 3 참고로이 작품

    부트 스트랩 3 참고로이 작품

    $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
    });
    

  7. 7.내 프로젝트는 YII 내장 및 당신이 YII를 사용하는 경우이 답변은 관련이 있으므로, 부트 스트랩 - YII 플러그인을 사용합니다.

    내 프로젝트는 YII 내장 및 당신이 YII를 사용하는 경우이 답변은 관련이 있으므로, 부트 스트랩 - YII 플러그인을 사용합니다.

    위의 수정 작업을했지만 첫 번째 시간 이후 모달이 표시되었다. 처음 비어를 내놓았다. 나는 때문에 YII함으로써 내 개시 변수를 삭제 모달의 숨기기 기능을 호출하는 코드의 내 개시 후 그의를 생각한다.

    나는 모달를 시작 코드 직전 removeData 호출 퍼팅 트릭을 한 것으로 나타났다. 그래서 내 코드는 다음과 같이 구성되어 있습니다 ...

    $ ("#myModal").removeData ('modal');
    $ ('#myModal').modal ({remote : 'path_to_remote'});
    

  8. 8.부트 스트랩 3.2.0에서 이벤트가 문서이어야하고 모달을 비울 필요 "에"

    부트 스트랩 3.2.0에서 이벤트가 문서이어야하고 모달을 비울 필요 "에"

    $(document).on("hidden.bs.modal", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

    부트 스트랩 3.1.0에서 "의"이벤트가 몸에있을 수 있습니다 :

    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });
    

  9. 9.왜 BS 3은 일반적인하지? 그냥 모달 DIV의 ID로 "[뭔가] 모달"를 사용합니다.

    왜 BS 3은 일반적인하지? 그냥 모달 DIV의 ID로 "[뭔가] 모달"를 사용합니다.

    $("div[id$='modal']").on('hidden.bs.modal',
        function () {
            $(this).removeData('bs.modal');
        }
    );
    

  10. 10.나를이기 전용 옵션 작업 :

    나를이기 전용 옵션 작업 :

    $('body').on('hidden.bs.modal', '#modalBox', function () {
        $(this).remove();
    });
    

    나는 부트 스트랩 3 사용하고 난 함수가 호출 한 팝업 ( '팝업 내용') 이는 모달 상자 HTML을 추가합니다.


  11. 11.$ (이) 들이게된다 ( '') 추가; 뿐만 아니라 눈에 보이는 데이터를 삭제하고 꽤 잘 작동합니다

    $ (이) 들이게된다 ( '') 추가; 뿐만 아니라 눈에 보이는 데이터를 삭제하고 꽤 잘 작동합니다


  12. 12.원격 URL을 제공하면, 콘텐츠 jQuery의로드 방법을 통해 한 번에로드되고 .modal 콘텐츠 DIV 주입한다. 당신은 데이터 API를 사용하는 경우 대안으로 원격 소스를 지정 HREF 속성을 사용할 수 있습니다. 이것의 예는 다음과

    원격 URL을 제공하면, 콘텐츠 jQuery의로드 방법을 통해 한 번에로드되고 .modal 콘텐츠 DIV 주입한다. 당신은 데이터 API를 사용하는 경우 대안으로 원격 소스를 지정 HREF 속성을 사용할 수 있습니다. 이것의 예는 다음과

    $.ajaxSetup ({
        // Disable caching of AJAX responses
        cache: false
    });
    

  13. 13.이전 내용이 HTML의 내부를 취소 할 .modal 컨텐츠 내부 .html 중에서 ( '')로, 새 나타날 때까지 표시되어 있기 때문에 나는, 이런 식으로 뭔가를 추가 한 것이 도움이되기를 바랍니다

    이전 내용이 HTML의 내부를 취소 할 .modal 컨텐츠 내부 .html 중에서 ( '')로, 새 나타날 때까지 표시되어 있기 때문에 나는, 이런 식으로 뭔가를 추가 한 것이 도움이되기를 바랍니다

    $('#myModal').on('hidden.bs.modal', function () {
       $('#myModal').removeData('bs.modal');
       $('#myModal').find('.modal-content').html('');
    });
    

  14. 14.나는 모달의 상쾌한을 처리하는 간단한 코드 조각을 썼다. 이 모달 데이터를 제거 여부, 클릭 된 동일한 링크의 경우 기본적으로는 모달의 데이터와 확인에 클릭 된 링크를 저장합니다.

    나는 모달의 상쾌한을 처리하는 간단한 코드 조각을 썼다. 이 모달 데이터를 제거 여부, 클릭 된 동일한 링크의 경우 기본적으로는 모달의 데이터와 확인에 클릭 된 링크를 저장합니다.

    var handleModal = function()
    {
        $('.triggeringLink').click(function(event) {
            var $logsModal = $('#logsModal');
            var $triggeringLink = $logsModal.data('triggeringLink');
    
            event.preventDefault();
    
            if ($logsModal.data('modal') != undefined
                && $triggeringLink != undefined
                && !$triggeringLink.is($(this))
            ) {
                $logsModal.removeData('modal');
            }
    
            $logsModal.data('triggeringLink', $(this));
    
            $logsModal.modal({ remote: $(this).attr('href') });
            $logsModal.modal('show');
        });
    };
    

  15. 15.부트 스트랩 3, modal.js에서 나는 변경 :

    부트 스트랩 3, modal.js에서 나는 변경 :

    $(document)
      .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
      .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
    

    ...에

    $(document)
      .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
      .on('hidden.bs.modal', '.modal', function () { 
        $(this).removeData('bs.modal').empty()
        $(document.body).removeClass('modal-open')
      })
    

    (별도의 간격은 명확성을 위해 첨가)

    모달 용기에 () 빈 호출뿐만 아니라 데이터를 제거하여 기존 모달 내용이 방지 원치 않는 플래시.


  16. 16.

            $('#myModal').on('hidden.bs.modal', function () {
                $(this).removeData('modal');
            });
    

    이 사람은 나를 위해 작동합니다.


  17. 17.이 다른 접근 방법은 나를 위해 잘 작동합니다 :

    이 다른 접근 방법은 나를 위해 잘 작동합니다 :

    $("#myModal").on("show.bs.modal", function(e) {
        var link = $(e.relatedTarget);
        $(this).find(".modal-body").load(link.attr("href"));
    });
    

  18. 18.

    $('body').on('hidden.bs.modal', '.modal', function () {
           $("#mention Id here what you showed inside modal body").empty()
    });
    

    당신은 (DIV 스팬 무엇이든)처럼 비워 할 HTML 요소입니다.


  19. 19.이 사람은 나를 위해 작동합니다 :

    이 사람은 나를 위해 작동합니다 :

    자본

    <div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
      </div>
      <div class="modal-body">
        <input type="hidden" name="location">
        <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
        <div class="links-area" id="links-area"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div> </div></div>
    

    스크립트

    <script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>
    

    링크 영역 내가 취소 데이터와 필요성을 넣어 영역입니다


  20. 20.@merv에 의해 허용 대답의 확장 버전. 또한 검사는 숨겨진 모달 존재는 원격 소스에서로드 및 깜박이는 것을 방지하기 위해 기존의 콘텐츠를 삭제하는 경우.

    @merv에 의해 허용 대답의 확장 버전. 또한 검사는 숨겨진 모달 존재는 원격 소스에서로드 및 깜박이는 것을 방지하기 위해 기존의 콘텐츠를 삭제하는 경우.

    $(document).on('hidden.bs.modal', '.modal', function () {
      var modalData = $(this).data('bs.modal');
    
      // Destroy modal if has remote source – don't want to destroy modals with static content.
      if (modalData && modalData.options.remote) {
        // Destroy component. Next time new component is created and loads fresh content
        $(this).removeData('bs.modal');
        // Also clear loaded content, otherwise it would flash before new one is loaded.
        $(this).find(".modal-content").empty();
      }
    });
    

    https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5


  21. 21.부트 스트랩 버전 3.3.2에서 테스트

    부트 스트랩 버전 3.3.2에서 테스트

      $('#myModal').on('hide.bs.modal', function() {
        $(this).removeData();
      });
    

  22. 22.이 일에 행운을 빕니다 :

    이 일에 행운을 빕니다 :

    $('#myModal').on('hidden.bs.modal', function () {
        location.reload();
    });
    
  23. from https://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-every-time by cc-by-sa and MIT license