“Save” and “Save and Close” Buttons when Editing Articles in Joomla’s Frontend

A common issue on Joomla websites with frontend editing is that the behavior of the “Save” button on the frontend is different from the behavior of the “Save” button in the backend. The “Save” button in the backend saves the item and redirects back to the item’s page while the “Save” button on the frontend saves the item and redirects back to the listing page, which is the exact behavior of the “Save & Close” button in the backend.

This issue is particularly annoying when frontend authors/editors are writing long articles and are saving these articles frequently (they will get redirected back to the listing page, where they will need to find their article and then edit it again).

Luckily for you, our dear reader, we have a solution to this issue. With a simple trick, we were able to mimic the behavior of the backend “Save” and the “Save & Button” in a Joomla frontend. Here’s how we did it for a client of ours a few days ago:

• We copied the edit.php file which is located under the components/com_content/views/form/tmpl folder to the templates/[ourclienttemplate]/html/com_content/form folder.

• We then opened the edit.php file that we just created, and just before the following line…

  JFactory::getDocument()->addScriptDeclaration("

  …we added the following lines:

  $jinput = JFactory::getApplication()->input;
  $currentArticleID = $this->form->getData()->get('id');
  $editURL = JUri::root().'index.php?option=com_content&task=article.edit&a_id=' .$currentArticleID.'&return='.$jinput->get('return');

• In the same edit.php file, and just before the following line…

  if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))

  …we added the following lines:

  if (task == 'article.savestay'){
      var inputReturnURL = document.getElementById('returnurl');
      inputReturnURL .value = "";
      task = 'article.save';
  }

• Also in the file edit.php, we replaced the following line:

  echo JText::_('JSAVE')

  with:

  echo ('Save & Close')

• Finally, while still in the edit.php file, and immediately after…

  <div class="btn-toolbar">

  …we added the following lines:

  <div class="btn-group">
  	<button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('article.savestay')">
  		<span class="icon-ok"></span><?php echo JText::_('JSAVE') ?>
  	</button>
  </div>

• We saved the article and we uploaded it back.

• We tested frontend editing and everything worked as it should! The “Save” button redirected back to the the same article, the “Save & Close button (as well as the “Cancel” button) redirected back to the listing page.

There is one caveat in the above trick: it only works for existing articles. If you are working on a new article from the frontend, then you must hide the “Save” button (if $currentArticleID is empty, then this means that we are creating a new article, which means that we must hide the “Save” button).

We hope that you found this post useful. If you need help with the implementation, then you can always contact us: we are always available, we are always ready, and we will not charge you much!