아약스 문제 (JQuery와) 단순히

Question

난 그냥 문제의 샘플을 업로드했기 때문에 &이 명확를 만들기 위해 다시 게시하고 있습니다 ...

... 이 페이지 http://www.websitesbyshane.co.uk/chris/portfolio.php

포트폴리오 #content가 ajax를 통해 index.php로 가져온 경우 아닙니다. www.websitesbyshane.co.uk/chris의 홈페이지로 이동하여 '포트폴리오'를 클릭하면 자신을 볼 수 있습니다.

시간을내어 주셔서 감사합니다.

쉐인

Answer 1

아약스 호출이 전체 portfolio.php 페이지를로드하는 것처럼 보입니다. 사용자가 자바 스크립트가 활성화되어 있지 않으면 링크를 클릭하고 포트폴리오 페이지로 이동하는 것을 허용하는 것은 좋은 일이지만 Ajax 호출을 통해 전체 페이지를로드하는 것은 몇 가지 문제를 일으킬 것입니다.

ajax를 통해로드하는 portfolio.php 페이지에는 라이트 박스를 활성화하는 $ (document) .ready가 포함되어 있지만 메인 페이지가 이미로드되어 있으므로이 코드는 실행되지 않습니다. fancy box plugin에 대한 코드는 기본 웹 페이지에 있어야합니다. 그런 다음 포트폴리오 페이지/내용을 div에로드 한 후 해당 코드를 실행하여 멋진 상자를 바인딩 할 수 있습니다.

편집 : 추가 자세한 내용 :

당신은 현재 js.js 파일에

$('#content').load(toLoad) 

있습니다. JQuery와 API 문서에 따라 ( http://api.jquery.com/load/) 당신은이 완료되면 실행되도록로 콜백을 전달할 수 있습니다 다음 js.js이 같은 파일에

$('#content').load(toLoad, function() { 
    alert('Load was performed.'); 
}); 

당신은 단순히이 콜백 함수로 멋진 상자 코드를로드 할 수 :

$('#content').load(toLoad, function() { 
    $("a#example6").fancybox({ 
     'titlePosition' : 'over' 
    }); 

    $("a[rel=example_group]").fancybox({ 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'titlePosition' : 'over', 
     'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
     } 
    }); 
}); 

문제는 포트폴리오 페이지를 호출하지 않아도 호출된다는 것입니다. 불평하지는 않겠지 만 "if"문으로 감싸서 쉽게 해결할 수 있습니다.

Answer 2

방화범이 끌리지 않습니까? php/ajax 코드를 디버깅하는 데 도움이 될 수 있습니다. 을 잊어 버리지 말고 디버깅을 위해 XMLHttpRequests를 실행할 때 JavaScript 디버깅을 활성화하고 ajax 응답 탭에서 살펴보십시오.