Do not require users to load JS first

[savingschampion]

Use something like the following to defer execution of your plugin code, until Jquery is available.

function defer(method) {
    if (window.$)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

[asaglimbeni]

Why do you need this ?
It is enough to put the code in jquery ready method. Could you explain better your use case?
Thank you

[savingschampion]

Your form widget initializes your plugin inline in the DOM, via a snippet like the following

$('input_id').datepicker()

This is an issue as we are loading all JS, including Jquery, at the bottom of the page.

With the above alteration, you can allow the form to initialize without requiring Jquery being loaded at the top of the page.

[bardo]

Same issue here, a fix would be great!
@savingschampion why not creating a quick pull request to speed things up? :)

[asaglimbeni]

I'm working to fix this issue! I hope to push the new version for the end of the week.
Thank you guys for your support and your reports.

[melwil]

Glad to see this has already been brought up, having the same issue!

[melwil]

Actually, this problem goes a bit deeper than jQuery alone, I also need put this inside the javascript loading in the bottom of the page: {{ form.media.js }}

Right now it needs to be declared before the form is printed, or I get the following error:

Uncaught TypeError: undefined is not a function(index):268 (anonymous function)

[asaglimbeni]

Hi Guys,
I pushed the fix to the develop branch, could you install it and confirm me that it works properly?
If everything goes well I can deploy a new version of the package to pypi.

[melwil]

bcec8a2 solves both problems presented in this issue; jQuery as well as the other js for this widget.

[savingschampion]

I am unable to test it at this time, we're currently doing QA for an upcoming release which is taking all my time at the moment.

[melwil]

@savingschampion Kind prod here, I'm just waiting for a new version of this to get one of my branches into testing :-)

[savingschampion]

No dice. I get the error that $ is not defined, because Jquery is being loaded at the bottom of the body.

<div id="id_alert_datetime" class="input-group date"><input class="datetimewidget form-control" id="id_alert_datetime" name="alert_datetime" readonly="" type="text" /> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span></div>
<script type="text/javascript">
   $(function() {
       $("#id_alert_datetime").datetimepicker({format: 'dd/mm/yyyy hh:ii',
           pickerPosition: 'bottom-left',
           autoclose: true}).find('input').addClass("form-control");
   });
</script>

You can't use $() to wait for jQuery to load because jQuery itself defines $, which hasn't loaded yet.

A bit of a chicken and the egg problem. To solve it you need to use vanilla JS to wait for the $ variable to become defined.

You probably want to try something more like the following.

function init_date_picker(){
       $("#id_alert_datetime").datetimepicker({format: 'dd/mm/yyyy hh:ii',
       pickerPosition: 'bottom-left',
       autoclose: true}).find('input').addClass("form-control");
}

function wait_for_jquery() {
    if (window.$){
        //possibly some other JQuery checks to make sure that everything is loaded here
        init_date_picker();
    } else {
        setTimeout(wait_for_jquery, 50);
    }
}
wait_for_jquery();

[siolag161]

I was trying to fix this in here #72. Personally I move all the js code out of python, admittedly it's not DRY though ( two places for input_format for example`)

[sokser]

Same issue here.

[tylerecouture]

Just giving this widget a try and looks awesome so far, thank you! However, it would be really nice to have this fix!

[strix]

I would also benefit from this fix (although it has been 10 months since the issue was submitted and I'm starting to lose hope).

[rafaelverger]

@asaglimbeni I thought it was fixed already... why it wasn't pushed to pypi?

[Atorich]

It still uses jquery in HTML in the form (even upstream from master). So it is not fixed, yep?

[joejean]

I'm still facing this issue. Any fixes (even temporary) please?

[rafaelverger]

@joejean get the code from @siolag161 fork: https://github.com/siolag161/django-datetime-widget
He opened a PR (#72) to here but wasn't merged till now...

[joejean]

Thanks @rafaelverger

[ssokolow]

What you really want is to do all your JS in an external file with the site-specific stuff in data- attributes.

That way, the site developer has the option of setting a Content Security Policy which instructs the browser to disallow inline JavaScript entirely to limit the potential for XSS. (jQuery itself requires inline CSS, which can also be a vector in some circumstances).

[ScottEAdams]

@ssokolow the above pull request does exactly that.

[ScottEAdams]

If all you need is a datepicker (without time functionality) I created https://github.com/RDXT/django-bootstrap3-datepicker which uses only data attributes with https://github.com/uxsolutions/bootstrap-datepicker