Trigger set_flashdata when method called via ajax

Question

Is there any way to use $this->EE->session->set_flashdata(); when calling a method via ajax without having to do a page reload to get the message to appear as it normally would under a non-ajax situation?

I tried and the message shows up after the next page load which of course isn't ideal.

I read a few posts over at SO that said it requires the page reload though, just wanted to double check to make sure it was in fact not possible to trigger the message via an ajax request without the load.

Thanks!

Answer 1

Yes, it's possible (assuming you're talking about triggering the ExpressionEngine status message in the control panel, not generically setting flash data from an AJAX request).

I had this same question a few days ago - I know for example the CP template manager triggers the success message at the top of the page from an AJAX request, so I went trawling through the (minified) EE javascript source to find out how it works. Turns out there is a handy JS function you can call to trigger that CP status message.

Remember, it's nothing to do with flashdata at this point, you simply need to return a message from your AJAX script, then use javascript to display that message to the user at the top of the page. In your PHP script, you would put something like this:

if ($this->EE->input->is_ajax_request()) {
    return $this->EE->output->send_ajax_response(array(
        'type' => 'success', // or 'error'
        'message' => lang('settings_updated'),
    ));
}

Then, in your javascript AJAX call, get the response data and display it to the user using ExpressionEngine's secret $.ee_notice function:

$.post(url, data, function(response) {
    $.ee_notice(response.message, {type: response.type});
});

Easy once you know how, right :)

UPDATE: It looks like this has actually documented now. I swear it wasn't there last time I read the docs: http://ellislab.com/expressionengine/user-guide/development/cp_javascript/notification.html

Answer 2

Assuming you're calling the method via Ajax dataType html, you can get the return html which will be the entire CP html include the message, e.g.:

function submitForm($form) {
    //###   Send form via AJAX   ###
    $.ajax({
        type: "POST",
        data: $form.serialize(),
        dataType: "html",
        url: $form.attr("action"),
        cache: false,
        success: function (html) {
            $("#footer").after(getMessage(html));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //###   Error occurred, could be server, CMS or 404   ###
            $form.find("[type='submit']").fadeTo("slow", 1).removeAttr("disabled").removeClass("disabled")
                .addClass('error')
                .after('<label class="error" generated="true">'+textStatus+'</label>');
        }
    });
} //###   End of submitForm function   ###

This could probably be simplified to:

$(this).click( function(e) {
    var url = $(this.form).attr('action');
    var data = $(this.form).serialize();
    $.post(url, data, function() {
        $("#footer").after(getMessage(html));
    });
    e.preventDefault();
});

In the EE Admin the #notice_container div contains the message(s) and appears after the #footer div in the DOM.

Handy JQuery function to get the div and content (as opposed to just innerHTML):

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

Source: https://stackoverflow.com/questions/3614212/jquery-get-html-of-a-whole-element

Then you'll need the code to rip the message from the return html:

function getMessage(html_string) {
    var $html = $('<div>',{html:html_string}).hide().appendTo('body');
    $message_div = $html.find('#notice_container').outerHTML();
    $html.remove();
    return $message_div;
}

Hopefully this should then place the message and message html elements into your page - the next problem is it's probably hidden via CSS, if so, show it via JS.

And finally there's no JS code attached to it. So have a scan of the Control Panel code looking for triggers on #notice_counts, .notice_success, .notice_alert, .notice_error & .notice_info and either re-intialise or duplicate the functionality (open and close slider - the remove is in-line JS so no need to worry).

All the above is theory, so not tested but will hopefully help!