webmcp

diff framework/js/partialload.js @ 11:d76a8857ba62

Added ui.partial and other functions, which allow partial content replacement using XMLHttpRequests; Image support for ui.link

Also includes following changes:
- Fix for rocketcgi library to accept POST data content-types, which contain additional charset information.
- Support arrays passed as params to encode.url (only for keys ending with "[]")
- Version information changed to "1.0.7"

Documentation for added functions is not yet complete.
author jbe/bsw
date Fri Feb 12 18:40:22 2010 +0100 (2010-02-12)
parents
children 89030e955845
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/framework/js/partialload.js	Fri Feb 12 18:40:22 2010 +0100
     1.3 @@ -0,0 +1,271 @@
     1.4 +
     1.5 +partialload_queue = [];
     1.6 +partialload_queueRPos = 0;
     1.7 +partialload_queueWPos = 0;
     1.8 +
     1.9 +function partialload_getFormKeyValuePairs(form) {
    1.10 +  var result = {};
    1.11 +  for (var i=0; i<form.elements.length; i++) {
    1.12 +    var inputElement = form.elements[i];
    1.13 +    var key = inputElement.name;
    1.14 +    var value = inputElement.value;
    1.15 +    if (result[key] == null) result[key] = value;
    1.16 +    else if (typeof(result[key]) == "object") {
    1.17 +      result[key][result[key].length] = value;
    1.18 +    } else {
    1.19 +      result[key] = [result[key], value];
    1.20 +    }
    1.21 +  }
    1.22 +  return result;
    1.23 +}
    1.24 +
    1.25 +function partialload_encodeFormData(params) {
    1.26 +  var result = "";
    1.27 +  for (var key in params) {
    1.28 +    var value = params[key];
    1.29 +    if (typeof(value) == "string") {
    1.30 +      if (result != "") result += "&";
    1.31 +      result += encodeURIComponent(key) + "=" + encodeURIComponent(value);
    1.32 +    } else if (typeof(value) == "object") {
    1.33 +      var i;
    1.34 +      for (i=0; i<value.length; i++) {
    1.35 +        if (result != "") result += "&";
    1.36 +        result += encodeURIComponent(key) + "=" + encodeURIComponent(value[i]);
    1.37 +      }
    1.38 +    }
    1.39 +  }
    1.40 +  return result;
    1.41 +}
    1.42 +
    1.43 +function partialload_addFormDataToUrl(url, params) {
    1.44 +  if (params != null && typeof(params) != "string") {
    1.45 +    params = partialload_encodeFormData(params);
    1.46 +  }
    1.47 +  if (params != null) {
    1.48 +    if (url.search(/\?/) >= 0) {
    1.49 +      if (url.search(/&$/) >= 0) {
    1.50 +        url = url + params;
    1.51 +      } else {
    1.52 +        url = url + "&" + params;
    1.53 +      }
    1.54 +    } else {
    1.55 +      url = url + "?" + params;
    1.56 +    }
    1.57 +  }
    1.58 +  return url;
    1.59 +}
    1.60 +
    1.61 +function partialload_mergeEncodedFormData(data1, data2) {
    1.62 +  if (data2 == null || data2 == "") return data1;
    1.63 +  if (data1 == null || data1 == "") return data2;
    1.64 +  return data1 + "&" + data2;
    1.65 +}
    1.66 +
    1.67 +function partialload_startNextRequest() {
    1.68 +  var entry = partialload_queue[partialload_queueRPos++];
    1.69 +  var req = new XMLHttpRequest();
    1.70 +  req.open(entry.method, entry.url, true);
    1.71 +  req.onreadystatechange = function() {
    1.72 +    if (req.readyState == 4) {
    1.73 +      if (req.status == 200) {
    1.74 +        if (entry.successHandler != null) entry.successHandler(req.responseText);
    1.75 +      } else {
    1.76 +        if (entry.failureHandler != null) entry.failureHandler();
    1.77 +      }
    1.78 +      if (partialload_queue[partialload_queueRPos]) {
    1.79 +        partialload_startNextRequest();
    1.80 +      } else {
    1.81 +        partialload_queue = [];
    1.82 +        partialload_queueRPos = 0;
    1.83 +        partialload_queueWPos = 0;
    1.84 +      }
    1.85 +    }
    1.86 +  }
    1.87 +  if (entry.data) {
    1.88 +    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    1.89 +  }
    1.90 +  req.send(entry.data);
    1.91 +}
    1.92 +
    1.93 +function queuedHttpRequest(
    1.94 +  url_or_form,
    1.95 +  urlParams,
    1.96 +  postParams,
    1.97 +  successHandler,
    1.98 +  failureHandler
    1.99 +) {
   1.100 +  var method;
   1.101 +  var data = null;
   1.102 +  if (typeof(postParams) == "string") {
   1.103 +    data = postParams;
   1.104 +  } else if (postParams != null) {
   1.105 +    data = partialload_encodeFormData(postParams);
   1.106 +  }
   1.107 +  var url;
   1.108 +  if (typeof(url_or_form) == "object") {
   1.109 +    // form element given
   1.110 +    var form = url_or_form;
   1.111 +    url = partialload_addFormDataToUrl(form.action, urlParams);
   1.112 +    var dataFromForm = partialload_encodeFormData(
   1.113 +      partialload_getFormKeyValuePairs(form)
   1.114 +    );
   1.115 +    if (form.method != null && form.method.search(/^POST$/i) >= 0) {
   1.116 +      method = "POST";
   1.117 +      data = partialload_mergeEncodedFormData(data, dataFromForm);
   1.118 +    } else {
   1.119 +      method = (postParams == NULL) ? "GET" : "POST";
   1.120 +      url = partialload_addFormDataToUrl(url, dataFromForm);
   1.121 +    }
   1.122 +  } else {
   1.123 +    // URL given
   1.124 +    url = partialload_addFormDataToUrl(url_or_form, urlParams);
   1.125 +    if (postParams == null) {
   1.126 +      method = "GET";
   1.127 +    } else {
   1.128 +      method = "POST";
   1.129 +      if (typeof(postParams) == "string") {
   1.130 +	data = postParams;
   1.131 +      } else {
   1.132 +	data = partialload_encodeFormData(postParams);
   1.133 +      }
   1.134 +    }
   1.135 +  }
   1.136 +  partialload_queue[partialload_queueWPos++] = {
   1.137 +    method:         method,
   1.138 +    url:            url,
   1.139 +    data:           data,
   1.140 +    successHandler: successHandler,
   1.141 +    failureHandler: failureHandler
   1.142 +  };
   1.143 +  if (partialload_queueRPos == 0) {
   1.144 +    partialload_startNextRequest();
   1.145 +  }
   1.146 +}
   1.147 +
   1.148 +function setHtmlContent(node, htmlWithScripts) {
   1.149 +  var uniquePrefix = "placeholder" + Math.floor(Math.random()*10e16) + "_";
   1.150 +  var i = 0;
   1.151 +  var scripts = [];
   1.152 +  var htmlWithPlaceholders = "";
   1.153 +  // NOTE: This function can not handle CDATA blocks at random positions.
   1.154 +  htmlWithPlaceholders = htmlWithScripts.replace(
   1.155 +    /<script[^>]*>(.*?)<\/script>/ig,
   1.156 +    function(all, inside) {
   1.157 +      scripts[i] = inside;
   1.158 +      var placeholder = '<span id="' + uniquePrefix + i + '"></span>';
   1.159 +      i++;
   1.160 +      return placeholder;
   1.161 +    }
   1.162 +  )
   1.163 +  node.innerHTML = htmlWithPlaceholders;
   1.164 +  var documentWriteBackup   = document.write;
   1.165 +  var documentWritelnBackup = document.writeln;
   1.166 +  var output;
   1.167 +  document.write   = function(str) { output += str; }
   1.168 +  document.writeln = function(str) { output += str + "\n"; }
   1.169 +  for (i=0; i<scripts.length; i++) {
   1.170 +    var placeholderNode = document.getElementById(uniquePrefix + i);
   1.171 +    output = "";
   1.172 +    eval(scripts[i]);
   1.173 +    if (output != "") {
   1.174 +      placeholderNode.innerHTML = output;
   1.175 +      while (placeholderNode.childNodes.length > 0) {
   1.176 +        var childNode = placeholderNode.childNodes[0];
   1.177 +        placeholderNode.removeChild(childNode);
   1.178 +        placeholderNode.parentNode.insertBefore(childNode, placeholderNode);
   1.179 +      }
   1.180 +    }
   1.181 +    placeholderNode.parentNode.removeChild(placeholderNode);
   1.182 +  }
   1.183 +  document.write   = documentWriteBackup;
   1.184 +  document.writeln = documentWritelnBackup;
   1.185 +}
   1.186 +
   1.187 +function partialLoad(
   1.188 +  node,
   1.189 +  tempLoadingContent,
   1.190 +  failureContent,
   1.191 +  url_or_form,
   1.192 +  urlParams,
   1.193 +  postParams,
   1.194 +  successHandler,
   1.195 +  failureHandler
   1.196 +) {
   1.197 +  if (typeof(node) == "string") node = document.getElementById(node);
   1.198 +  if (tempLoadingContent != null) setHtmlContent(node, tempLoadingContent);
   1.199 +  queuedHttpRequest(
   1.200 +    url_or_form,
   1.201 +    urlParams,
   1.202 +    postParams,
   1.203 +    function(response) {
   1.204 +      setHtmlContent(node, response);
   1.205 +      if (successHandler != null) successHandler();
   1.206 +    },
   1.207 +    function() {
   1.208 +      if (failureContent != null) setHtmlContent(node, failureContent);
   1.209 +      if (failureHandler != null) failureHandler();
   1.210 +    }
   1.211 +  );
   1.212 +}
   1.213 +
   1.214 +function partialMultiLoad(
   1.215 +  mapping,
   1.216 +  tempLoadingContents,
   1.217 +  failureContents,
   1.218 +  url_or_form,
   1.219 +  urlParams,
   1.220 +  postParams,
   1.221 +  successHandler,
   1.222 +  failureHandler
   1.223 +) {
   1.224 +  if (mapping instanceof Array) {
   1.225 +    var mappingHash = {}
   1.226 +    for (var i=0; i<mapping.length; i++) {
   1.227 +      mappingHash[mapping[i]] = mapping[i];
   1.228 +    }
   1.229 +    mapping = mappingHash;
   1.230 +  }
   1.231 +  if (typeof(tempLoadingContents) == "string") {
   1.232 +    for (var key in mapping) {
   1.233 +      var node = key;
   1.234 +      if (typeof(node) == "string") node = document.getElementById(node);
   1.235 +      setHtmlContent(node, tempLoadingContents);
   1.236 +    }
   1.237 +  } else if (tempLoadingContents != null) {
   1.238 +    for (var key in tempLoadingContents) {
   1.239 +      var node = key;
   1.240 +      if (typeof(node) == "string") node = document.getElementById(node);
   1.241 +      setHtmlContent(node, tempLoadingContents[key]);
   1.242 +    }
   1.243 +  }
   1.244 +  queuedHttpRequest(
   1.245 +    url_or_form,
   1.246 +    urlParams,
   1.247 +    postParams,
   1.248 +    function(response) {
   1.249 +      var data = eval("(" + response + ")");
   1.250 +      for (var key in mapping) {
   1.251 +        var node = key;
   1.252 +        if (typeof(node) == "string") node = document.getElementById(node);
   1.253 +        setHtmlContent(node, data[mapping[key]]);
   1.254 +      }
   1.255 +      if (successHandler != null) successHandler();
   1.256 +    },
   1.257 +    function() {
   1.258 +      if (typeof(failureContents) == "string") {
   1.259 +        for (var key in mapping) {
   1.260 +          var node = key;
   1.261 +          if (typeof(node) == "string") node = document.getElementById(node);
   1.262 +          setHtmlContent(node, failureContents);
   1.263 +        }
   1.264 +      } else if (failureContents != null) {
   1.265 +        for (var key in failureContents) {
   1.266 +          var node = key;
   1.267 +          if (typeof(node) == "string") node = document.getElementById(node);
   1.268 +          setHtmlContent(node, failureContents[key]);
   1.269 +        }
   1.270 +      }
   1.271 +      if (failureHandler != null) failureHandler();
   1.272 +    }
   1.273 +  );
   1.274 +}

Impressum / About Us