Working with KRL & Ajax

Question

I'll be very specific here. If you go to UtahRealEstate.com and do a search and look at the results in the map view, there are plots all over the map and listings off to the right. If you click a pin on the map you get a pop-up, then click the MLS # and you get another popup with the property description. You can also click the MLS number on a listing on the right and open a property description popup.

I want to add a button in the html of that popup. I can insert the html fine, but the challenge is, how do I determine when that property description has loaded so I can then read the html inside it and add my button?

Screenshots:

Answer 1

Short answer (I'll edit later):

Use the action Watch to watch a selector.

Then, use the select when click.

Answer 2

I used the trick where you don't look for elements until you have to based on user clicks. The real tricky part was that the MLS number link that shows up in the card on the map was halting the propagation of the click event to the window so I couldn't use the live click binding.

I'm really sick so I can't stay up much longer but the code is fairly well commented so you should be able to read your way through my madness. ; )

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);
          };
        };
      |>;
    }
  }
}

Screenshot of firebug console as I test the app