Activate field functionality by loading js files after click

Hi

I have a field, date input field(Js calendar, datepicker field) already loaded, once I select “post date” the field becomes visible (style display:block;), also it is loading(adds to document header, appends) javascript files like jquery-1.8.3.min.js, bootstrap.min.js, bootstrap-datetimepicker.js. I don’t know when to load this:

$('.form_datetime').datetimepicker({
   
    weekStart: 1,
    todayBtn:  1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	forceParse: 0,
    showMeridian: 1
});

///////////////////////////////////// how it is appended once “post date” clicked, it’s done 3 times for every .js file/////////////////

var script = document.createElement(‘script’);
script.src = “jquery/jquery-1.8.3.min.js”;
script.onload = function () {
//do stuff with the script
};
document.head.appendChild(script);

How to load everything so that it is actually working and JavaScript is activated on the datepicker field. How to load everything and so activate the date field, whats the right order, I am confused a bit. I can probably use some sort timeout function to load first js file, after some time the other one, but it does not sound that good idea.

Maybe someone knows how it is done properly.

Thank you for any help

I got it working like this:

 $.getScript("jquery/jquery-1.8.3.min.js");
			 	 $.getScript("bootstrap/js/bootstrap.min.js");
				  $.getScript("bootstrap-datetimepicker.js");
ddtimer = setTimeout(function(){
	 $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
		
    }, 1000);

is there any better way?

Yep, if the scripts take longer than a second to download and execute you’ll get an error.


$.when(
    $.getScript("jquery/jquery-1.8.3.min.js"),
    $.getScript("bootstrap/js/bootstrap.min.js"),
    $.getScript("bootstrap-datetimepicker.js"),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function(){

    $('.form_datetime').datetimepicker({
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

});
2 Likes

Looks nice, thank you!

Anyways I get deferred is not a function error and getScript shows other errors, something doesn’t load correctly. so I worked around a new solution like this:

var script = document.createElement('script');
script.src = "js/bootstrap-datetimepicker.js";
script.onload = function () {
     $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: false,
		pick12HourFormat: false
    });
};
document.head.appendChild(script);

This shouldn’t give any errors and function should be set once all other files are loaded. I have no idea if this really is ideal solution, but I think so?

This still does not work all the time and browsers, needs some more work and thinking.

finally the right thing:

var script = document.createElement('script');
script.src = "jquery/jquery-1.8.3.min.js";
script.onload = function () {
var scriptr = document.createElement('script');
scriptr.src = "bootstrap/js/bootstrap.min.js";
document.head.appendChild(scriptr); //or something of the likes

var scripte = document.createElement('script');
scripte.src = "js/bootstrap-datetimepicker.js";
scripte.onload = function () {
     $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: false,
		pick12HourFormat: false
    });
};
document.head.appendChild(scripte); //or something of the likes
};
document.head.appendChild(script); //or something of the likes


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.