2011-12-01 1 views
1

ajax 요청을 통해 가져 왔을 때 올바르게 표시되도록 머리에 링크 된 스타일 및 processing.js 스크립트를 수정하고 싶습니다. 아약스 요청에서이 코드가 필요한 위치를 볼 수 있지만 단순히 스크립트를 다시 적용하는 코드를 알려주는 방법을 모르겠습니다. 사람들이 getScript()를 사용하여이 작업을 수행하는 것을 보았습니다. 그러나이 작업을 반복 또는 재 작업한다고 말하는 것보다는 스크립트를 다시로드하는 것으로 알 수 있습니다. 모든 스크립트가 다시 초기화해야합니까? 구문 하이라이팅 .highlight() 메소드를 찾았지만 아직로드 할 프로세싱 스크립트를 얻지 못했습니다. 현재 Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);이 작동하지 않습니다. 모든 라이브러리의 최신 버전을 사용하고 있습니다. 많은 사람들이 똑같은 문제를 갖고있는 것 같아 놀랍습니다. 아직 답을 찾을 수 없었습니다. 당신의 도움을 주셔서 감사합니다!ajax 요청 후 processing.js 스케치를 다시 초기화하십시오.

인덱스 페이지 :

$(document).ready(function() { 
    // put all your jQuery here. 

     //Check if url hash value exists (for bookmark) 
    $.history.init(pageload); 
     //highlight the selected link 
    $('a[href=' + document.location.hash + ']').addClass('selected'); 
     //Search for link with REL set to ajax 
    $('a[rel=ajax]').live("click",function(){ 
       //grab the full url 
     var hash = this.href; 
       //remove the # value 
     hash = hash.replace(/^.*#/, ''); 
       //for back button 
     $.history.load(hash); 
       //clear the selected class and add the class class to the selected link 
     $('a[rel=ajax]').removeClass('selected'); 
     $(this).addClass('selected'); 
       //hide the content and show the progress bar 
     //$('#content').hide(); 
     $('#loading').show(); 
     //run the ajax 
     getPage(); 
     //cancel the anchor tag behaviour 
     return false; 

    }); 
}); 


function pageload(hash) { 
    //if hash value exists, run the ajax 
    if (hash) getPage();  
} 

function getPage() { 

    //generate the parameter for the php script 
    var data = 'page=' + encodeURIComponent(document.location.hash); 
    $.ajax({ 
     url: "loader.php", 
     type: "GET",   
     data: data,  
     cache: false, 
     success: function (html) { 

      //hide the progress bar 
      $('#loading').hide(); 

      //add the content retrieved from ajax and put it in the #content div 
      $('#content').html(html); 

      //display the body with fadeIn transition 
      $('#content').fadeIn('fast'); 
      //reapply styles? 

      //apply syntax highlighting. this works 
      SyntaxHighlighter.highlight(); 
//relaod processing sketch, currently displays nothing 
      Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']); 
     }  
    }); 
} 

이 아약스 -로드 된 내용 :

<!--ajax'd content--> 
    <??> 
    <h2>code</h2> 
    <pre class="brush: php"> 
    $last_modified = filemtime("header.php"); 
    echo("last modified: "); 
    echo(date("m.j.y h:ia", $last_modified)); 
    </pre> 
    <script type="application/processing"> 
    </script> 
    <canvas data-processing-sources="mysketch.pde" id="processing"> 
    </canvas> 
    </div> 

</body> 
</html> 
<??> 
+1

이제 코드를 추가 할 수 있습니다. 대답은 절대로 나오지 않을 것입니다 ... –

+2

두 번째로, 여전히 : Ajax 요청 이전에 실행 된 JS가 있고 DOM에 무언가를 추가하면 분명히 영향을받지 않습니다. 이전 코드. – Viruzzo

+0

그래서 내 질문에 .js가 다시 불을 쬐는 지 어떻게 생각하세요? 나는 나 혼자서 그것을 알아낼 수 있을지도 모른다. – expiredninja

답변

3

그래서, 당신은 (외부 또는 내부) 자바 스크립트 코드를 포함 할 때의 보통 어떻게되는지 분석 할 수 있습니다 : 그것은 자동 것이다 전역 범위에서 사용할 수있는 코드 만 실행하십시오. "좋은"스크립트는 하나의 명령 만 전역 범위에 추가 한 다음 함수/메소드의 어딘가에서 초기화 코드를 실행합니다.

외부 자바 스크립트 파일을보고 전역 범위에서 실행중인 항목을 확인하면됩니다. 그것에 대한 일반적인 대답은 없습니다 ... 일부 스크립트는 객체를 사용하고 init() 메소드를 호출합니다. 그러나 이는 개발자의 상상력에 완전히 좌우됩니다. 당신이 실행하는 데 필요 자바 스크립트가있는 경우

1

, 당신은 머리 요소에이를 추가해야합니다

var head = document.head || document.getElementsByTagName("head")[0]; 
var script = document.createElement("script"); 
script.innerHTML = "your AJAX-obtained js code"; 
head.appendChild(script); 

같은 트릭은 CSS 간다. innerHTML과 같은 CSS 선언을 사용하여 요소를 머리에 추가하십시오. 따라서 AJAX 응답을 사전 처리하고 JavaScript 및 CSS 요소를 분리 한 다음 문서 헤더에 추가하십시오. 그것은의 라인을 따라 응답 JSON 개체를 만들기 위해 아마 쉽게 : 새 document.createElement ("DIV") 또는 뭔가를 innerHTML을로 사용하는 HTML에 대한 그 JSON을 구문 분석 후

{ 
    html: "<html>string<goes>here</goes></html>", 
    scripts: ["url1","url2","url2",...], 
    style: ... 
} 

와 (, append가 필요할 때마다), 스크립트 (HEAD 삽입을위한 요소로 변환), 스타일 선언 (HEAD 삽입을위한 요소로 바꾸는) 등이있다.

이미 아마

+0

나는 혼란스러워. 내 '응답'은 PHP 페이지입니다. 현재이 페이지가 서버와 상호 작용하지는 않지만 언젠가는 그것을 원합니다. 또한 "아약스에서 얻은 코드"가 의미하는 바가 혼란 스럽거나 html 문자열을 원한다면 올바른 페이지를 얻고 있습니다. 또한 나는 JSON을 망칠 적이 없다. 모든 도움에 감사드립니다. – expiredninja

+0

브라우저가 PHP를 "수행"하지 않기 때문에 응답에 PHP 코드가 포함되는 것은별로 중요하지 않습니다. "$ var"및 "echo"와 같은 것은 텍스트 문자열 일 뿐이며 브라우저는 아무 것도하지 않으므로 아무 처리도하지 않습니다 .j 또는 스타일 관련. AJAX 요청을 통해 얻은 콘텐츠를 기반으로 processing.js와 스타일을 새로 고치려면 올바른 응답을 얻어야합니다. 즉, html로 (body), CSS 스타일 (