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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

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

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

Question: Flash a message after updating


Go to End


5 Posts   4560 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, 5523 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, 5523 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