2014-03-19 9 views
0

opencart에서 작업 중입니다. 사용자가 제품 페이지가 포함 된 링크를 클릭 할 때마다 모달 대화 상자 팝업을 만들려고했습니다. 해당 링크에는 탭이 있습니다 (리뷰, 설명). 성공적으로로드하지만 탭이 작동하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? .jQuery 대화 상자에서 URL이 탭으로 작동하지 않습니다.

이 내가이 전화하는 방법입니다 ('# 탭 A'를)

$('a[href*="index.php?route=product/product"]').click(function(event){ 
    event.preventDefault(); 
    showDialog(this.href); 
}); 

$("#dialog-modal").dialog({ //create dialog, but keep it closed 
    autoOpen: false, 
    height: 550, 
    width: 1000, 
    position: "center", 
    modal: true, 
    close: function(event, ui) { $('#wrap').show(); }, 
    open: function(event, ui) { $('.ui-widget-overlay').bind('click', function(){ $("#dialog-modal").dialog('close'); }); } 
}); 

function showDialog(urlToLoad){ //load content and open dialog 
    $.ajax({ 
     type: "POST", 
     url: urlToLoad, 
     success: function(returnedData) { 
      var $html = $(returnedData); 
      var content = $html.find('#content').find('.breadcrumb').remove(); 
      content = $html.find('#content').html(); 
      var container = document.getElementById('dialog-content'); 
      container.innerHTML = content; 
      $("#dialog-modal").dialog("open"); 
      $('#tabs a').tabs(); 
     } 
    }); 
} 

분명히 $를 탭(); 이후 $ ("# dialog-modal") 대화 상자 ("open");이 작동하지 않습니다.

+0

페이지에서 이미 준비된 모달 창에 콘텐츠가로드되어 있고 페이지에서로드 된 콘텐츠가 모달 HTML로 복사 되었기 때문에 콘텐츠 HTML 부분을 복사하는 동안 모달 창을 여는 경우 두 개 ID가 'tabs' 인 요소 -> 따라서 jQuery 선택기가 더 이상 작동하지 않을 수 있습니다. 클래스의 ID 속성을 변경하고 selector를'$ ('. tabs a')'로 변경하십시오. – shadyyx

+0

이 시도했지만 여전히 작동하지 않습니다. :(실제로 모달 창이 처음으로 비어 있습니다. 제품을 클릭하면 모달 창이 페이지를로드합니다. – mutokenji

+0

탭 확장 내에서 수신 대기해야하는 이벤트가 새로 생성 된 내용으로 전파되지 않을 가능성이 높습니다 내용을 복사하고 다시 렌더링 한 후에 탭을 초기화하더라도 현재 HTML, jQuery 플러그인 (모달 및 탭용)으로 붙여 넣기 bin 프로젝트를 만들고 여기에 링크를 게시 할 수 있습니까? – shadyyx

답변

0

마지막으로 이것을 해결합니다. 그것은 바보 같은 문제입니다, 나는 호출자 페이지에서 jquerytabs.js를 가져 오는 것을 잊었습니다. 따라서 tabs() 함수는 작동하지 않습니다. 이제 완벽하게 작동합니다.

관련 문제