Don’t forget your XID!

Having just spent over an hour trying to work out why my Module Control Panel forms weren’t submitting correctly, I thought I’d document the fix here (for my purposes and yours).

The error I was seeing was that when submitting my control panel form, rather than posting to my module function, the form was redirecting back to the ExpressionEngine control panel homepage. The reason for this? I had forgotten to include the XID secure form hidden post variable.

Wrong

<form method="post" action="<?=$base_url?>&amp;method=save">
...blah
<input type="submit" name="Save"/>
</form>

Right

<form method="post" action="<?=$base_url?>&amp;method=save">
<input type="hidden" name="XID" value="<?=XID_SECURE_HASH?>" />
blah
<input type="submit" name="Save"/>
</form>
19
Dec 2011
POSTED BY
POSTED IN ExpressionEngine
DISCUSSION 3 Comments
TAGS

Using jQueryUI features in your ExpressionEngine Control Panel

Sometimes you might find it useful to add some additional UI features to your EE control panel pages – luckily EE comes bundled with jQuery and jQueryUI so you can use any of the jQuery UI widgets without needing to bundle the scripts themselves. In this example, I’m going to add a nice Date Picker control to a form to make it easier for users to enter dates.

To begin with, we need to tell EE to include the necessary jquery UI features. jQueryUI is modular and has dependencies, so even though I only want to use the ‘datepicker’ feature, that in turn relies on the ‘core’ library so I need to include them both in the list of required modules. This code will need to be in your control panel function prior to loading your view

$this->EE->cp->add_js_script(
array('ui' => array(
'core', 'datepicker'
)
));

And then in your view, it’s the usual jQuery code to wire it up. In this case I’m going to declare that any input field with a class of “datepicker” should be converted into a jQueryUI datepicker field.

<script type="text/javascript">
    $(function() {

        $("input.datepicker").datepicker();

    });
</script>

<form method="post">

<input id="expiry_date" class="medium datepicker" type="text" name="expiry_date" value="<?=htmlspecialchars($expiry_date)?>" />

<input class="submit" type="submit" value="<?=lang('submit')?>" />

</form>

You can of course do the same for any other jQuery UI feature which means it’s easy to add great interactive features to your control panel forms

08
Dec 2011
POSTED BY
DISCUSSION 2 Comments
TAGS