Skip to content
This repository has been archived by the owner on Jul 27, 2023. It is now read-only.

calendar not working when used with autocomplete #10

Closed
cornernote opened this issue Apr 2, 2015 · 8 comments
Closed

calendar not working when used with autocomplete #10

cornernote opened this issue Apr 2, 2015 · 8 comments

Comments

@cornernote
Copy link

The following code results in the calendar always being displayed, and not working. There is no JS error in console.

<?php
use dosamigos\datepicker\DatePicker;
use yii\jui\AutoComplete;
?>
    <?php $form = ActiveForm::begin(['layout' => 'horizontal', 'enableClientValidation' => false]); ?>
            <?= $form->field($model, 'due')->widget(DatePicker::className(), [
                'clientOptions' => [
                    'autoclose' => true,
                    'format' => 'yyyy-mm-dd',
                ]
            ]) ?>
            <?= $form->field($model, 'country')->widget(AutoComplete::classname(), [
                'clientOptions' => [
                    'source' => ['USA', 'RUS'],
                ],
            ]) ?>
    <?php ActiveForm::end(); ?>
@cornernote
Copy link
Author

interestingly, if I put the autocomplete field first it works correctly

@tonydspaniard
Copy link
Member

@cornernote seems that there is an issue with the js files order.

@cornernote
Copy link
Author

I guess as a hacky fix I can output buff a fake autocomplete field, then destroy the output.

Would be great if there was a cleaner way to solve it.

@tonydspaniard
Copy link
Member

Let me know your findings if we can improve the library. Thanks

@cornernote
Copy link
Author

haven't had a chance to get back to it.. i'll be working on it again later in the week.

@cornernote
Copy link
Author

I saved the output of the working version and a non-working version, then twiddled the broken version.

The thing that makes it work is changing this:

<script src="/assets/914ad999/js/bootstrap.js"></script>
<script src="/assets/2e647d59/js/bootstrap-datepicker.js"></script>
<script src="/assets/a72cdb8f/jquery-ui.js"></script>

To this:

<script src="/assets/a72cdb8f/jquery-ui.js"></script>
<script src="/assets/914ad999/js/bootstrap.js"></script>
<script src="/assets/2e647d59/js/bootstrap-datepicker.js"></script>

jquery-ui has to be output before bootstrap.

That's probably tricky to resolve in this lib, because the calendar widget doesn't use jquery-ui. It's only used by the auto-complete widget.

I think the best option for me is the hacky output buff I suggested above. If you have a better way to do it I am all ears. If you can think of a way to make the library do it internally then that would be awesome.

@tonydspaniard
Copy link
Member

I would create an Asset Bundle and set those that register those libraries turned off, that way I can ensure the order.

@clissmancamacho
Copy link

Hi, how are you? I have the same problem. How i can resolve it?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants