1

Here i'm loaded the calendar field via jquery ajax. When i click the calendar button nothing happened. 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){
    }
});}

kindly help me to solve the calendar problem.

  • Are you getting any errors in your browser console? – Lodder Jun 26 '15 at 14:16
  • No errors in console. but if check the inspect element dose't exists calender.js link and native method it exists. – user1581939 Jun 26 '15 at 14:22
  • Just to confirm, you've wrapped your code inside the loadBatch() function, but how are you calling this function? – Lodder Jun 26 '15 at 14:53
  • The onclick button called loadbatch() function. Then call model.php file forming JHTML calendar manually. – user1581939 Jun 26 '15 at 14:58
2

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

1

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.

-1

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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.