Работа с KRL & Ajax - PullRequest
       3

Работа с KRL & Ajax

2 голосов
/ 03 февраля 2011

Я буду очень конкретным здесь.Если вы зайдете на UtahRealEstate.com и выполните поиск и посмотрите на результаты в виде карты, на карте появятся графики и списки справа.Если вы щелкнете булавку на карте, вы получите всплывающее окно, затем щелкните MLS #, и вы получите еще одно всплывающее окно с описанием свойства.Вы также можете щелкнуть номер MLS в списке справа и открыть всплывающее окно с описанием свойства.

Я хочу добавить кнопку в HTML этого всплывающего окна.Я могу вставить HTML хорошо, но проблема в том, как определить, когда загружено описание этого свойства, чтобы я мог прочитать HTML внутри него и добавить свою кнопку?

Снимки экрана:

enter image description here

enter image description here

enter image description here

Ответы [ 2 ]

1 голос
/ 04 февраля 2011

Я использовал трюк, когда вы не ищите элементы, пока не будете вынуждены основываться на кликах пользователей. Сложность заключалась в том, что ссылка на номер 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);
          };
        };
      |>;
    }
  }
}

Снимок экрана консоли Firebug при тестировании приложения

enter image description here

1 голос
/ 03 февраля 2011

Краткий ответ (я отредактирую позже):

Используйте действие Наблюдать , чтобы посмотреть селектор.

Затем используйте выбор, когда щелкните.

...