Joomla calendar popup does not appear when loaded by ajax

Question

I'm loading a calendar field via jquery ajax.

When I click the calendar button nothing happens. The calendar popup is not showing.

in model.php

$tr = "<td>" . JHTML::_('calendar', '2015-09-09', 'arr_stubat_join_date[]', 'stubat_join_date_' . $value->batch_id,'%Y-%m-%d', array('size'=>'15', 'maxlength'=>'15')) . "</td>";
return $tr;

jQuery Ajax

function loadBatch(){
    jQuery('#task').val('profile.getbatch');
    var dataString = jQuery("#profile-form").serialize();

    jQuery('#ajax_loader_image').show();
    jQuery.ajax({
        type: 'POST',
        url: 'index.php',
        data: dataString,
        cache: false,
        success: function(result){
            jQuery('#batch_container').append(result);
        },
        error: function(result){
        }
    });
}

Answer 1

Your model successfully returns the HTML produced by the JHtml class call. But that method also loads some JavaScript code into the document head. Since you don't render the full page, that JavaScript isn't returned and never ends up in the browser.

So while you have the HTML there, you miss the JavaScript part and thus nothing will work.

You would have to manually add the needed JavaScript code(s) to the page.

The same goes also for the CSS styling

Answer 2

Bakual's answer actually should be accepted, but I just want to show the example of JS code that should be added to the page:

<script>
    jQuery(document).ready(function($) {
        Calendar.setup({
        // Id of the input field
        inputField: '<?php echo $field->id; ?>',
        // Format of the input field
        ifFormat: '<?php echo $field->format; ?>',
        // Trigger for the calendar (button ID)
        button: '<?php echo $field->id; ?>_img',
        // Alignment (defaults to "Bl")
        align: 'Tl',
        singleClick: true,
        firstDay: '<?php echo JFactory::getLanguage()->getFirstDay(); ?>'
        });
    });
</script>

$field here is a JFormField object.

Answer 3

When you have multiple calendar controls on a page the above code has to be modified by adding a unique identifier to each control.

In my case, simply add a key to each control.

<script type="text/javascript">
<!--

    jQuery(document).ready(function($) {
        Calendar.setup({
        // Id of the input field
        inputField: 'jform_alert_date_<?php echo $this->member_key; ?>',
        // Format of the input field
        ifFormat: '%Y-%m-%d',
        // Trigger for the calendar (button ID)
        button: 'jform_alert_date_btn_<?php echo $this->member_key; ?>',
        // Alignment (defaults to "Bl")
        align: 'Tl',
        singleClick: true,
        firstDay: '0'
        });
    });
//-->
</script>

To render the control simply find and replace any placeholder with the key

<div class="control-group">         
                <?php if(strpos($field->id, "clubregPlaceholder")){ 
                    ob_start() ; ?>     
                    <div class="control-label"><?php echo $field->label; ?></div>       
                    <div class="controls"><?php echo $field->input; ?></div>                
                <?php   $dInput  = ob_get_contents(); 
                        ob_end_clean();
                        echo str_replace("clubregPlaceholder", $this->member_key, $dInput);                     
                     }else{?>
                     <div class="control-label"><?php echo $field->label; ?></div>
                    <div class="controls"><?php echo $field->input; ?></div>
                <?php } ?>                  
            </div>  

Here is the original xml definition

<field name="alert_date_clubregPlaceholder" type="calendar" required="true"
            label="COM_CLUBREG_ALERT_DATE" description="COM_CLUBREG_ALERT_DATE_DESC"
            class="inputbox input-small"   size="10" format="%Y-%m-%d" />