purlhub

Support Center

DOM Rendering Tactics (advanced integration)

Last Updated: Feb 20, 2014 09:52AM MST

purlHub's JSAPI embeds variable data into HTML Documents by directly manipulating select HTML Elements, in an event driven fashion.  Upon Profile Load, the default action is to fire purlHub's auto-render sequence: (1) profile, (2) records, (3) attributes.  The render process acts distinctly on each designated HTML Element by type.  The following list explains purlHub's render treatment of DOM Nodes attached with a purlHub Class Flag, by Element type. 

  • Standard Tags (SPAN, DIV, P, H1, H2, H3, H4...) (default policy)
    Replace the primary Text Node of the Element with the property's value.    
     
  • INPUT Tags type=[ button | file | image | submit ]
    Ignored.
     
  • INPUT Tags type=[ text | password | hidden | ... ] (all textual input types)
    Replace the Element's VALUE attribute with the property's value.
     
  • INPUT Tags type=[ radio | checkbox ]
    Sets the Element's CHECKED attribute when the Element's VALUE attribute exists in the property's value string.
     
  • SELECT Tags
    Sets the Element's OPTIONS child-node SELECTED attribute to TRUE where the property's value matches the OPTIONS value.
     
  • TEXTAREA Tags
    Replace the Element's VALUE attribute with the property's value.
     
  • IMG Tags
    Replace the Element's SRC attribute with the property's value.
     
  • A Tags
    Replace the Element's HREF attribute with the property's value.
     

Since the auto-render event only occurs after a successful profile load, the default appearance is naturally the HTML document left intact.  When developing a page in HTML, viewing the page while bypassing the purlHub JSAPI initialization (and/or visiting anonymously), displays the Document as an Anonymous visitor would see it.  This naturally leads the design and development  process with the "build from the anonymous perspective first" recommended approach.  Switching between anonymous and personailzed views is an important development step, and to-this-end purlHub offers the convenient URL toggle "?_phResetService=true".  This flag clears the purlHub cookies and resets the purlHub session; the only way to view as an  anonymous visitor after having viewed via personalized URL.       

Examples:

 Render first name text:
<span class="phProfileData-firstName">Visitor</span> 
Pre-populate first name input field:
<input type="text" class="phProfileData-firstName" value="First Name" />
Render a rep image (avatar): (value is assumed to be a URI for the media)
<img src="/photos/default.png" class="phProfileData-repPhoto" /> 
Vary a link with link text:
<a class="phProfileData-offerLink" href="http://example.com/default.html">
   <span class="phProfileData-offerLinkText">Default Offer</span>
</a>

Vary a link dynamically using a URL Template by name (URL Formatting)
<a class="phProfileData-links-template1" href="http://example.com/extra.html">
   <span>Special Link</span>
</a>
Pre-select combo box option:
<select class=phProfileData-state">
   <option value="New York">New York</option>
   <option value="New Jersey">New Jersey</option>
   <option value="Ohio">Ohio</option>
   <option value="Pennsylvania">Pennsylvania</option>
   <option value="Maryland">Maryland</option>
  ...
</select>
Pre-check radios or checkboxes:
<label>
  <input type="radio" name="gender" class=phProfileData-gender" value="male" />
  Male
</label>
<label>
  <input type="radio" name="gender" class=phProfileData-gender" value="female" />
  Female
</label>

Contact Us

  • Post a Public Question
  • Ask the Community
  • Email Us

Recent Discussions

Ajax-loader-small