Userscript not running on ajax loaded content. (waitForKeyElements not working)

1.2k views Asked by At

I have a script that scans a page for phone numbers and adds a link to place a call via VOIP API. It's pretty simple, and works on nearly every page.

However it doesn't work on one page that I really want it to run on (unfortunately, the page is behind a paywall, so a link is useless).

My script (essentially a copy of Linkify (http://userscripts-mirror.org/scripts/review/6111) but updated to fit my needs):

// ==UserScript==
// @include        *
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @require        https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
const defaultPrefix= '+1';

// BEGIN MODIFY AREA 
const rcUsername = ""; // Account info temp removed
const rcPassword = "";
const rcExtension = "";
const rcRingOut = "";
const rcCallerId = "";
const rcPrompt = "0";
// END MODIFY

//close new window after starting the call
if (location.pathname == "/ringout.asp") {window.close();} 

// leftovers from various attempts to get the data before the code ran.
/*document.getElementById("relationships_tab_nav").focus();
document.getElementById("notes_tab_nav").focus();
document.getElementById("time_tab_nav").focus();;
document.getElementById("communications_tab_nav").focus();
document.getElementById("permissions_tab_nav").focus();
document.getElementById("matter-tabs").addEventListener("mouseover", ringItOut());*/

function ringItOut (jNode) {
    const trackRegex = /(\(?(\d{3})?(?!$)(?:[\-\.\)\s]?(?!$)\s?)(\d{3})(?!$)[\s\-\.\(]?(\d{4})(?!\d)(\s?(?:x|ext|ex)\.?(\d{0,6})?)?)(?!\d)/ig;
 function trackUrl(t) {
      if (String(t).charAt(0)!= '+') t= defaultPrefix + String(t);
      if (rcPrompt == "1") {
        return "https://service.ringcentral.com/ringout.asp?cmd=call&username=" + rcUsername + "&ext=" + rcExtension + "&password=" + rcPassword + "&to=" + (String(t).replace(/[\-\s\/\(\)\.]/g, "")) + "&from=" + rcRingOut + "&clid=" + rcCallerId + "&prompt=1";
      } else {
        return "https://service.ringcentral.com/ringout.asp?cmd=call&username=" + rcUsername + "&ext=" + rcExtension + "&password=" + rcPassword + "&to=" + (String(t).replace(/[\-\s\/\(\)\.]/g, "")) + "&from=" + rcRingOut + "&clid=" + rcCallerId +"";
      }   
    }
  var allowedParents = [
        "abbr", "acronym", "address", "applet", "b", "bdo", "big", "blockquote", "body", 
        "caption", "center", "cite", "code", "dd", "del", "div", "dfn", "dt", "em", 
        "fieldset", "font", "form", "h1", "h2", "h3", "h4", "h5", "h6", "i", "iframe",
        "ins", "kdb", "li", "nobr", "object", "pre", "p", "q", "samp", "small", "span", "strike", 
        "s", "strong", "sub", "sup", "td", "th", "tt", "u", "var"
        ];
  var xpath = "//text()[(parent::" + allowedParents.join(" or parent::") + ")" + "]";
  var candidates = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  for (var cand = null, i = 0; (cand = candidates.snapshotItem(i)); i++) {
    if (trackRegex.test(cand.nodeValue)) {
      var span = document.createElement("span");
      var source = cand.nodeValue;
      cand.parentNode.replaceChild(span, cand);
      trackRegex.lastIndex = 0;
      for (var match = null, lastLastIndex = 0; (match = trackRegex.exec(source)); ) {
        span.appendChild(document.createTextNode(source.substring(lastLastIndex, match.index)));
        var a = document.createElement("a");
        a.setAttribute("href", trackUrl(match[0]));
        var num = document.createTextNode(match[0]);
        var img = document.createElement("img");
        img.setAttribute("src", "http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp7/inline/phone-icon-add-call.png"); //temp hotlink to a random phone icon.
        img.setAttribute("height", "18px");
        img.setAttribute("title", "RingOut to "+match[0]);
        span.appendChild(num);
        span.appendChild(document.createTextNode(" "));
        span.appendChild(a);
        a.setAttribute("target", '_blank');
        a.appendChild(img);
        lastLastIndex = trackRegex.lastIndex;
      }
      span.appendChild(document.createTextNode(source.substring(lastLastIndex)));
      span.normalize();
    }
  }
}
//waitForKeyElements ("matter-tabs", ringItOut);
//waitForKeyElements ("#info_tab", ringItOut);
//waitForKeyElements ("#client_tab", ringItOut);
waitForKeyElements ("#relationships_tab", ringItOut); //of all the tabs, this is the one I REALLY want to load
//waitForKeyElements ("#tasks_tab", ringItOut);
//waitForKeyElements ("#calendar_entries_tab", ringItOut);
//waitForKeyElements ("#notes_tab", ringItOut);
//waitForKeyElements ("#time_tab", ringItOut);
//waitForKeyElements ("#expenses_tab", ringItOut);
//waitForKeyElements ("#communications_tab", ringItOut);
//waitForKeyElements ("#permissions_tab", ringItOut);
this is what is happening on the problem page.

  1. A page has 12 total tabs in a navbar. On the initial load the page loads content for two tabs (#info_tab and #client_tab). My script runs as expected on the data loaded initially in these to tabs/divs. However, it will not run on any of the content from the other navigation tabs. I have tried multiple work-arounds, including using waitForKeyElements as discussed on several posts, and while waitForKeyElements does re-run the script when the identified tabs/divs are loaded (phone icons inserted on regex matched numbers throughout the page), it is still not picking up the data in these new tabs. (so it's running on all info, but does not seem to be running on the new info).

I've posted code of the page below, but heavily redacted since this contains some sensitive information. Separated into Head

    <head>
      <script type="text/javascript">
        var _kmq = _kmq || [];
        var _kmk = _kmk || 'xxxxxxxxxxxxxxxxxxx';
        function _kms(u) {
          setTimeout(function() {
            var d = document,
              f = d.getElementsByTagName('script')[0],
              s = d.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = u;
            f.parentNode.insertBefore(s, f);
          }, 1);
        }
        _kms('//i.kissmetrics.com/i.js');
        _kms('//doug1izaerwt3.cloudfront.net/' + _kmk + '.1.js');
      </script>

      <title>xxxxxx</title>
      <!-- Removed icons -->

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"xxxxxx","applicationID":"xxxxxx","transactionName":"xxxxxx=","queueTime":0,"applicationTime":814,"agentToken":null,"agent":"js-agent.newrelic.com/nr-476.min.js"}</script>
<script type="text/javascript">
  (window.NREUM||(NREUM={})).loader_config={xpid:"xxxxxx"};window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o?o:e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(t){function e(e,n,a){t&&t(e,n,a),a||(a={});for(var c=s(e),f=c.length,u=i(a,o,r),d=0;f>d;d++)c[d].apply(u,n);return u}function a(t,e){f[t]=s(t).concat(e)}function s(t){return f[t]||[]}function c(){return n(e)}var f={};return{on:a,emit:e,create:c,listeners:s,_events:f}}function r(){return{}}var o="nr@context",i=t("gos");e.exports=n()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],3:[function(t){function e(t,e,n,i,s){try{c?c-=1:r("err",[s||new UncaughtException(t,e,n)])}catch(f){try{r("ierr",[f,(new Date).getTime(),!0])}catch(u){}}return"function"==typeof a?a.apply(this,o(arguments)):!1}function UncaughtException(t,e,n){this.message=t||"Uncaught error with no additional information",this.sourceURL=e,this.line=n}function n(t){r("err",[t,(new Date).getTime()])}var r=t("handle"),o=t(5),i=t("ee"),a=window.onerror,s=!1,c=0;t("loader").features.err=!0,window.onerror=e,NREUM.noticeError=n;try{throw new Error}catch(f){"stack"in f&&(t(1),t(4),"addEventListener"in window&&t(2),window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&t(3),s=!0)}i.on("fn-start",function(){s&&(c+=1)}),i.on("fn-err",function(t,e,r){s&&(this.thrown=!0,n(r))}),i.on("fn-end",function(){s&&!this.thrown&&c>0&&(c-=1)}),i.on("internal-error",function(t){r("ierr",[t,(new Date).getTime(),!0])})},{1:8,2:5,3:9,4:7,5:20,ee:"QJf3ax",handle:"D5DuLP",loader:"G9z0Bl"}],4:[function(t){function e(){}if(window.performance&&window.performance.timing&&window.performance.getEntriesByType){var n=t("ee"),r=t("handle"),o=t(2);t("loader").features.stn=!0,t(1),n.on("fn-start",function(t){var e=t[0];e instanceof Event&&(this.bstStart=Date.now())}),n.on("fn-end",function(t,e){var n=t[0];n instanceof Event&&r("bst",[n,e,this.bstStart,Date.now()])}),o.on("fn-start",function(t,e,n){this.bstStart=Date.now(),this.bstType=n}),o.on("fn-end",function(t,e){r("bstTimer",[e,this.bstStart,Date.now(),this.bstType])}),n.on("pushState-start",function(){this.time=Date.now(),this.startPath=location.pathname+location.hash}),n.on("pushState-end",function(){r("bstHist",[location.pathname+location.hash,this.startPath,this.time])}),"addEventListener"in window.performance&&(window.performance.addEventListener("webkitresourcetimingbufferfull",function(){r("bstResource",[window.performance.getEntriesByType("resource")]),window.performance.webkitClearResourceTimings()},!1),window.performance.addEventListener("resourcetimingbufferfull",function(){r("bstResource",[window.performance.getEntriesByType("resource")]),window.performance.clearResourceTimings()},!1)),document.addEventListener("scroll",e,!1),document.addEventListener("keypress",e,!1),document.addEventListener("click",e,!1)}},{1:6,2:8,ee:"QJf3ax",handle:"D5DuLP",loader:"G9z0Bl"}],5:[function(t,e){function n(t){i.inPlace(t,["addEventListener","removeEventListener"],"-",r)}function r(t){return t[1]}var o=(t(1),t("ee").create()),i=t(2)(o),a=t("gos");if(e.exports=o,n(window),"getPrototypeOf"in Object){for(var s=document;s&&!s.hasOwnProperty("addEventListener");)s=Object.getPrototypeOf(s);s&&n(s);
for(var c=XMLHttpRequest.prototype;c&&!c.hasOwnProperty("addEventListener");)c=Object.getPrototypeOf(c);c&&n(c)}else XMLHttpRequest.prototype.hasOwnProperty("addEventListener")&&n(XMLHttpRequest.prototype);o.on("addEventListener-start",function(t){if(t[1]){var e=t[1];"function"==typeof e?this.wrapped=t[1]=a(e,"nr@wrapped",function(){return i(e,"fn-",null,e.name||"anonymous")}):"function"==typeof e.handleEvent&&i.inPlace(e,["handleEvent"],"fn-")}}),o.on("removeEventListener-start",function(t){var e=this.wrapped;e&&(t[1]=e)})},{1:20,2:21,ee:"QJf3ax",gos:"7eSDFh"}],6:[function(t,e){var n=(t(2),t("ee").create()),r=t(1)(n);e.exports=n,r.inPlace(window.history,["pushState"],"-")},{1:21,2:20,ee:"QJf3ax"}],7:[function(t,e){var n=(t(2),t("ee").create()),r=t(1)(n);e.exports=n,r.inPlace(window,["requestAnimationFrame","mozRequestAnimationFrame","webkitRequestAnimationFrame","msRequestAnimationFrame"],"raf-"),n.on("raf-start",function(t){t[0]=r(t[0],"fn-")})},{1:21,2:20,ee:"QJf3ax"}],8:[function(t,e){function n(t,e,n){var r=t[0];"string"==typeof r&&(r=new Function(r)),t[0]=o(r,"fn-",null,n)}var r=(t(2),t("ee").create()),o=t(1)(r);e.exports=r,o.inPlace(window,["setTimeout","setInterval","setImmediate"],"setTimer-"),r.on("setTimer-start",n)},{1:21,2:20,ee:"QJf3ax"}],9:[function(t,e){function n(){c.inPlace(this,d,"fn-")}function r(t,e){c.inPlace(e,["onreadystatechange"],"fn-")}function o(t,e){return e}var i=t("ee").create(),a=t(1),s=t(2),c=s(i),f=s(a),u=window.XMLHttpRequest,d=["onload","onerror","onabort","onloadstart","onloadend","onprogress","ontimeout"];e.exports=i,window.XMLHttpRequest=function(t){var e=new u(t);try{i.emit("new-xhr",[],e),f.inPlace(e,["addEventListener","removeEventListener"],"-",function(t,e){return e}),e.addEventListener("readystatechange",n,!1)}catch(r){try{i.emit("internal-error",[r])}catch(o){}}return e},window.XMLHttpRequest.prototype=u.prototype,c.inPlace(XMLHttpRequest.prototype,["open","send"],"-xhr-",o),i.on("send-xhr-start",r),i.on("open-xhr-start",r)},{1:5,2:21,ee:"QJf3ax"}],10:[function(t){function e(t){if("string"==typeof t&&t.length)return t.length;if("object"!=typeof t)return void 0;if("undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer&&t.byteLength)return t.byteLength;if("undefined"!=typeof Blob&&t instanceof Blob&&t.size)return t.size;if("undefined"!=typeof FormData&&t instanceof FormData)return void 0;try{return JSON.stringify(t).length}catch(e){return void 0}}function n(t){var n=this.params,r=this.metrics;if(!this.ended){this.ended=!0;for(var i=0;c>i;i++)t.removeEventListener(s[i],this.listener,!1);if(!n.aborted){if(r.duration=(new Date).getTime()-this.startTime,4===t.readyState){n.status=t.status;var a=t.responseType,f="arraybuffer"===a||"blob"===a||"json"===a?t.response:t.responseText,u=e(f);if(u&&(r.rxSize=u),this.sameOrigin){var d=t.getResponseHeader("X-NewRelic-App-Data");d&&(n.cat=d.split(", ").pop())}}else n.status=0;r.cbTime=this.cbTime,o("xhr",[n,r,this.startTime])}}}
function r(t,e){var n=i(e),r=t.params;r.host=n.hostname+":"+n.port,r.pathname=n.pathname,t.sameOrigin=n.sameOrigin}if(window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent)){t("loader").features.xhr=!0;var o=t("handle"),i=t(2),a=t("ee"),s=["load","error","abort","timeout"],c=s.length,f=t(1);t(4),t(3),a.on("new-xhr",function(){this.totalCbs=0,this.called=0,this.cbTime=0,this.end=n,this.ended=!1,this.xhrGuids={}}),a.on("open-xhr-start",function(t){this.params={method:t[0]},r(this,t[1]),this.metrics={}}),a.on("open-xhr-end",function(t,e){"loader_config"in NREUM&&"xpid"in NREUM.loader_config&&this.sameOrigin&&e.setRequestHeader("X-NewRelic-ID",NREUM.loader_config.xpid)}),a.on("send-xhr-start",function(t,n){var r=this.metrics,o=t[0],i=this;if(r&&o){var f=e(o);f&&(r.txSize=f)}this.startTime=(new Date).getTime(),this.listener=function(t){try{"abort"===t.type&&(i.params.aborted=!0),("load"!==t.type||i.called===i.totalCbs&&(i.onloadCalled||"function"!=typeof n.onload))&&i.end(n)}catch(e){try{a.emit("internal-error",[e])}catch(r){}}};for(var u=0;c>u;u++)n.addEventListener(s[u],this.listener,!1)}),a.on("xhr-cb-time",function(t,e,n){this.cbTime+=t,e?this.onloadCalled=!0:this.called+=1,this.called!==this.totalCbs||!this.onloadCalled&&"function"==typeof n.onload||this.end(n)}),a.on("xhr-load-added",function(t,e){var n=""+f(t)+!!e;this.xhrGuids&&!this.xhrGuids[n]&&(this.xhrGuids[n]=!0,this.totalCbs+=1)}),a.on("xhr-load-removed",function(t,e){var n=""+f(t)+!!e;this.xhrGuids&&this.xhrGuids[n]&&(delete this.xhrGuids[n],this.totalCbs-=1)}),a.on("addEventListener-end",function(t,e){e instanceof XMLHttpRequest&&"load"===t[0]&&a.emit("xhr-load-added",[t[1],t[2]],e)}),a.on("removeEventListener-end",function(t,e){e instanceof XMLHttpRequest&&"load"===t[0]&&a.emit("xhr-load-removed",[t[1],t[2]],e)}),a.on("fn-start",function(t,e,n){e instanceof XMLHttpRequest&&("onload"===n&&(this.onload=!0),("load"===(t[0]&&t[0].type)||this.onload)&&(this.xhrCbStart=(new Date).getTime()))}),a.on("fn-end",function(t,e){this.xhrCbStart&&a.emit("xhr-cb-time",[(new Date).getTime()-this.xhrCbStart,this.onload,e],e)})}},{1:"XL7HBI",2:11,3:9,4:5,ee:"QJf3ax",handle:"D5DuLP",loader:"G9z0Bl"}],11:[function(t,e){e.exports=function(t){var e=document.createElement("a"),n=window.location,r={};e.href=t,r.port=e.port;var o=e.href.split("://");return!r.port&&o[1]&&(r.port=o[1].split("/")[0].split(":")[1]),r.port&&"0"!==r.port||(r.port="https"===o[0]?"443":"80"),r.hostname=e.hostname||n.hostname,r.pathname=e.pathname,"/"!==r.pathname.charAt(0)&&(r.pathname="/"+r.pathname),r.sameOrigin=!e.hostname||e.hostname===document.domain&&e.port===n.port&&e.protocol===n.protocol,r}},{}],gos:[function(t,e){e.exports=t("7eSDFh")},{}],"7eSDFh":[function(t,e){function n(t,e,n){if(r.call(t,e))return t[e];var o=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:o,writable:!0,enumerable:!1}),o}catch(i){}return t[e]=o,o}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],D5DuLP:[function(t,e){function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):(o[t]||(o[t]=[]),void o[t].push(e))}var r=t("ee").create(),o={};e.exports=n,n.ee=r,r.q=o},{ee:"QJf3ax"}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],XL7HBI:[function(t,e){function n(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:i(t,o,function(){return r++})}var r=1,o="nr@id",i=t("gos");e.exports=n},{gos:"7eSDFh"}],id:[function(t,e){e.exports=t("XL7HBI")},{}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],G9z0Bl:[function(t,e){function n(){var t=p.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&c&&c.body){p.proto="https"===d.split(":")[0]||t.sslForHttp?"https://":"http://",a("mark",["onload",i()]);
var e=c.createElement("script");e.src=p.proto+t.agent,c.body.appendChild(e)}}function r(){"complete"===c.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),s=window,c=s.document,f="addEventListener",u="attachEvent",d=(""+location).split("?")[0],p=e.exports={offset:i(),origin:d,features:{}};c[f]?(c[f]("DOMContentLoaded",o,!1),s[f]("load",n,!1)):(c[u]("onreadystatechange",r),s[u]("onload",n)),a("mark",["firstbyte",i()])},{handle:"D5DuLP"}],20:[function(t,e){function n(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(0>o?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=n},{}],21:[function(t,e){function n(t){return!(t&&"function"==typeof t&&t.apply&&!t[i])}var r=t("ee"),o=t(1),i="nr@wrapper",a=Object.prototype.hasOwnProperty;e.exports=function(t){function e(t,e,r,a){function nrWrapper(){var n,i,s,f;try{i=this,n=o(arguments),s=r&&r(n,i)||{}}catch(d){u([d,"",[n,i,a],s])}c(e+"start",[n,i,a],s);try{return f=t.apply(i,n)}catch(p){throw c(e+"err",[n,i,p],s),p}finally{c(e+"end",[n,i,f],s)}}return n(t)?t:(e||(e=""),nrWrapper[i]=!0,f(t,nrWrapper),nrWrapper)}function s(t,r,o,i){o||(o="");var a,s,c,f="-"===o.charAt(0);for(c=0;c<r.length;c++)s=r[c],a=t[s],n(a)||(t[s]=e(a,f?s+o:o,i,s,t))}function c(e,n,r){try{t.emit(e,n,r)}catch(o){u([o,e,n,r])}}function f(t,e){if(Object.defineProperty&&Object.keys)try{var n=Object.keys(t);return n.forEach(function(n){Object.defineProperty(e,n,{get:function(){return t[n]},set:function(e){return t[n]=e,e}})}),e}catch(r){u([r])}for(var o in t)a.call(t,o)&&(e[o]=t[o]);return e}function u(e){try{t.emit("internal-error",e)}catch(n){}}return t||(t=r),e.inPlace=s,e.flag=i,e}},{1:20,ee:"QJf3ax"}]},{},["G9z0Bl",3,10,4]);</script>

    <script type="text/javascript">
