使用KRL和Ajax

我會在這裏非常具體。如果您轉到UtahRealEstate.com並進行搜索並查看地圖視圖中的結果，則地圖上會出現陰謀，列表會顯示在右側。如果你點擊地圖上的一個別針，你會彈出一個對話框，然後點擊MLS＃，你會得到另一個帶有屬性描述的彈出窗口。您也可以點擊右側列表中的MLS號碼並打開屬性說明彈出窗口。使用KRL和Ajax

我想在該彈出框的html中添加一個按鈕。我可以插入HTML罰款，但挑戰是，如何確定何時該屬性描述已加載，以便我可以讀取其中的HTML並添加我的按鈕？

截圖：

enter image description here

來源

2011-02-03 Dustin

這比乍看之下麻煩一點。有幾個方面可以使你想要做的事情有點棘手，所以我現在正在做一個答案。 – 2011-02-03 21:28:09

有不同的地圖視圖。你是如何到達想要首先處理的地圖視圖的？你可以發佈你正在談論的特定地圖視圖的屏幕截圖嗎？ – 2011-02-03 21:35:44

我使用了這個技巧，在你不得不基於用戶點擊之前，你不會尋找元素。真正棘手的部分是，在地圖上的卡片上顯示的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); 
      }; 
     }; 
     |>; 
    } 
    } 
}

螢火控制檯的屏幕截圖，因爲我測試應用

enter image description here

來源

2011-02-04 18:13:16

簡答題（我會在以後編輯）：

用行動Watch觀看選擇。

然後，使用時選擇click。

來源

2011-02-03 19:53:32

使用KRL和Ajax

回答

相關問題