내 태그가 PHP 파일에서 작동하지 않는 이유는 무엇입니까? (jQuery도 여기에 포함)

https://stackoverflow.com/questions/1821917

10-07-2019
|

문제

여기 내가 성취하려는 것입니다. jQuery를 사용하여 PHP 파일을 호출하는 양식이 있습니다. PHP 파일은 데이터베이스와 상호 작용 한 다음 페이지 컨텐츠를 생성하여 AJAX 응답으로 반환합니다. 즉,이 페이지 내용은 성공 함수의 새 창에 기록됩니다. $.ajax 전화. PHP 파일에서 반환 된 페이지 컨텐츠의 일부로 JavaScript 파일이있는 간단한 HTML 스크립트 태그가 있습니다. 구체적으로:

<script type="text/javascript" src="pageControl.js"></script>

이것은 PHP에 반향이 없지만 (시도했지만) HTML 일뿐입니다. pagecontrol.js는 컨텐츠를 생성하는 내 PHP 파일과 동일한 디렉토리에 있습니다.

내가 무엇을 시도하든 나는 얻을 수없는 것 같다 pageControl.js AJAX 호출의 성공에 대한 응답으로 생성 된 새 창에 포함되거나 작동하는 파일. "객체 예상"또는 변수가 정의되지 않은 오류로 끝나면 파일이 포함되지 않았다고 믿습니다. SRC와 함께 스크립트 태그를 사용하지 않고 JavaScript를 PHPFile에 직접 복사하면 작동하게 할 수 있습니다.

호출 파일, PHP 및 jQuery ajax 간의 범위 해상도에 대해 여기에 놓친 것이 있습니까? 앞으로이 방법으로 JavaScript 파일을 포함 시키려고하고 내가 잘못하고있는 일을 이해하고 싶습니다.

다시 안녕하세요 :

나는이 문제에 대해 일을 해왔지만 여전히 운이 없습니다. 나는 내가하고있는 일을 시도하고 명확히하려고 노력할 것이며, 아마도 무언가를 떠올리게 될 것입니다. 나는 물건을 조금 명확히하기 위해 요청 된대로 일부 코드를 포함하고 있습니다.

순서는 다음과 같습니다.

사용자는 일부 옵션을 선택하고 양식에서 제출 버튼을 클릭합니다.

양식 버튼 클릭은 다음과 같은 jQuery 코드에 의해 처리됩니다.

$(document).ready(function() {
  $("#runReport").click(function() {

    var report = $("#report").val();
    var program = $("#program").val();
    var session = $("#session").val();
    var students = $("#students").val();

    var dataString = 'report=' +report+ 
                     '&program=' +program+
                     '&session=' +session+
                     '&students=' +students;

    $.ajax({
        type: "POST",
        url: "process_report_request.php",
        cache: false,
        data: dataString,
        success: function(pageContent) {
            if (pageContent) {
                $("#result_msg").addClass("successMsg")
                    .text("Report created.");

                var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";

                // open a new report window
                var reportWindow = window.open("", "newReportWindow", windowFeatures);

                // add the report data itself returned from the AJAX call
                reportWindow.document.write(pageContent);
                reportWindow.document.close();
            }
            else {
                $("#result_msg").addClass("failedMsg")
                    .text("Report creation failed.");
            }
        }
    }); // end ajax call
    // return false from click function to prevent normal submit handling
    return false;
  }); // end click call    
}); // end ready call

이 코드는 PHP 파일에 대한 ajax 호출을 수행합니다 (process_report_request.php) 새 창의 페이지 내용을 만듭니다. 이 컨텐츠는 데이터베이스 및 HTML에서 가져옵니다. PHP 파일에는 새 창에 사용 된 JavaScript와 함께 헤드에 다른 JavaScript 파일을 포함하고 싶습니다. 나는 그것을 다음과 같이 포함 시키려고 노력하고있다

<script src="/folder1/folder2/folder3/pageControl.js" type="text/javascript"></script>

무고한 것을 보호하기 위해 경로 폴더 이름을 변경했습니다 :)

