You are not logged in.
- Topics: Active | Unanswered
Announcement
Pages: 1
#1 2006-08-21 23:03:40
- barabath
- New member
- From: France
- Registered: 2006-01-04
- Posts: 3
Xinha using Ajax
Hi everyone,
I'm using Xinha editor since a year now and I've got no trouble with it (the best one in my point of view)
Since a couple of days, I'm trying to use Ajax method to solve my only problem : do not refresh a page with the editor.
I've noticed that sometimes it is huge to load (most often, Xinha is not the only part of a page) and the browser process can take a large amount of CPU memory if the editor is reloaded each time.
I've added a submit button as a plugin that always worked fine to do classic post (code below / nothing amazing) :
function Save(editor, myForm) {
this.editor = editor;
var cfg = editor.config;
var self = this;
var FormName = document.getElementbyId(myForm);
cfg.registerButton({
id : "Save",
tooltip : this._lc("Save"),
image : editor.imgURL("ed_save.gif", "Save"),
textMode : false,
action : function(editor) {
self.buttonPress(editor);
}
})
cfg.addToolbarElement("Save", "formatblock", -2);
}
Save._pluginInfo = {
name : "Save",
version : "1.0",
developer : "Barabath",
developer_url : "",
c_owner : "",
sponsor : "",
sponsor_url : "",
license : "htmlArea"
};
Save.prototype._lc = function(string) {
return HTMLArea._lc(string, 'Save');
};
Save.prototype.buttonPress = function(editor) {
if(Save) {
FormName.onsubmit(); // workaround browser bugs.
FormName.submit();
}
};Using Ajax, I've changed the code for this "Save" plugin to this code below :
function Save(editor, myForm, method) {
this.editor = editor;
var cfg = editor.config;
var self = this;
var FormName = document.getElementbyId(myForm);
cfg.registerButton({
id : "Save",
tooltip : this._lc("Save"),
image : editor.imgURL("ed_save.gif", "Save"),
textMode : false,
action : function(editor) {
self.buttonPress(editor);
}
})
cfg.addToolbarElement("Save", "formatblock", -2);
}
Save._pluginInfo = {
name : "Save",
version : "1.0",
developer : "Barabath",
developer_url : "",
c_owner : "",
sponsor : "",
sponsor_url : "",
license : "htmlArea"
};
Save.prototype._lc = function(string) {
return HTMLArea._lc(string, 'Save');
};
Save.prototype.buttonPress = function(editor) {
if(Save) {
if(method == 1) { // (0 for normal posting and refreshing, 1 for Ajax and no refreshing)
// Sending Xinha content
FormName.onsubmit(); // workaround browser bugs.
var xhr_object = null;
// Testing Browser Ajax capabilities
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
// My sending method
var method = "POST";
// My php file
var filename = "serverside.php";
// Here are my fields that will be send to be verified and updated to a database
var var1 = FormName.elements["mouchard"].value;
var var2 = FormName.elements["titre"].value;
var var3 = FormName.elements["type_titre"].value;
var var4 = DeleteChariot(FormName.elements["ta"].value); // This is the textarea value. Call to the function DeleteChariot() only strips blank lines to get a compact code
var var5 = FormName.elements["section"].value;
var var6 = FormName.elements["intitule"].value;
var var7 = FormName.elements["classement"].value;
var var8 = FormName.elements["image_principale"].value;
var var9 = FormName.elements["etat_web"].value;
var var10 = FormName.elements["lang"].value;
var var11 = FormName.elements["child"].value;
var var12 = FormName.elements["parent"].value;
var var13 = FormName.elements["old_classement"].value;
var var14 = FormName.elements["tbl1_id"].value;
var var15 = FormName.elements["tbl2_id"].value;
// all my vars ready to be send in var 'data'
data = "mouchard="+var1+"&titre="+var2+"&type_titre="+var3+"&ta="+var4+"§ion="+var5+"&intitule="+var6+"&classement="+var7+"&image_principale="+var8+"&etat_web="+var9+"&lang="+var10+"&child="+var11+"&parent="+var12+"&old_classement="+var13+"&tbl1_id="+var14+"&tbl2_id="+var15;
//alert(data);
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function() {
// testing Ajax response
if(xhr_object.readyState == 4) {
// if OK, display new values in my form
if (xhr_object.status == 200) {
// alert(xhr_object.responseText);
// Split of the response of my php file
var tmp = xhr_object.responseText.split("[µ]");
if(typeof(tmp[1]) != "undefined") {
FormName.elements["mouchard"].value = tmp[0];
FormName.elements["titre"].value = tmp[1];
FormName.elements["type_titre"].value = tmp[2];
FormName.elements["ta"].value = tmp[3];
FormName.elements["section"].value = tmp[4];
FormName.elements["intitule"].value = tmp[5];
FormName.elements["classement"].value = tmp[6];
FormName.elements["image_principale"].value = tmp[7];
FormName.elements["etat_web"].value = tmp[8];
FormName.elements["lang"].value = tmp[9];
FormName.elements["child"].value = tmp[10];
FormName.elements["parent"].value = tmp[11];
FormName.elements["old_classement"].value = tmp[12];
FormName.elements["tbl1_id"].value = tmp[13];
FormName.elements["tbl2_id"].value = tmp[14];
}
}
else {
// if not OK
// ...
}
}
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(data);
}
else {
// If the method choosen is the classic post with refresh of the page and reload of Xinha
FormName.onsubmit(); // workaround browser bugs.
FormName.submit();
}
}
};Sorry for the length... 
My problem is a bit strange :
Ajax works great for all my fields... except Xinha's 
The value of the textarea is most often truncated while updating to the database (Approximately 300-400 chars)
Don't know why because the classic post updates well.
I can't use
FormName.submit();with Ajax (because Ajax already does the post)
Does anyone tried to send Xinha content with Ajax ?
Thank you all for answering.
Barabath
Offline
#2 2006-08-22 00:35:26
Re: Xinha using Ajax
Humm, probably because you are not escaping your datas to server. And so specials chars like ( &, spaces and such) and not correctly transmitted.
Instead of this :
// all my vars ready to be send in var 'data'
data = "mouchard=" + var1 + "&titre=" + var 2 + "&type_titre=" + var3 ....Try this :
data = "mouchard=" + encodeURIComponent(var1) + "&titre=" + encodeURIComponent(var2) + "&type_titre=" +(encodeURIComponent(var3)....Offline
#3 2006-08-23 08:03:02
- barabath
- New member
- From: France
- Registered: 2006-01-04
- Posts: 3
Re: Xinha using Ajax
Mokhet you're great
There is no more truncated content now.
Merci
See ya
Barabath
Offline
#4 2006-08-30 04:39:51
- BeeVee
- New member
- Registered: 2006-03-19
- Posts: 5
Re: Xinha using Ajax
Why there aren't any official ajax saving plugins for xinha?
Maybe this simple code will become a good starting point for further development?
I think, it will be very popular and useful.
I hope that this plugin will some day be included in standard xinha release.
BTW, a nice replacement for XMLHttpRequest, ActiveX, etc. is just dynamically writing a <script> tag like this:
<script language="JavaScript"
src="load.php?param1=dfsdf;param2=sdgadad..."></script>You can write this tag to your page using JS at any time.
This way, browser can load your generated JS.
IMHO, it is much more cross-platform than any other technologies.
Offline
#5 2006-08-30 05:47:37
Re: Xinha using Ajax
Have a look at this plugin I made some time ago. http://xinha.python-hosting.com/ticket/628
SaveSubmit for Xinha
____________________
Registers a button for submiting the Xinha form using asynchronous
postback for sending the data to the server
Usage: This should be a drop-in replacement for a normal submit button.
While saving a message is displayed to inform the user what's going on.
On successful transmission the output of the target script is shown, so it should print some information
about the success of saving.
Last edited by ray (2006-08-30 13:19:56)
Offline
Pages: 1