JS/PHP Inline Page Editing.

[Shadow121]

I'm working on a CMS and had the idea of doing on-page altering. The problem is, it takes two submits to get the data to submit, or even show up on the page. Could anyone help? :]

Here's the code.

function toggleEditor(id) {
    if (!tinyMCE.get(id)){
        tinyMCE.execCommand('mceAddControl', true, id);
    } else {
        tinyMCE.execCommand('mceRemoveControl', false, id);
    }
}

$(document).ready(function()
{
    $("#editInPlace").editable({type:'textarea',onEdit:begin,submit:'save',onSubmit:end});
    function begin()
    {
        toggleEditor('mcecontent'); 
    }
    function end()
    {
        var page_content = $("#editInPlace").html();
        var page_name = document.getElementById('pages_page_name').innerHTML;
        $.ajax({
            type: "POST",
            url: "testing.php",
            data: "content=" + page_content + "&pagename=" + page_name,
            success : function(Data){
                
            }
        });
    }
});

 

[misson]

Do you have a link to a live page we can test?

Make sure you escape page_content and page_name when adding them to a query string. Alternatively, pass an object as the "data" param and let jQuery handle the encoding:

        $.ajax({
            type: "POST",
            url: "testing.php",
            data: { content: page_content, pagename: page_name},
            // or: data: "content=" + escape(page_content) + "&pagename=" + escape(page_name),
            success : function(Data) {}
        });

 

[Shadow121]

http://ci.h0stilewarfare.co.cc is the site, just register as it requires you to login.

 

[misson]

Someone didn't read the sig, I see.

In Safari 4 and Firefox 3.6, I don't see the behavior you describe. For example, on http://ci.h0stilewarfare.co.cc/index.php/pages/view/test, I clicked the content ("Test Content :S"), which turned into a textarea. I added a paragraph, then clicked the "save" button just once. The editable area was replaced with the rendered view of the content. Opening the page in a new tab showed the changes I just made. Are you having problems in another browser, e.g. a specific version of IE? What, specifically, are you doing, what do you expect to happen and what actually happens?

When you're developing, use the debug versions of jQuery and jQuery plugins. It's basically impossible to debug the compact versions, since debuggers are line-oriented.

 

[Shadow121]

Actually, I was in a rush out the door when I posted the last time as I had to go to a meeting, then come back to get all packed for a trip which I got back tonight.

The browser that's doing it to me is Google Chrome. But, I'll try it out in FireFox and IE 7 here after I go through and check email, make bulletins for organization.

Edit: I just realized that it wasn't bringing up TinyMCE when you click the content thats why its working fine. My one friend sent a link yesterday and I bookmarked it because it pertained to tinyMCE and the jQuery plugin I'm currently using.

Edit2: We have moved servers. DNS may take a bit to update. It can now be found at http://cms.bradfordwebcreation.com

Edit3: Noticed you made an account. Updated rank to Content Editor as I added security to the page things so random people can't log in and mess up the pages.

Final Edit: I got it working but, another error appeared.

If you click it once, the TinyMCE editor will show up, when you try to type it disappears. When you click it once more, it will let you type, then you can save it and it works.