//<![CDATA[
window.ThemisState={};ThemisState.clioEdge=true;
//]]>
</script>
    <script src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/application-cabad08e42760c7cf13dae287f24b32f.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/uuid.js/3.2/uuid.js" type="text/javascript"></script>
    <script src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/app/main-67fd3e62cd830b13c1b8940f7f659deb.js" type="text/javascript"></script>
    <link href="https://d1oqwnf3xk4zzc.cloudfront.net/assets/application-656a09c60454b9c64575a7b8ae56240c.css" media="all" rel="stylesheet" type="text/css" />
    <link href="https://d1oqwnf3xk4zzc.cloudfront.net/assets/application_ext-0a7657917795b698a2bd49ac0fb03070.css" media="all" rel="stylesheet" type="text/css" />
    <link href="https://d1oqwnf3xk4zzc.cloudfront.net/assets/application_next-5ed4f3e7c9209825af5c6baa6f9817cd.css" media="all" rel="stylesheet" type="text/css" />
    <link href="https://d1oqwnf3xk4zzc.cloudfront.net/assets/print-1396324be5be4f19295e141ed2cf8d7d.css" media="print" rel="stylesheet" type="text/css" />
    <link href="https://d1oqwnf3xk4zzc.cloudfront.net/assets/typography-2365e128d234bbf8b922b83398c6461c.css" media="screen" rel="stylesheet" type="text/css" />
      <script type="text/javascript">
//<![CDATA[
      (function() {
        YAHOO.namespace("clio"); YAHOO.clio.currentUser = {id : xxxxxx};     jQuery.namespace('jQuery.clio');}
//]]>
      </script>
      <script src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/calendar_modal-00919da5a656f1177d70f7d83f083d1d.js" type="text/javascript"></script>
    <script type="text/javascript">
//<![CDATA[

        jq(function(){ });

//]]>
</script></head>

and Body

<body class="yui-skin-sam cliov2 flag-clio-next has-modern-browser">

  <!--Main Nav-->
  <nav id="nav">
    <ul>
      <!--this is not the nav I'm having trouble with-->
    </ul>
  </nav>

  <!--Sub Nav-->
  <div id="subnav">
    <div class="showgrid">
      <ul>
        <!--this is not the nav I'm having trouble with-->
      </ul>
    </div>
  </div>

  <!-- Content -->
  <div class="sidebar-content-container">
    <div id="content" ng-class="{'has-sidebar':sidebarOpen, 'sidebar-animate':sidebarAnimate}">
      
      <!--This is where my trouble is-->
      <div id="tab_container" class="tab_container">
        <div id="matter-tabs">
          <ul class="yui-nav clearfix">
            <li class="selected">
              <a id="info_tab_nav" href="#details_tab">Info</a>
            </li>
            <li>
              <a id="client_tab_nav" href="#client_tab">Client</a>
            </li>
            <li><a id="transactions_tab_nav" href="#transactions_tab" data-datasrc='/matters/xxxxx/transactions'>Transactions</a>
            </li>
            <li><a id="relationships_tab_nav" href="#relationships_tab" data-datasrc='/relationships?matter_id=xxxxx'>Contacts</a>
            </li>
            <li><a id="tasks_tab_nav" href="#tasks_tab" data-datasrc='/tasks/dt.html?matter_id=xxxxx'>Tasks</a>
            </li>
            <li><a id="calendar_entries_tab_nav" href="#calendar_entries_tab" data-datasrc='/calendar_entries/dt?matter_id=xxxxx'>Calendar</a>
            </li>
            <li><a id="notes_tab_nav" href="#notes_tab" data-datasrc='/matters/xxxxx/notes'>Notes</a>
            </li>
            <li><a id="time_tab_nav" href="#time_tab" data-datasrc='/time_entries/dt?matter_id=xxxxx'>Time</a>
            </li>
            <li><a id="expenses_tab_nav" href="#expenses_tab" data-datasrc='/expense_entries/dt?matter_id=xxxxx'>Expenses</a>
            </li>
            <li><a id="documents_tab_nav" href="#documents_tab" data-datasrc='/documents/dt.html?matter_id=xxxxx'>Documents</a>
            </li>
            <li><a id="communications_tab_nav" href="#communications_tab" data-datasrc='/communications?matter_id=xxxxx'>Communications</a>
            </li>
            <li><a id="permissions_tab_nav" href="#permissions_tab" data-datasrc='/client_connect_permissions/dt?matter_id=xxxxx'>Clio Connect</a>
            </li>
          </ul>
          
          <div class="yui-content">
            <div id="info_tab">
              <div id="file">
                <table class="simple-table" cellpadding="0" cellspacing="0" width="100%">
                <!-- HTML here (removed)is displayed on page load -->
                </table>
              </div>
              
            <div id="client_tab">
              <table class="simple-table" cellpadding="0" cellspacing="0" width="100%">
                <!-- HTML here (removed)is loaded (but not visible) on page load -->
              </table>
            </div>
              
            <div id="transactions_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="relationships_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="tasks_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="calendar_entries_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="notes_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="time_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="expenses_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="documents_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="communications_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
            <div id="permissions_tab">Loading, please wait...
              <img alt="Spinner" src="https://d1oqwnf3xk4zzc.cloudfront.net/assets/spinner-1b601670c8528f46c719b4a49ed6dcea.gif" />
            </div>
              
          </div><!--yui-nav clearfix-->
        </div><!--matter-tabs-->
      </div><!--tab_container-->
      <script>
        jQuery(function() {
          jQuery.clio.matters.initializeTabLoader();
        });
      </script>
      <script type="text/javascript">
        //<![CDATA[

        setInterval(function() {
          var Polling = YAHOO.namespace("clio.polling");
          Polling.isDevelopment = false;
          Polling.poll();
        }, 300000);
         //]]>
      </script>
    </div><!--content-->
    <div id="sidebar" ng-class="{open:sidebarOpen, 'sidebar-animate':sidebarAnimate}">
    </div>
  </div><!--SidebarContentContainer-->
</body>
</html>

  1. Based on the console, it seems that content from each of the remaining 10 tabs are loaded via two separate http Get requests whenever the user mousesOver the particular nav tab. The first request seems to be to a page that is essentially a wrapper for the newly loaded data.

for example, my console shows:

XHR finished loading: GET "https //website.com/relationships?id=xxxxxxxxxx"

(I'll post the code for this wrapper page in a comment, since I'm pushing the max characters per post limit).

That "wrapper page" then pulls json data (apparently using dtRender1, for what it's worth).

XHR finished loading: GET "https //website.com/relationships.json?id=xxxxxxxxxx&sEcho=1&iCol…=asc&dt_search%5Bquery%5D=&dt_table_id=relationships_table&_=14174695xxxxx".

  1. Like I said, I tried the waitForKeyElements, I've tried adding event listeners, I have tried running the script on a setTimeout, I have tried looping it, I have tried adding a button to manually run the script after the data is loaded, I even tried adding focus to the links to try and load the data before my script ran... No matter what I cannot get the script to run on this after-loaded data.

I am at a loss on if I can get this to work, and I've nearly given up on this. Is it possible to get the script to run data loaded this way? Thanks for any ideas.

0

There are 0 answers