Channel Forms used for inline editing

Question

Has anyone had any luck with using EE 2.7.0 with the new Channel Forms to perform inline/on page editing for logged in users? I was attempting this using a similar approach to the ajax driven form entry sample from the docs here by opening the form in an embed template, but I am having a hard time sending the template field to the embed.

What is the best way of retrieving the field name and making it, say the ID of the element being edited? Would this need to be handled vie PHP in templates or can I extract that another way?

Answer 1

I ended up getting what I need using the jquery ajax form example shown in the docs here and using a jquery dialog box to open up an edit field if they were logged in and authorized. If all were met, an edit button shows and opens a dialog with this:

            //    EDIT MODAL
    $(".editPage > a").click(function(e){
        //  Prevent default click action on anchor
        e.preventDefault();

        //  Get link from html markup
        var editLink = $(this).attr('href');
        var title = $(this).attr('title');

        // Build div contents
        var modal = $('<style>button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close{margin: -10px 0 0 96%;}</style><div id="edit_modal"><iframe id="editFrame" width="800" height="800" src="'+editLink+'" frameborder="0" allowfullscreen></iframe></div>').appendTo('body');

        $("#edit_modal").dialog({
            buttons: {
                'Save': function(){
                    $("#editFrame").contents().find('form #submitMe').click();
                },
                'Cancel': function(){
                    $(this).dialog('close');
                }
            },
            title: title,
            modal: true,
            width: 'auto',
            minHeight: 800,
            resize: 'auto',
            autoResize: true,
            close: function(event, ui){
                location.reload(true);
            }
        });

        // Open the modal
        $("#edit_modal").dialog("open");
    });

Could probably be cleaner, but it works great.