Drupal 모듈 페이지의 Visualsearch.js

Question

Drupal 모듈 페이지에서 visualsearch.js 컨트롤을 실행하는 데 문제가 있습니다. 나는 demo.html 스크립트 블록에서와 똑같은 javascript를 사용하고 있습니다 (다운로드 압축 패키지에서 찾거나 사이트의 데모 소스 코드를 볼 수 있습니다). 이것은 복사하여 별도의 javascript 파일에 붙여 넣었습니다. demo.html에 정의 된 순서에 따라 내 Drupal 모듈에있는 모든 CSS 및 JavaScript 종속성도로드했습니다.

드루팔 코드

<?php 

    function mymodule_menu() { 
     $items = array(); 

     $items['mymodule'] = array(
      'title' => 'MyModule', 
      'page callback' => 'mymodule_main', 
      'access callback' => TRUE, 
      'type' => MENU_NORMAL_ITEM 
     ); 

     return $items; 
    } 

    function mymodule_main() { 

     drupal_add_css(absolute paths of all css dependencies); 
     drupal_add_js(absolute paths of all javascript dependencies (in order), followed by the standalone javascript file that contains the code extracted from the demo.html script block); 

     return " 
      <div id=\"VS\" class=\"container\"> 
       <div id=\"searchbox\"></div> 
       <div id=\"feedback\"></div> 
      </div>"; 
    } 

나는 순수 HTML/자바 스크립트 환경에서이 동일한 설정을 실행하고 모든 것이 잘 작동했다. 즉, 위의 그림과 같이 종속성을로드하고 html을 포함하는 html 페이지를 만들었습니다. 그런 다음 demo.html 스크립트 블록에서 추출한 코드가 포함 된 별도의 스크립트가 있습니다.

Answer 1

이 문제에 대한 해결책을 찾았습니다.

visualsearch의 데모 구현에서 컨테이너는 visualsearch div의 id 특성을 참조합니다. Drupal에서 visualsearch가 작동하려면 컨테이너가 클래스 속성을 대신 참조해야합니다.

드루팔 모듈

... 
return "<div id=\"searchbox\" class=\"searchbox\"></div>"; 

자바 스크립트

window.VisualSearch = VS.init({ 
    container : $('.searchbox'), 
    ....