KRL & Ajax와 협력하기

Question

여기서는 매우 구체적입니다. UtahRealEstate.com으로 이동하여지도보기에서 검색하고 결과를 보면지도 전체에 플롯이 있고 오른쪽에 목록이 있습니다. 지도에서 핀을 클릭하면 팝업이 나타나고 MLS #를 클릭하면 속성 설명이있는 다른 팝업이 표시됩니다. 오른쪽 목록에서 MLS 번호를 클릭하고 속성 설명 팝업을 열 수도 있습니다.

해당 팝업의 html에 버튼을 추가하고 싶습니다. html을 잘 삽입 할 수는 있지만 도전 과제는 속성 설명이로드 된 시점을 어떻게 결정하여 내부 HTML을 읽고 버튼을 추가 할 수 있습니까?

스크린 샷 :

Answer 1

사용자 클릭을 기반으로 할 때까지 요소를 찾지 않는 트릭을 사용했습니다. 진짜 까다로운 부분은지도의 카드에 나타나는 MLS 번호 링크가 라이브 클릭 바인딩을 사용할 수 없도록 클릭 이벤트가 창에 전파되는 것을 중단하는 것이 었습니다.

나는 너무 오래 머물 수 없으므로 코드가 상당히 잘 읽혀 지므로 내 광기를 통해 길을 읽을 수 있어야합니다. ; 불을 지르고 콘솔)

는

ruleset a60x561 { 
    meta { 
    name "utahrealestate" 
    description << 
     utahrealestate 
    >> 
    author "Mike Grace" 
    logging off 
    } 

    dispatch { 
    domain "utahrealestate.com" 
    } 

    rule search_for_realestate { 
    select when web pageview "\/search\/" 
    pre { 

    } 
    { 
     notify("title","content") with sticky = true; 
     emit <| 
     // sidebar click watching easy 
     // click event isn't being blocked so we can use .live and not 
     // worry about HTML being present at time of event listener binding 
     $K(".full_line a").live("click", function() { 
      console.log("sidebar mls clicked"); 
      // get the report!!! 
      KOBJ.a60x561.getReport(); 
     }); 

     // pin on map mls number is a bit harder because click event is 
     // being blocked from propegating to the window 
     // to get around this we can 
     // 1) watch for click on pin 
     // 2) wait for mls element to load 
     // 3) attatch our own element level event listener 
     $K("#mapdiv_OpenLayers_Container image").click(function() { 
      console.log("pin on map clicked"); 
      // attatch click event listener on mls element once it loads 
      setTimeout(function() { 
      KOBJ.a60x561.grabMls(); 
      }, 500); 
     }); 

     // ATATCH LISTENER TO MLS NUM ON MAP 
     KOBJ.a60x561.grabMls = function() { 
      console.log("looking for mls in hovercard"); 

      // grab jQuery reference to element we are looking for 
      var $cardMls = $K("#property-overview a:first"); 

      // only go on if it's on the page and visible 
      if (($cardMls.length > 0) && ($cardMls.is(":visible"))) { 

      console.log("foud mls on hevercard"); 

      // watch for click on mls num on card 
      $cardMls.click(function() { 
       console.log("mls clicked on hovercard above map pin"); 
       // get the report!!! 
       KOBJ.a60x561.getReport(); 
      }); 
      } else { 
      setTimeout(function() { 
       KOBJ.a60x561.grabMls(); 
      }, 500); 
      }; 
     }; 

     // GRAB REALESTATE LISTING DETAILS ONCE IT LOADS IN THICK BOX 
     KOBJ.a60x561.getReport = function() { 
      if ($K("#public-report-wrap").length > 0) { 
      console.log("Listing details found!"); 
      } else { 
      setTimeout(function() { 
       KOBJ.a60x561.getReport(); 
      }, 500); 
      }; 
     }; 
     |>; 
    } 
    } 
} 

스크린 샷 내가 뭔가를 언뜻보다 약간 복잡합니다 응용 프로그램

Answer 2

짧은 대답 (나중에 편집 할 수 있습니다) :

를 사용하여 작업 Watch은 선택을 볼 수 있습니다.

그런 다음 click을 선택할 때 선택을 사용하십시오.