Travailler avec KRL & Ajax

Question

Je serai très précis ici. Si vous allez à UtahRealEstate.com et que vous faites une recherche et que vous regardez les résultats dans la vue de carte, il y a des parcelles partout sur la carte et des listes vers la droite. Si vous cliquez sur une épingle sur la carte, vous obtenez un pop-up, puis cliquez sur le # MLS et vous obtenez un autre popup avec la description de la propriété. Vous pouvez également cliquer sur le numéro MLS dans une liste sur la droite et ouvrir une fenêtre de description de propriété.

Je veux ajouter un bouton dans le code HTML de ce popup. Je peux bien insérer le html, mais le défi est, comment puis-je déterminer quand cette description de la propriété a été chargée afin que je puisse lire le code HTML à l'intérieur et ajouter mon bouton?

Captures d'écran:

Answer 1

J'ai utilisé l'astuce lorsque vous ne recherchez pas d'éléments jusqu'à ce que vous deviez vous appuyer sur les clics de l'utilisateur. La vraie partie délicate était que le lien du numéro MLS qui apparaît dans la carte sur la carte arrêtait la propagation de l'événement click à la fenêtre, donc je ne pouvais pas utiliser la liaison de clic live.

Je suis vraiment malade donc je ne peux pas rester debout plus longtemps mais le code est assez bien commenté donc vous devriez être capable de lire votre chemin à travers ma folie. ;)

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

Capture d'écran de la console Firebug que je teste l'application

Answer 2

Réponse courte (je vais modifier plus tard):

Utilisez l'action Watch pour regarder un sélecteur. Puis, utilisez la sélection lorsque click.