200
edits
Changes
no edit summary
[[Category:Umlaut]]
=WARNING: This is Outdated Documentation!!!!=
'''THIS IS OUTDATED DOCUMENTATION''' See new Umlaut documentation at http://github.com/team-umlaut/umlaut/wiki
---------
If you want to include [[Umlaut]]-generated HTML directly on a third party page via javascript, there is a Javascript helper object to make that very easy. This helper uses the [[Umlaut partial html API]], but does everything for you. The helper will update your page at DOM locations you specify, and keep polling Umlaut for new results, continuing to re-update your page until Umlaut is finished.
=== Load JQuery ===
You can load JQuery from your installed Umlaut if you want. This is not neccesary if your app already includes JQuery. It's probably best to load it in "no conflict" mode:
<code>
</code>
=== Optionally, load Umlaut Javascript UI Behaviors ===
HTML loaded in by the HtmlUpdater may include javascript behaviors when displayed in Umlaut, such as expand/contract toggles. You can choose to load JS files providing those behaviors into your local app. If you don't, certain links will degrade to linking out to Umlaut, but everything should still work fine.
<script type="text/javascript" src="http://app01.mse.jhu.edu:3000/js_helper/loader"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var loader = new Umlaut.Loader();
loader.load();
=== Instantiate an HtmlUpdater ===
You need to instantiate an Umlaut.HtmlUpdater, and tell it your Umlaut base url, and a context object key-encoded-value query parameter string. If you already have an OpenURL link on the page, it may be convenient to pull the context object out of that, see [[#Complete Example|example ]] below.
<code>
<code>
updater.add_section_target({ umlaut_section_id: "fulltext", selector:"#my_full_text_div" });
</code>
<code>
updater.add_section_target({ umlaut_section_id: "highlighted_links", selector: ".sidebar", position: "append" });
</code>
=== Call the updater ===
<script type="text/javascript">
jQuery(document).ready(function($) {
var loader = new Umlaut.Loader();
loader.load();
/* pull openurl link out of the DOM, take umlaut base and context object
out of it */
var openurl_link = $("a.openurl_link").attr("href");
var ctx_object_kev = openurl_link.substring( openurl_link.indexOf("?") + 1);
var umlaut_base = openurl_link.substring(0, openurl_link.indexOf("/resolve")); var updater = new Umlaut.HtmlUpdater($UMLAUT_BASE umlaut_base , ctx_object_kev );
updater.add_section_target({ umlaut_section_id: "fulltext", selector:".my_full_text" , // only show ourself if we have umlaut hits, false return from // before_update stops update. before_update: function(html, count) { return (count != 0); } });
updater.add_section_target({ umlaut_section_id: "search_inside", selector:".stuff", position: "append" });
updater.add_section_target({ umlaut_section_id: "excerpts", selector:".stuff", position: "append" });
updater.add_section_target({
position: "append",
before_update: function(container_element) {
//insert some content into the umlaut-delivered html
//before it is placed on the page
container_element.find("h3").after("<h4>We love these holdings.</h4>");
}
});
updater.add_section_target({ umlaut_section_id: "related_items", selector:".stuff", position: "append" });
updater.add_section_target({
selector:".only_if_content",
after_update: function(updated_content, count) {
//show the ancestor DOM element with certain class, only
//if there are umlaut hits
if ( count != 0 ) {
updated_content.closest(".only_if_content").show();
<body>
<a class="openurl_link" href="http://app01.mse.jhu.edu:3000$UMLAUT_BASE/resolve?sid=google&auinit=N&aulast=Chomsky&title=Aspects+of+the+Theory+of+Syntax&genre=book&isbn=0262530074&date=1965">Find It @ JH</a>
<h2>Full Text</h2>
