Think of this as part of a larger submissions page - as part of the Publication Information page, in EPrints...
Jump straight in: start typing the name of a journal... the first 4 or 5 letters... pause... & see what happens...
How to ensure the depositor supplies valid publisher details?
One of the problems often encountered with people submitting textural data
(via any means) is the issue of typos and incomplete strings.
If we assumes that the name of a journal can be used as a reference for
looking the publishers details, we need to be sure that the name given is,
in fact, correct, and one that we know about.
The standard solution is to accept the input, then validate it. If the data matches records in our database, we continue, else we return to the user and ask for confirmation (or correction - repeat until confirmed, or correct)
What would be really handy would be the ability to look up the list of journal names (RoMEO being our reference), and allowing the depositor to select from this [known to be correct] list. HOWEVER the list of journals is big - over 500 records, so a single drop-down list is unworkable, and multiple lists is not practical in terms of the human/computer interface.
Step forward the AJAX Auto-completer (sometimes known as the google suggestion
box. This asynchronusly (ie, as the depositor types) looks up the database
and supplies a list of matches, and allows the user to select one. Being a selection
from the reference data-set, it will automatically pass our validity-check.
AJAX also fails gracefully: if the user-interface does not support JavaScript (which
is what AJAX is built on) then the depositor simply fills in the boxes with the text
and we process the input as normal.
<script src="/js/prototype.js" type="text/javascript" ></script> <script src="/js/scriptaculous.js" type="text/javascript" ></script> <script src="/js/prospero.js" type="text/javascript" ></script>Is used to load up the various chunks of javascript.
/js/scriptaculous.js is the magic stuff that people have written to do loads of really clever stuff/js/prototype.js is the foundation that scriptaculous is written on/js/prospero.js is some javascript code (based on work done by the EPrints team) that is specific for this page
<fieldset id="publisher_form">
<legend>Romeo lookup demo, using AJAX/Web 2.0 to lookup romeo.ac.uk</legend>
<div class="label"><label for="pub">Publication Title</label></div>
<div class="input"><input type="text" maxlength="255" id="pub" name="pub_title" size="45" value = ""/></div>
<br style="clear:both" />
<div class="auto_complete" id="title_drop"></div>
<div class="label"><label for="jrn_publisher">Publisher</label></div>
<div class="input">
<input type="text" maxlength="255" id="jrn_publisher" name="publisher" size="45" value = ""/>
<input type="hidden" id="jrn_romeo" name="romeo" value="" />
</div>
<br style="clear:both" />
<div class="label"><label for="jrn_issn">ISSN</label></div>
<div class="input"><input type="text" maxlength="255" id="jrn_issn" name="issn" size="10" value=""/></div>
<br style="clear:both" />
<div id="publisher_policy" ></div>
<script type="text/javascript" language="javascript">
new Ajax.Autocompleter('pub', 'title_drop', '/cgi-bin/get_journals', {afterUpdateElement: updated});
</script>
</fieldset>
Ajax.Autocompleter reads the element with an id of pub. This processes the input by passing the current value (in the CGI parameter name="pub_title", as defined in the <input ..../> element) to the CGI program /cgi-bin/get_journals.title_drop.<li> that the auto-completer returns is actually fairly big:<li class='journal'> <div class='informal'><span class='ajax_title'>Nature -london-</span> <br /><span class='ajax_publisher'>Nature Publishing Group</span> </div> <div id='title' class='title'>nature -london-</div> <div id='publisher' class='publisher'>Nature Publishing Group</div> <div id='romeo' class='publisher'>Nature Publishing Group</div> <div id='issn' class='issn'>0028-0836</div> </li>The html in the
<div class='informal'> element is displayed in the auto-completer list, and the remaining <div>s are all hidden by using css and display: none.afterUpdateElement: updated defines a javascript function that, in this caseid="jrn_publisher", id="jrn_romeo" and id="jrn_issn" elements from the <li> selected.<input id="jrn_romeo" ..... /> and inserting the results in <div id="publisher_policy" ></div>Well, the basic thing is that this idea can be applied to any input which could be automatically completed from data in a database (such as authors details or publishers details [as in this example])