Author: lgiessmann Date: Thu Jun 18 13:30:48 2009 New Revision: 49
Log: ajax-client: during AJAX-requests the client hides all current sub-content and shows a GIF representing a loader with a message what the client is currently doing
Modified: trunk/docs/JSON_model.pdf trunk/src/ajax/css/main.css trunk/src/ajax/isidorus.html trunk/src/ajax/javascripts/constants.js trunk/src/ajax/javascripts/requests.js
Modified: trunk/docs/JSON_model.pdf ============================================================================== Binary files. No diff available.
Modified: trunk/src/ajax/css/main.css ============================================================================== --- trunk/src/ajax/css/main.css (original) +++ trunk/src/ajax/css/main.css Thu Jun 18 13:30:48 2009 @@ -55,4 +55,10 @@ div.loadFrame { padding: 2em; color: #ff7f00; + text-align: center; +} + +img.ajaxLoader { + display: none; + margin-left: 412px; /* the image has a width of 100px */ } \ No newline at end of file
Modified: trunk/src/ajax/isidorus.html ============================================================================== --- trunk/src/ajax/isidorus.html (original) +++ trunk/src/ajax/isidorus.html Thu Jun 18 13:30:48 2009 @@ -57,6 +57,7 @@
<body> <div id="page"> + <img class="ajaxLoader" src="javascripts/ajaxLoader_big.gif" width="100" height="100" border="0" alt="ajax loader"> <div id="navi"> <span id="home" class="isActive">Home</span> <span id="searchTopic" class="clickableButton">Search Topics</span>
Modified: trunk/src/ajax/javascripts/constants.js ============================================================================== --- trunk/src/ajax/javascripts/constants.js (original) +++ trunk/src/ajax/javascripts/constants.js Thu Jun 18 13:30:48 2009 @@ -81,6 +81,7 @@ "__inputCommitButton__" : "commitButton", "__divTmIdFrame__" : "tmIdFrame", "__divLoad__" : "loadFrame", + "__imgAjaxLoader__" : "ajaxLoader",
"page" : function(){ return this.__divPage__; }, "subPage" : function(){ return this.__divSubPage__; }, @@ -122,5 +123,6 @@ "fog" : function(){ return this.__divFog__; }, "commitButton" : function(){ return this.__inputCommitButton__; }, "tmIdFrame" : function(){ return this.__divTmIdFrame__; }, - "load" : function(){ return this.__divLoad__; } + "load" : function(){ return this.__divLoad__; }, + "ajaxLoader" : function(){ return this.__imgAjaxLoader__; } }; \ No newline at end of file
Modified: trunk/src/ajax/javascripts/requests.js ============================================================================== --- trunk/src/ajax/javascripts/requests.js (original) +++ trunk/src/ajax/javascripts/requests.js Thu Jun 18 13:30:48 2009 @@ -11,7 +11,6 @@
- // --- Sets a timeout function which alerts a message. function setAjaxTimeout(time, url) { @@ -24,16 +23,13 @@ // --- Returns a function whihc can be used as an XHR-Handler. // --- The returned function is the passed handler wrapped in // --- a lambda-function which additionally clears the passed timeout -// --- function. +// --- function and call onLoad. function createXHRHandler(handler, timeFun) { function fun(xhr){ try{ clearTimeout(timeFun); - var loading = $$("div." + CLASSES.load()); - if(loading.length === 1) loading[0].remove(); - var content = $$("div." + CLASSES.content()); - if(content.length === 1) content[0].show(); + removeLoad(); handler(xhr); } catch(err) {alert("err: " + err); } @@ -42,14 +38,40 @@ }
+// --- Removes all divs with the class ajaxLoader. The inner image with the +// --- class ajaxLoader will be moved to the top of div.content and the +// --- display attribute will be set to none; +function removeLoad() +{ + var img = $$("img." + CLASSES.ajaxLoader()); + if(img.length === 1){ + img[0].setStyle({"display" : "none"}) + $("page").insert({"top" : img[0]}); + } + + var loading = $$("div." + CLASSES.load()); + if(loading.length === 1) loading[0].remove(); + var content = $$("div." + CLASSES.content()); + if(content.length === 1) content[0].show(); +} + + +// --- The hidden image with the class ajaxLoader will be moved to the new created +// --- div with the given message. The div with the class content will be hidden and instaed +// --- of the hidden div there will be shown the new created element. function onLoad(text) { var div = new Element("div", {"class" : CLASSES.load()}).update(content); var content = $$("div." + CLASSES.content()); if(content.length === 1){ content[0].hide(); - var load = new Element("div", {"class" : CLASSES.load()}).update(text); + var load = new Element("div", {"class" : CLASSES.load()}).update("<br/><br/>" + text); content[0].insert({"before" : load}); + var img = $$("img." + CLASSES.ajaxLoader()); + if(img.length === 1){ + img[0].setStyle({"display" : "block"}) + load.insert({"top" : img[0]}) + } } }
@@ -68,7 +90,7 @@ try{ var onFailure = onFailureHandler ? onFailureHandler : defaultFailureHandler; var timeFun = setAjaxTimeout(TIMEOUT, TYPE_PSIS_URL); - onLoad("Requesting all Type PSIs"); + onLoad("Requesting all type PSIs");
new Ajax.Request(TYPE_PSIS_URL, { "method" : "get", @@ -89,7 +111,7 @@ try{ var onFailure = onFailureHandler ? onFailureHandler : defaultFailureHandler; var timeFun = setAjaxTimeout(TIMEOUT, TMCL_TYPE_URL); - onLoad("Requesting all constraints for psis:<br/>" + psis.gsub("\[", "").gsub("\]", "")); + onLoad("Requesting all constraints for the psis:<br/>" + psis.gsub("\[", "").gsub("\]", ""));
new Ajax.Request(TMCL_TYPE_URL, { "method" : "post", @@ -140,20 +162,13 @@ neededTime += delta; if(delta > maxTimeout && psis && psis.length !== 0){ alert("From getTopicStubs(): Please check your network-connection - the request timed out!!!"); - var loading = $$("div." + CLASSES.load()); - if(loading.length === 1) loading[0].remove(); - var content = $$("div." + CLASSES.content()); - if(content.length === 1) content[0].show(); + removeLoad(); onFailureHandler(); return; }
if(topicStubs.length === psis.length){ - var loading = $$("div." + CLASSES.load()); - if(loading.length === 1) loading[0].remove(); - var content = $$("div." + CLASSES.content()); - if(content.length === 1) content[0].show(); - onSuccessHandler(topicStubs); + removeLoad(); } else setTimeout(checkRequests, delta); }