Page 1 of 1

[jQuery] Inserting fields dependant upon select

Posted: Thu Apr 05, 2007 12:35 pm
by Luke
I'm trying to use jQuery to insert some fields when the user selects a certain item from a <select> menu. I'm using php to render the html into the html() function. Is there a better way to do this? This one only has one field, but the other selections may have up to 10 or more

Code: Select all

		/**
                 * This removes the need for a multi-page form by using javascript
                 * to select the appropriate fields
                 */
                $('#event_recurring_type').change(function(){
                    var recurring_type = $(this).attr('value');
                    switch (recurring_type)
                    {
                        case 'daily':
                            /* remember not to use double quotes (escape them) in templates or it will screw up the javascript */
                            $('#recurring_type_selection')
                                .hide()
                                .html('<?php echo $this->render('event/recurring/daily.tpl.php'); ?>')
                                .fadeIn('fast');
                            
                            break;
                    }
                });
event/recurring/daily.tpl.php
(this has to be all placed on one line so I don't get an "Undetermined string literal" error

Code: Select all

<fieldset> <legend>Daily Recurrence</legend> <div><label for="every">Every:</label> <input type="text" name="every" id="every" class="text" value="" /></div></fieldset>
EDIT: One thing I do like about this solution is that it allows me to reuse the daily.tpl.php file for the users who DO NOT have javascript enabled (I'll show this part of the form to users after the submit the first form)

Posted: Thu Apr 05, 2007 1:04 pm
by Kieran Huggins
while that certainly works, wouldn't this be an ideal place for ajax?

The jQuery load() function jumps to mind..

Posted: Thu Apr 05, 2007 1:07 pm
by Luke
why would it be ideal for ajax?

EDIT: Well let me look into load() and then I'll come back and answer my own question.

Posted: Thu Apr 05, 2007 1:20 pm
by Kieran Huggins
now with a better understanding of your context, I think you're likely doing it the right way.

Often I've seen people load the HTML into hidden DIVs and hide/show them, but that would also create form result clutter.

The only thing I would suggest is adding a method to the end that pre-populates the new form fields based on known values. If they make an event for Tuesday the 3rd and select "monthly" you could pre-populate the fields "the [3rd] of every month" or "the [first] [Tuesday] of every month". That would go a long way towards making happy users.

Posted: Thu Apr 05, 2007 1:30 pm
by Luke
I've already changed it to use the load() function and I like it better because I can put all of the controller logic into a controller this way:

Code: Select all

				/**
                 * This removes the need for a multi-page form by using javascript
                 * to select the appropriate fields
                 */
                $('#event_recurring_type').change(function(){
                
                    var recurring_type = $(this).attr('value');
                    var start_date = $("#event_start_date").attr('value');
                    $('#recurring_type_selection').hide()

                    switch (recurring_type)
                    {
                        case 'daily':
                            $('#recurring_type_selection').load('<?php echo $this->BASEURL ?>/recurring/daily', {"start_date":start_date}, function(){$(this).fadeIn('fast')});
                            break;
                        case 'monthly':
                            $('#recurring_type_selection').load('<?php echo $this->BASEURL ?>/recurring/monthly', {"start_date":start_date}, function(){$(this).fadeIn('fast')});
                            break;
                    }
                    //type_selection_html += '<?php echo $this->removeBreaks($this->render('event/recurring/until.tpl.php')); ?>';
                        
                });

Code: Select all

<?php
class RecurringController extends Cal2_Controller_Action
{
    public function dailyAction()
    {
        if (!$this->_checkStart()) return;
        $this->getResponse()->setBody(
            $this->_view->render('event/recurring/daily.tpl.php')
        );
    }
    
    public function monthlyAction()
    {
        if (!$this->_checkStart()) return;
        $this->getResponse()->setBody(
            $this->_view->render('event/recurring/monthly.tpl.php')
        );
    }
    
    protected function _checkStart()
    {
        $date = $_POST['start_date'];
        if ($date == "undefined")
        {
            $this->getResponse()->setBody(
                $this->_view->render('event/recurring/select_start_date.tpl.php')
            );
            return false;
        }

        // Now check the date value to get the 3rd / first tuesday values to return to the form view

        return true;
    }
}
?>
EDIT: The only thing that I don't like about it is the fact that it takes a little bit longer to load the fields. Oh well

Posted: Thu Apr 05, 2007 1:43 pm
by Luke
Another quick jQuery question. How would I reset a select element? I'd like a user to be able to click a button that resets the select to the default selection.

Posted: Thu Apr 05, 2007 2:10 pm
by Kieran Huggins
not a jquery function, but it works:

Code: Select all

$('#selectId option').each(function(){
	this.selected=this.defaultSelected;
});
caveat: This relies on having the selected="selected" attribute set - it won't reset a select to the first position. If you want that functionality, it's easy enough to add by simply resetting the select to the first option before the each()