This is what I have done:
I created a template called
overlayupdate_form with the form that the user will submit the data. The form has one input, and the user
must input a even number. (not odd). This form takes an action called
actionTest that I created extending the XenForo_ControllerPublic_Member (just for tests).
The template:
Rich (BB code):
<xen:require js="js/OverlayUpdate/front.js" />
<form action="{xen:link members/test, $user}" method="post" class="xenForm formOverlay UpdateOverlay">
<dl class="pairs">
<dt>Enter a par number:</dt>
<dd><input type="text" name="number" /></dd>
</dl>
<dl class="ctrlUnit submitUnit">
<dt></dt>
<dd><input type="submit" value="Ok!" class="button primary" /></dd>
</dl>
<input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
<input type="hidden" name="_xfConfirm" value="1" />
</form>
This action filters a number (in that form) and return
true if is even, or
false if is odd. This action has two
responseView. One when opening the overlay to show the form and other, if the request is a confirmed post, to filter the number and verify.
This is the action:
PHP:
<?php
class OverlayUpdate_Member extends XFCP_OverlayUpdate_Member
{
public function actionTest()
{
if ($this->isConfirmedPost())
{
$number = $this->_input->filterSingle('number', XenForo_Input::INT);
$resul = ($number % 2) ? false : true;
return $this->responseView('OverlayUpdate_View', 'overlayupdate_form', array('result' => $resul));
}
else
{
return $this->responseView('XenForo_ViewPublic_Base', 'overlayupdate_form', array('user' => XenForo_Visitor::getInstance()));
}
}
}
?>
After the action, I have created a ViewClass (extending XenForo_ViewPublic_Base) which pass the parameter
result to the jquery (using a funcion renderJson)
PHP:
<?php
class OverlayUpdate_View extends XenForo_ViewPublic_Base
{
public function renderJson()
{
$output = $this->_renderer->getDefaultOutputArray(get_class($this), $this->_params, $this->_templateName);
$output['result'] = $this->_params['result'];
return XenForo_ViewRenderer_Json::jsonEncodeForOutput($output);
}
}
?>
This form has a custom class called
UpdateOverlay. This class is used to manipulate the data of the form in a jquery file.
After that, I created a link (
a href), with the class 'OverlayTrigger', so we click in this link and the overlay is opened.
All set, I wrote jquery file with registering a element called 'UpdatedOverlay' (remember, this is the class of the form). There is:
Code:
/** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
XenForo.UpdateOverlay = function($form)
{
var $overlay = $form.closest('.xenOverlay');
if ($overlay.length)
{
$form.submit(function(e)
{
e.preventDefault();
//Make the request
XenForo.ajax(
$form.attr('action'),
$form.serializeArray(),
function(ajaxData, textStatus)
{
if (XenForo.hasResponseError(ajaxData))
{
return false;
}
if (ajaxData.result == true)
{
//do something
}
else
{
//error!
$('input[name=number]').css('background', 'red');
}
}
);
});
}
};
XenForo.register('.UpdateOverlay', 'XenForo.UpdateOverlay');
}
(jQuery, this, document);
I put the overlay in a variable:
Code:
var $overlay = $form.closest('.xenOverlay');
On the form submit
prevent the default action of changing the page:
Make the request to the action that was set to the form
Remember of the parameter
result?? I check it in here to see if it is true (even) or false (odd)
Code:
if (ajaxData.result == true)
{
}
else
{
$('input[name=number]').css('background', 'red');
}
If the
result is true, do something. If is not, take the input that the user filled with the wrong number and set the background to red, so he will know that he have to change it.