Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Question: Flash a message after updating


Reply


5 Posts   2341 Views

Avatar
Ryan M.

Community Member, 309 Posts

1 September 2010 at 4:09pm

Hi, this is mostly an exploratory question. Does anybody know of a feature in SilverStripe, or has anybody ever thought of building such a feature in SS, that would flash a highlighted message on the page after you update/save a page or dataobject? And by this, I mean on the front-end for member users. For example, if they edit their profile information and save it, I'd like to redirect back to the same page and have a small message flash at the top of the page: "your profile has been saved!".

I believe this would add to a better user experience, as sometimes when you edit a page and get returned to it, you have no idea whether the changes were saved or not unless you scroll back down and check.

Avatar
Willr

Forum Moderator, 5513 Posts

1 September 2010 at 5:15pm

I've done this a couple of times its pretty straight forward to do so on a custom form implementation. You can use the session class to save that they submitted the form and instead of redirecting to a 'thanks' page use $this->redirectBack() to go back to the page.

In your Page Controller you also then need to check for the session state. Heres an example from an application I built a while back.

// in a controller eg Page_Controller

function StatusMessage {
   if(Session::get('ActionMessage')) {
      $message = Session::get('ActionMessage');
      $status = Session::get('ActionStatus');

      Session::clear('ActionStatus');
      Session::clear('ActionMessage');

      return new ArrayData(array('Message' => $message, 'Status' => $status));
   }

   return false;
}

And the template I just had a div with the message that appeared at the top of the page with a class based on whether it was an error or success etc.

<% if StatusMessage %>
<% control StatusMessage %>
<div class="message-$Status">
$Message
</div>
<% end_control %>
<% end_if %>

And so the final step is to set the statusmessage from your forms like

// your form process function...

Session::set('ActionStatus', 'success');
Session::set('ActionMessage', 'Profile Saved');

$this->redirectBack();

On the redirect back it should pick up a value for the action and display to the template.

Avatar
Ryan M.

Community Member, 309 Posts

11 September 2010 at 2:02am

Thanks Willr!

If anyone's curious, my final code was:

in Page.php -> Page_Controller:

public function StatusMessage() {
   if($message = Session::get('ActionMessage')) {
$status = Session::get('ActionStatus');
Session::clear('ActionStatus');
Session::clear('ActionMessage');
   return new ArrayData(array('Message' => $message, 'Status' => $status));
   }
      return false;
   }

in any Template that needed the StatusMessage:

<% include StatusMessage %>

StatusMessage.ss template:

<% if StatusMessage %>
<% require javascript(http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) %>
<% require javascript(mysite/javascript/behavior.js) %>
<% control StatusMessage %>
<div id="flash" class="$Status">$Message</div>
<% end_control %>
<% end_if %>

And I used jQuery to make the div fade out after 3000ms, in behavior.js:

(function($) {
   setTimeout(function(){
$("#flash").fadeOut("slow", function () {
$("#flash").remove();
}); }, 3000);
})(jQuery);

And for the visual, attached is a screenshot of what it looks like.

Attached Files
Avatar
Willr

Forum Moderator, 5513 Posts

11 September 2010 at 5:56pm

Cool glad you got it sorted! Would make a good tutorial for the wiki or ssbits.com!

Avatar
Martijn

Community Member, 271 Posts

11 September 2010 at 10:13pm

Edited: 11/09/2010 10:14pm

I always use a if Director::is_ajax() switch to return a json_response, but this seems like a great way to normalise the frontend js message behaviour.

How would one go about a 'normalized' fetching a FormResponse after ajax submitting a form with jQuery (instead of prototype like the cms uses)?

http://doc.silverstripe.org/recipes:forms#adding_ajax-behaviour_to_your_forms