Внедрил функцию сериализации форм непосредственно в JW и немного поколдовал с индикатором загрузки.
Добавил: Amro Дата: 19.10.2014 16:42
Добавил: Amro Дата: 19.10.2014 16:42
Внедрил функцию сериализации форм непосредственно в JW и немного поколдовал с индикатором загрузки. Вот что получилось:
/* =============== AJAX functions ===================== */
sed_ajx = {
//Create a xmlHttpRequest object - this is the constructor.
getHTTPObject : function() {
var http = false;
//Use IE's ActiveX items to load the file.
if(typeof ActiveXObject != 'undefined') {
try {http = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
try {http = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E) {http = false;}
}
//If ActiveX is not available, use the XMLHttpRequest of Firefox/Mozilla etc. to load the document.
} else if (window.XMLHttpRequest) {
try {http = new XMLHttpRequest();}
catch (e) {http = false;}
}
return http;
},
// This function is called from the user's script.
//Arguments -
// url - The url of the serverside script that is to be called.
// callback - Function that must be called once the data is ready.
// format - 'xml','json' or 'text'. Default:'text'
// method - GET or POST. Default 'GET'
load : function (url,callback,format,method,opt) {
var http = this.init(); //The XMLHttpRequest object is recreated at every call - to defeat Cache problem in IE
if(!http||!url) return;
//XML Format need this for some Mozilla Browsers
if (http.overrideMimeType) http.overrideMimeType('text/xml');
if(!method) method = "GET";//Default method is GET
if(!format) format = "text";//Default return type is 'text'
if(!opt) opt = {};
format = format.toLowerCase();
method = method.toUpperCase();
//Kill the Cache problem in IE.
var now = "uid=" + new Date().getTime();
url += (url.indexOf("?")+1) ? "&" : "?";
url += now;
var parameters = null;
if(method=="POST") {
var postparams = '';
if(opt.formid) postparams = '&' + this.serialize(opt.formid);
var parts = url.split("\?");
url = parts[0];
parameters = parts[1] + postparams;
}
http.open(method, url, true);
if(method=="POST") { http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); }
var ths = this;// Closure
if(opt.handler) { //If a custom handler is defined, use it
http.onreadystatechange = function() { opt.handler(http); };
} else {
http.onreadystatechange = function () {//Call a function when the state changes.
if (http.readyState == 4) {//Ready State will be 4 when the document is loaded.
if(http.status == 200) {
var result = "";
if(http.responseText) result = http.responseText;
//If the return is in JSON format, eval the result before returning it.
if(format.charAt(0) == "j") {
//\n's in JSON string, when evaluated will create errors in IE
result = result.replace(/[\n\r]/g,"");
result = eval('('+result+')');
} else if(format.charAt(0) == "x") { //XML Return
result = http.responseXML;
}
//Give the data to the callback function.
if(callback) callback(result);
} else {
if(opt.loading) document.getElementById(opt.loadingid).removeChild(opt.loading); //Remove the loading indicator
if(opt.onError) opt.onError(http.status);
}
}
}
}
http.send(parameters);
},
bind : function(user_options) {
var opt = {
'url':'', //URL to be loaded
'onSuccess':false, //Function that should be called at success
'onError':false, //Function that should be called at error
'format':"text", //Return type - could be 'xml','json' or 'text'
'method':"GET", //GET or POST
'update':"", //The id of the element where the resulting data should be shown.
'loading':"", //ID element that would be inserted into the document once the url starts loading and removed when the data has finished loading. This will be inserted into a div with class name 'loading-indicator' and will be placed at 'top:0px;left:0px;'
'formid':"" //ID form, serialize data from form for POST send
}
for(var key in opt) {
if(user_options[key]) {//If the user given options contain any valid option, ...
opt[key] = user_options[key];// ..that option will be put in the opt array.
}
}
if(!opt.url) return; //Return if a url is not provided
var div = false;
if(opt.loading) { //Show a loading indicator from the given HTML
div = document.createElement("div");
opt.loadingid = opt.loading;
var intElemOffsetHeight = Math.floor(document.getElementById(opt.loading).offsetHeight/2) + 16;
var intElemOffsetWidth = Math.floor(document.getElementById(opt.loading).offsetWidth/2) - 16;
div.setAttribute("style","position:absolute; margin-top:-" + intElemOffsetHeight + "px; margin-left:" + intElemOffsetWidth + "px;");
div.setAttribute("class","loading-indicator");
document.getElementById(opt.loading).appendChild(div);
opt.loading=div;
}
this.load(opt.url,function(data){
if(opt.onSuccess) opt.onSuccess(data);
if(div) document.getElementById(opt.loadingid).removeChild(div); //Remove the loading indicator
if(opt.update && data != "") document.getElementById(opt.update).innerHTML = data;
},opt.format,opt.method, opt);
},
serialize : function(formid)
{
var form = document.getElementById(formid);
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
}
break;
case 'file':
break;
}
break;
case 'TEXTAREA':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
}
break;
}
}
return q.join("&");
},
init : function() {return this.getHTTPObject();}
}
/* ============================== */
Пример использования
sed_ajx.bind({
'url' : 'урл',
'method' : 'GET или POST',
'format' : 'TEXT или JSON'
'update' : 'ID блока для обновления',
'loading' : 'ID блока в котором по центру вывести лоадинг загрузки',
'formid' : 'ID формы откуда взять значения для отправки данных'
});
если нужно просто послать запрос через AJAX то достаточно этого:
sed_ajx.bind({
'url' : 'урл',
'method' : 'GET или POST'
});
либо так:
sed_ajx.load('УРЛ','Сallback ф-ция для обработки результата','TEXT или JSON','GET или POST');
или даже так
sed_ajx.load('урл');
CSS
#loading-holder {
height:30px;
}
#loading {
display:none;
text-align:center;
}
.loading-indicator {
width:32px;
height:32px;
background:url(img/loading.gif) center center no-repeat;
}
comments powered by HyperComments