Jquery datepicker

[Dinendal]

Hi everybody,

I have created a plugin to add a page in the user profile.
I have added an item in the profile menu to go to this page and it works fine.
When I click on this item my page is correctly loaded with my custom tpl where i write :

app.loadJQueryUI(function () {
	$( "#filter_date1" ).datepicker();
	$( "#filter_date2" ).datepicker();
});

This code define 2 fields with a calendar to allow user to filter informations on this page.
But if I reload the page pressing "F5" for example, there is this error :

Uncaught TypeError: app.loadJQueryUI is not a function

Could someone explain to me what's the difference in nodebb process, why this error occur and how to fix this please ?

Thank you.

Dinendal.

[Dinendal]

No clue ?
Do you need more details ?

[baris]

Seems like your code is getting executed before nodebb.min.js is loaded maybe wait for $(window).on('action:ajaxify.end', yourFunction);`

[Dinendal]

@baris
I tried your solution by doing this :

$(window).on('action:ajaxify.end', initDate());

function initDate(){
	app.loadJQueryUI(function () {
		$( "#filter_date1" ).datepicker();
		$( "#filter_date2" ).datepicker();
	});
}

and got this error on the $(window) line :

Uncaught ReferenceError: $ is not defined

[baris]

Hmm, try this instead

window.addEventListener('load', function () { 
    initDate();
});

[julian]

By the way, any particular reason why you don't just use input type="date"?

[Dinendal]

@baris It's working when I reload but it's not working on the initial load

@julian I'm using a text type because date type seems to be in DD/MM/YYYY format and I want to force MM/DD/YYYY format for international users (it's maybe depend of navigator language config). Also, the skin of date-picker looks better. I'm open to solutions for these 2 problems eventually (i'm going to do some research about that).

[baris]

Not sure what you mean by initial load, but if you want it to be executed as the user goes form page to page you can try this.

window.addEventListener('load', function () { 
    initDate();
    $(window).on('action:ajaxify.end', initDate);
});

[Dinendal]

@baris Didn't work. I will use type="date".
Thanks.