pagecontrol.js 파일은 실제로 jQuery 코드 파일 및 PHP 파일과 동일한 폴더에 있지만 안전하기 위해 전체 경로를 시도하고 있습니다. 브라우저의 URL을 사용하여 JS 파일에 액세스 할 수 있으며 스크립트 SRC 태그를 사용하여 정적 HTML 테스트 페이지에 성공적으로 포함시킬 수 있습니다.

JavaScript 파일이 PHP 파일에 포함되면 다음과 같이 기능 중 하나를 호출합니다 (PHP의 Echo).

 echo '<script type="text/javascript" language="javascript">writePageControls();</script>';

따라서 PHP 파일이 모든 페이지 컨텐츠를 AJAX 호출로 다시 보내면 새 창이 열리고 반환 된 컨텐츠가 위의 jQuery 코드에 의해 기록됩니다.

그만큼 writePageControls 라인은 페이지를 실행할 때 오류 "오류 : 개체 예상"을 얻는 곳입니다. 그러나 JavaScript는 정적 HTML 페이지와 PHP 파일에 "인라인"을 포함 할 때 모두가 잘 작동하기 때문에 이것이 어떤 종류의 경로 문제라고 생각하게됩니다.

다시 말하지만, 내가 무엇을 시도하든 pagecontrols.js 파일의 함수에 대한 나의 호출은 작동하지 않습니다. PHP 파일에 pagecontrol.js 파일의 내용을 스크립트 태그 사이에 넣고 다른 것을 변경하면 예상대로 작동합니다.

여러분 중 일부가 이미 말한 내용을 바탕으로 새로 열린 창에 대한 경로 해상도가 올바르지 않은지 궁금합니다. 그러나 나는 전체 경로를 사용하고 있기 때문에 왜 그런지 이해하지 못합니다. 또한 문제를 더욱 혼동시키기 위해 링크 된 스타일 시트는 PHP 파일에서 잘 작동합니다.

이것이 얼마나 오래되는지 사과하지만, 누군가가 이것을 더 살펴볼 시간이 있다면, 나는 그것을 크게 감사하겠습니다. 나는 그루칭 받았다. 나는 이것을 많이 할 때 초보자입니다, 그래서이 문제를 피하고이 문제를 피하는 더 좋은 방법이 있다면, 나는 모든 귀 (또는 내가 생각하는 눈 ...)입니다.

해결책

나는 또한 이것과 비슷한 문제에 문제가 있었고 이것은 진정한 두통이었다. 다음 접근법은 우아하지는 않지만 저에게 효과적이었습니다.

PHP 파일을 확인하고 신체에 원하는 것을 출력하십시오.
창 헤드에 jQuery를 동적으로 추가하십시오
윈도우 헤드에 외부 스크립트 파일을 동적으로 추가합니다.
창의 문서에서 jquery html을 사용하여 신체에로드 된 내용을 사용하여 html ()을 호출하여 스크립트를 평가합니다.

예를 들어, Ajax 성공에서 :

success: function(pageContent) {
        var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";
        var reportWindow = window.open("", "newReportWindow", windowFeatures);

        // boilerplate
        var boilerplate = "<html><head></head><body></body></html>";

        reportWindow.document.write(boilerplate);

        var head = reportWindow.document.getElementsByTagName("head")[0];

        var jquery = reportWindow.document.createElement("script");
        jquery.type = "text/javascript";
        jquery.src = "http://code.jquery.com/jquery-1.7.min.js";
        head.appendChild(jquery);

        var js = reportWindow.document.createElement("script");
        js.type = "text/javascript";
        js.src = "/folder1/folder2/folder3/pageControl.js";
        js.onload= function() {
            reportWindow.$("body").html(pageContent);
        };
        head.appendChild(js);


        reportWindow.document.close();

    }

행운을 빕니다!

다른 팁

아마도 JavaScript 파일을 가져 가고 싶다고 생각하는 곳을 찾고 있지 않을 것입니다.

다음과 같은 서버 관계 형식을 시도하십시오.

<script src="/some/path/to/pageControl.js"></script>

