2011-05-01 3 views
2

이베이 카테고리의 카테고리 트리 선택을하고 있습니다. 내가 첫 번째 범주 (위) 선택에 따라 다른 선택 상자를 반환하는 내 PHP 응용 프로그램에 데이터를 게시하려면 다음 JQuery와 기능을 사용하고 내가 선택 상자를
...반환 된 데이터가 소스 코드에 표시되지 않습니다. 어떻게 Ajax로드 된 데이터를 선택합니까?

<div id="div_firstCat"> 
    <select id="slct_firstCat" name="slct_firstCat" size="33"> 
     <option value="353">Antiques</option> 
     <option value="550">Art</option> ... and so on.. 
    </select> 
</div> 

<div id="div_secondCat"></div> 

.

// First Level Categories 
    $("#slct_firstCat").change(function(){ // On change of slct_firstCat 
    var actionRequested = "AJAX_getCats"; // My personal PHP Identifer 
    var url = "index.php";     // Post to index.php 
    var catId = $("#slct_firstCat").val(); // Get the CatID from the select box. 

    // Post this data to PHP and return the data into #div_secondCat 
    $.post(url, {AJAX_Action: actionRequested, categoryId: catId, categoryLevel: 1}, 
     function(data){ 
      $("#div_secondCat").html(data); 
      }); 
    // End of Function getCats 
    }); 

PHP 파일은이 선택 상자와 동일하지만 다른 이름을 반환합니다.

<select id="slct_secondCat" name="slct_secondCat" size="33"> 
     <option value="353">Sub-Cat of Antiques</option> 
     <option value="550">Sub-Cat of Antiques</option> and so on.. 
</select> 

가 지금은 "slct_secondCat"(AJAX를 통해로드 된 선택)에서 JQuery와 통해 옵션 값을 얻을하려고 할 때,이 옵션 값을 얻을 나던, 그래서 나는 고양이 나무 아래로 더 이동 캔트.

두 번째 범주 게시물에 대한 JQuery 함수입니다.

// Second Level Categories 
    $("#slct_secondCat").change(function(){ 
    var actionRequested = "AJAX_getCats"; 
    var url = "index.php"; 
    var catId = $("#slct_secondCat").val(); 

    $.post(url, {AJAX_Action: actionRequested, categoryId: catId, categoryLevel: 2}, 
     function(data){ 
      $("#div_thirdCat").html(data); 
      }); 
    // End of Function getCats 
    }); 

AJAX와이 사업부는 데이터가 그것으로로드하더라도, 데이터, 소스 코드 내부의 div_secondCat 나던 디스플레이 아무것도로드 후 나는 페이지의 소스 코드를 보면

는, JQuery와는 데이터를 반환 div에 게시하고 페이지의 소스 코드를 업데이트하지 않았습니다.

기본적으로 나는 PHP 파일에서 eBay 웹 서비스를 통해 카테고리를 얻고 싶습니다. 원하는 최종 카테고리로 이동하고 JQuery를 통해 선택할 수 있습니다.

답변

1

// Second Level Categories 
$("#slct_secondCat").live("change", function(){ 

또한보십시오 : 클릭하면 "페이지 소스보기"를하면 원래의 HTML 문서를 만 표시됩니다. Firebug 또는 Webkit Inspector를 확인하여 DOM에서 실제로 진행중인 작업을 확인해야합니다. 그것은 당신에게 실제 소스를 표시합니다 때문에

+0

안녕하세요, 내 스크립트에서 또 다른 오류가 발생했습니다! .live 잘 작동, 감사합니다 !!! – Anil

+0

굉장합니다. 다행스럽고 기쁘다. 건배. –

1

는 "소스보기"또는 이와 유사한 대해 얘기하면 AJAX 데이터

를로드 한 후 나는 페이지의 소스 코드를 보면, 그건 페이지가 아니라 DOM 이 현재처럼 보입니다. 이를 위해서는 적절한 디버거가 필요합니다. 다행히 they're thick on the ground 및 무료입니다.

change 이벤트가 표시되지 않는 이유 : 언제 코드를 실행하여 연결합니까? 이 라인 때문에 : 요소 이미이있는 경우

$("#slct_secondCat").change(... 

는 ... 단지 핸들러를 연결합니다. 그렇지 않으면 핸들러가 연결되지 않습니다. 요소를 생성하는 이전의 Ajax 호출이 완료된 후이 함수를 호출하여 연결하거나 live (또는 더 나은 것은 delegate)을 사용할 수 있습니다. 우리는 그 다음에 delegate를 호출, 초기 선택에 div_secondCat를 사용하는 마지막 하나

$("#slct_secondCat").live('change', ... 

또는

$("#div_secondCat").delegate("#slct_secondCat", 'change', ... 

(참고.)

관련 문제