How to Connect IPWEditor to the Server Side

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.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

You may also like...

11 Responses

  1. anonymous says:

    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.

  2. Jason says:

    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

  3. Gerelt Od says:

    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.

  4. anonymous says:

    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.

  5. Amir Shevat says:

    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

  6. anonymous says:

    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.

  7. Amir Shevat says:

    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

  8. anonymous says:

    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.

  9. Amir Shevat says:

    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

  10. anonymous says:

    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.

  11. Amir Shevat says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>