여전히 작동하지 않으면 스크립트 파일에 URL을 브라우저에 입력하고 다운로드 할 수 있는지 확인하십시오.

당신이 그 안에 있는지 확인하십시오 <head> 또는 <body> HTML 페이지의. 또한 .js 파일의 경로를 두 번 확인합니다. 웹 주소의 루트에 "pagecontrol.js"를 붙여서 그렇게 할 수 있습니다.

찾아야 할 사항 :

FireBug (net 탭)를 사용하여 JS 파일에 상태가로드되어 있는지 확인하십시오. 200. 또한 JavaScript 오류에 대해서는 콘솔 탭에서 확인하십시오.
당신은 사용하고 있습니까? HTML5 오프라인. 그렇게한다면 아마도 당신의 포함되지 않는 캐시 버전을 제공 할 수 있습니다. <script> 꼬리표.
페이지 소스를보고 포함하는지 확인하십시오. script 꼬리표.
소스 속성을 절대 경로로 변경하십시오. <script src="http://www.example.com/js/pageControl.js" type="text/javascript"></script>
방문 http://www.example.com/js/pageControl.js 그리고 올바르게 표시되는지 확인하십시오.
배치하십시오 <script> 바로 다음 <head> 먼저로드되도록합니다.

이것이 내가 생각할 수있는 전부입니다.

요소를 작성하여 스크립트를 동적으로로드 한 다음 헤드 또는 다른 요소에 추가 할 수 있습니다.

reportWindow.document.write(pageContent);                      
var script = document.createElement('script');
script.src = 'pageControl.js';
script.type = 'text/javascript';
reportWindow.document.getElementsByTagName('head')[0].appendChild(script);
reportWindow.document.close();

jQuery를 사용해 보셨습니까? $("#target_div").load(...)이것은 또한 출력 내부에서 JS를 실행합니다 ...

사용 방법을 알아 보려면이 문서를 읽으십시오.

http://api.jquery.com/load/

나에게 그것은 당신이 언로드 된 스크립트가 작동하기를 기대하는 것처럼 들립니다.

여기서 살펴보십시오. http://ensure.codeplex.com/sourcecontrol/changeset/view/9070#201379

이것은 액세스를 시도하기 전에 스크립트가 제대로로드되도록하는 약간의 JavaScript입니다. 이것을 게으른로드 (필요할 때만 JavaScript 파일로드)로 사용할 수 있거나 문제를 해석 할 때 AJAX 호출 결과를 기반으로 스크립트를로드 할 수 있습니다.

아마도 일어나고있는 것은 아마도 요소를 삽입하지 않고 Ajax 콜백을 통해 문자열을 반향하고 있다는 것입니다. 외부 스크립트는 내용을로드하기 위해 두 번째 GET 호출이 필요합니다. 이는 발생하지 않습니다. 첫 번째 호출 만 발생했습니다. 따라서 첫 번째 호출에 인라인 코드가 포함되면 DOM은 내용을 가져 오기 위해 추가 GET 요청을 할 필요가 없습니다. DOM이 스크립트를 보지 않으면 DOM이 실행되지 않으므로 임의의 태그 일뿐입니다.

알아낼 수있는 매우 빠른 방법이 있습니다. Chrome (또는 Firebug 플러그인이 설치된 Firefox)에서 콘솔> 스크립트 드롭 다운을 확인하여로드 된 모든 스크립트를 확인하십시오. 나열되지 않은 경우로드되지 않으며 마크 업에 표시되는 스크립트 태그는 그렇지 않으면 비활성입니다.

아마도 PHP가 돌보는 한 문자열 일 수 있으므로 PHP DOM 객체로 만들어 올바르게 삽입 할 수 있습니다 (이것은 힘들 수 있습니다). 대신, 아마도 닫는 바디 태그 직전에 페이지 끝에 놓습니다. (이것은 어쨌든 JS에 선호되는 위치입니다 - 마지막으로 죽은 후, 페이지의 다른 모든 요소가로드되어 DOM이 사용할 수 있습니다.)

HTH :)

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow