How to Connect IPWEditor to the Server Side

11

Category : ajaxdo, IPWEditor, JavaScript, PHP, SAAS

I have been getting multiple support requests from developers who want to save the data edited in IPWEditor on the server side.

Saving information in the server-side is a server-side feature and out of scope for IPWEditor (which is a client-side JQuery plug-in), moreover, it is programming language depended – a java developer might handle this differently from a .NET or a PHP developer.

Despite all that, I will try to give general guide on how it is done, I will be using PHP for the server-side examples but you can use any server-side programming language you prefer.

Create a client side Ajax call

IPWEditor gives you the ability to run code once the user has saved his work on the wysiwyg editor, in my examples I have used the alert function to prompt the newly edited text:

$('.myipwe').editable(
            {
           type: 'wysiwyg',
           editor: oFCKeditor,
           onSubmit:function submitData(content){
               alert(content.current)
           },
           submit:'save'
            });

We will replace the alert(..) code with a jquery ajax call to the server:

$('.myipwe').editable(
            {
           type: 'wysiwyg',
           editor: oFCKeditor,
           onSubmit:function submitData(content){
$.ajax({
                    type: "POST",url: "save.php",
                    data: {"content": content.current},
                    complete: function(){ }, //manage the complate if needed
                    success: function(html){ }//get some data back to the screen if needed
		}); //close $.ajax(
           },
           submit:'save'
            });

This will create an http Ajax call from the client side to save.php on the server-side

Create the Server side save.php

So our next step is to create the server-side save.php:

<?php
header("Cache-Control: no-cache");

$content = $_POST["content"];
// TODO: implement saving $content in to a persistent database(AKA MySQL in php)
?>

I will spare you my version of how to connect PHP to a database you can read a good tutorial about it here.

That’s it!

You have now connected IPWEditor to a server-side component and can now save the edited content.

Comments (11)

Dear Amir,

I have send you the codes to your email address (About posting big html text problem). I am really looking forward to your reply. Please guide me where i am doing wrong.

Thanks again.

I’m sorry, it was a typographic error. The ” you get with copy-paste from this comments is not the quote sign used in syntax and the whole string was pointless. After trying to debug for hours.. i discovered it was as simple as that. Delete my comments & Mircea’s. His a friend of mine trying to help.
Thanks

So far so good plugin. I’ve seen lot of in place edit plugins. But it’s already integrated with TinyMCE, most of others don’t have rich text editor. Thanks.

is there any limit to the size of $content variable sent to the php script through ajax call?
Suppose we send a whole 10000 words of text in $ content variable. is that possible.

If your content is big then you would use HTTP POST:
http://api.jquery.com/jQuery.post/

I guess I will change this article to do POST by default.

Cheers
Amir

suppose we want to pass multiple variable to save.php file. e.g. we want to pass id=45 and name=user1, how can we pass variable along with the content?

waiting eagerly for your reply.

Quoting from: http://api.jquery.com/jQuery.ajax/

The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: ‘value1′, key2: ‘value2′}.

So in our case it would be:

type: “POST”,url: “save.php”,
data: “content=”+content.current+”&id=45&name=user1″,

Cheers
Amir Shevat

Thanks it worked. But the problem i am facing is that huge html text is not getting saved to database. Only one or 2 lines are saved. Is there any kind of limits which is stopping it from posting huge texts to database.

There should be no limitation in the size of the content.

A few things I would start with:

Use firebug (or plain alerts) to see if the content is passed from the client side correctly.

Use server side logging to check you got it on the server side

Check that you got the right data types and lengths in the Database (Are you using text/varchar?)

You can also send me the code to amir(at)spacebug.com

Cheers
Amir Shevat

Looks like issue with the method of sending. I am sending whole html data using POST method. The post is also receiving first few lines of html code.

I am not sure what you mean by “The post is also receiving first few lines of html code.”

Try to go back to:
onSubmit:function submitData(content){
alert(content.current)
}

And see if you get the full content

Also see http://stackoverflow.com/questions/1548258/jquery-ajax-post-size-limit

Cheers
Amir Shevat

Post a comment