Skip navigation

 

Modal Window

SE Modal Window for confirmation

Social Engine provides an easy way for showing modal windows for users. Some example for its uses are the following:

  • Confirmation windows
  • Notification windows with Timeout
  • Taking a simple input on the fly, or even showing a whole form.

Modal Windows in SocialEngine 4 are created using mootools’s plugin “smoothbox”. Simply  a modal window here is just an iframe, displaying a view as a result of calling a specific action in a controller (see Controllers).  Let’s examine what happens when you try to delete an activity.

If you look at the html tag of the delete link you’ll find that it looks like the following:

<a href=”/activity/index/delete/action_id/126″ class=”smoothbox”>Delete</a>

Any anchor <a> tag that is given a class attribute with value “smoothbox”, opens the href link in a modal window (the i-frame), instead of transferring the whole page to it. This very much simulates an Ajax request with the least effort. Let’s inspect the href value to see where it leads:

 

Module: Activity, Controller: Index, Action:Delete, Parameters: action_id=126

So head up to this action. The first few lines in the action are just to check  if the user is allowed to perform the delete operation. Also notice that the same method is invoked for both, deleting an activity (AKA action) or deleting a comment on an activity. Let’s focus this time on lines concerned with deleting the activity itself. Go for the line that say:

if (!$this->getRequest()->isPost())      return;

What happens here is that the action checks if it is invoked by a POST request (that request that takes place when you submit a form of type=post), if it is not a post request, the action just returns at this point, causing the default view for this action (delete.tpl) to render (more info on Controllers). Notice the variable passed to the view (before return) carrying the action/activity Id, which in our example is 126.

$this->view->action_id  = $action_id  = $this->_getParam(‘action_id’, null);

If you open that view (delete.tpl), you’ll find a form of type=post just as expected. It contains the confirmation message to display:

Are you sure that you want to delete this activity item and all of its comments? This action cannot be undone

Form elements include:

  • A hidden field carrying the action Id passed from the view
  • A submit button.
  • A “Cancel”  link.

Cancel link just calls the instance of smoothbox in the parent window and closes it.

<a href=”javascript:void(0);” onclick=”parent.Smoothbox.close();”><?php echo $this->translate(“cancel”) ?></a>

On submitting the form, the same action handles the request, but this time it bypasses the condition checking if it’s not a POST request (since the action is called by submitting the form). The lines after that condition just check again for further permissions, then the actual deletion takes place. We’re not to worry here about the actual deletion process, this guide is only concerned with the modal window itself and how it works. So After deleting:

$this->view->status  = true;

$this->view->message = Zend_Registry::get(‘Zend_Translate’)->_(‘This activity item has been removed.’);

$this->view->smoothboxClose = true;

return $this->render(‘deletedItem’);

The status of the operation is set to true and passed to the view to indicate success, along with the success message to display. Also a flag (smoothboxClose) is set to true to tell the view to close the smoothbox. Finally the script renders “deletedItem.tpl”

I’ll break up deletedItem.tpl into 3 parts.

Part 1:

<script type=”text/javascript”>

parent.$(‘activity-item-<?php echo $this->action_id ?>’).destroy();

 

To further simulate the ajax request, after the activity item has been deleted it should be removed from the page. The above line simply does that by getting the HTML element containing that activity using its Id and removes it. The above translates to parent.$(‘activity-item-126′).destroy();

Part 2:

setTimeout(function()

{

parent.Smoothbox.close();

}, <?php echo ( $this->smoothboxClose === true ? 1000 : $this->smoothboxClose ); ?>);

</script>

parent.Smoothbox.close() is invoked after 1000 ms only if smoothboxClose passed from deleteAction was set to true. That is to allow enough time for the user to read the success message before hiding it.

And finally:

<div class=”global_form_popup_message”>

<?php echo $this->message ?>

</div>

This shows the success message passed from deleteAction().

Here is another drawing for you

deleteAction

About these ads

11 Comments

  1. Great posts keep them comming

  2. Hello
    First, Great Post!!

    I have a question, how can i avoid an CSRF in SE4?

    • Or does exists a prebuilt token?

  3. Hi tgalal
    I have one problem i want to display sign in and sign up form in pop up that i do using smooth box successfully

    but problem is after login success the member home page is also display in pop up. so pop up not close after login success

    how we can close login pop up

    please Help me.

  4. If you want to change the size of modal window, how do you do that? Using width and height in the href value produces scroll bars. Any advice? Thanks in advance! :)

  5. Hello, I have an issue with these windows only on my computer and while only using firefox and safari. In Chrome it works.
    I use the share button anywhere on the site and my button doesn’t light up for the facebook and twitter icons. I can’t figure out why this doesn’t work on firefox and safari. It used to work on firefox but now it doesn’t. I’m trying to figure out what the problem is on my computer. Any ideas? I’ve reset everything in my bowsers ect ect. It’s something with these type Modal windows that create errors or don’t allow stuff to be done.

  6. Hi, i would to know that is it possible to display Smoothbox if i redirect/render/_forward to a page?? What i got now is the render page will overlap the previous page instead of float on top of it

  7. Thank you for this article. It was very helpful to me to find out how smoothbox works.

  8. Hi Team,

    When im loading data from ajax and within this data i have smoothbox link but its not loading in iframe instead its opening in new page without popup.

    Can you please suggest which css/js i need to load when populating data from ajax call.

  9. When im loading data from ajax and within this data i have smoothbox link but its not loading in iframe instead its opening in new page without popup.

    Im struggled alot for this function..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 49 other followers

%d bloggers like this: