• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Bit confused about javascript/jquery

Maximilian

Maximilian

Lifer
Im using this datepicker:

https://github.com/eternicode/bootstrap-datepicker/blob/master/docs/events.rst

Its really good, I want things to happen when the datepickers date is changed so I put in this code for when the datepickers changeDate event fires:

Code: 
<script>
                $('#aDatepicker').datepicker().on('changeDate', function () {
                    var newDate = $("#aDatepicker").datepicker("getDate");
                    currentDate = newDate;
                });   
                </script>

It works great but it only works if its placed after the datepicker in the HTML document. I get that I cant mess with elements that haven't been created/loaded yet but surely the datepicker must be loaded in order for a changeDate event to be fired? Why does that code not work if placed in the <head> tags before the datepicker declaration?

Thats the datepicker declaration in case its relevant:

Code: 
<div class="input-group date" id="aDatepicker">
                                            <input type="text" class="form-control" id="aDatepickerTextBox"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                        </div>
 
Maximilian said:
It works great but it only works if its placed after the datepicker in the HTML document. I get that I cant mess with elements that haven't been created/loaded yet but surely the datepicker must be loaded in order for a changeDate event to be fired? Why does that code not work if placed in the <head> tags before the datepicker declaration?
Click to expand...

The relevant part is not the "changeDate" but the $('#aDatepicker'). The HTML has to be fully parsed before all the DOM objects exist. Without the DOM that element can't be found.

The .ready() function waits to run code until the full DOM exists. (And apparently an alias of it is to just wrap stuff in $(...).) If you want your code in your <head> I suggest you try that.
 
Beautiful! Thanks, works a treat. Okay so generally things wont work until the DOM is loaded, gotcha!

Any thoughts on using external javascript files to store scripts vs putting them in <script> tags?
 
yes, use external files and import them! it's wwwwaaaaaayyyyyy cleaner!

and in general, anything with jquery doing $(<selector>) is trying to grab a dom element in the page, so if it isn't in the page, you won't be able to get it.

if you use chrome, you can play around with it in the console if you have jquery loaded which is kinda neat and a good way to be sure that items you think are in the dom, are in the dom. it helps when you start writing large web apps.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top