JavaScript code not executing

Question

I have some jQuery code that is not being executed. The code block looks like

jQuery(document).ready(function() {
$('#Start').datepicker();
$('#End').datepicker();
$('#End').val('date');
$('#Start').val('start');
alert('hello');
});

but its not applying datepicker on the Start and End textboxes. Please note that jQuery and jQuery.ui files are added before this script. In this code block even the last line (alert) is not being executed.

I can see on error in Firefox console that reads uncaught exception: Invalid dimensions for plot, width = null, height = null but it does not tell me the location of the error.

What could be the problem? why this code is not running? How to debug this?

Edit 1: I have changed the code to following

jQuery(document).ready(function() {
        //$('#Start').datepicker();
        //$('#End').datepicker();
        //$('#End').val('date');
        //$('#Start').val('start');
        alert('hello inside');
    });
    alert("hello outside");

Now there are only two alerts (rest of lines commented) the alert outside ready function executes but one that is inside does not.

Based on the error, you probably have some other javascript code that is failing placed before this one. — adeneo, Dec 21 '12 at 19:57
have you looked in the javascript console to see if there is an error? — Dmitry B., Dec 21 '12 at 19:57
try using firebug's [https://addons.mozilla.org/en-US/firefox/addon/firebug/] console to see if it shows any error. — Amyth, Dec 21 '12 at 20:00
to debug, put alert('hello') to the top of the list and then see if it executes. if it does, then move it down step by step to see which function is causing the error. if it does not then most probably jquery library is not being properly included. — Amyth, Dec 21 '12 at 20:02
Are you using `canvas` — I've run into a similar error when I've had my `canvas` element set to `display:none` or `visibility: hidden`. — Foreign Object, Dec 21 '12 at 20:04
I am new to this project and haven't used canvas. can you tell me the js file names for canvas and I will search that in downloaded js list with the page — Muhammad Adeel Zahid, Dec 21 '12 at 20:09
I am already using firebug and I have included the error details in my question. There is only one error without the location (line no column no etc) — Muhammad Adeel Zahid, Dec 21 '12 at 20:11
Canvas is an HTML element ``. The element is usually accessed through `getElementById` It could be called anything...The variable `ctx` is a common way to set context. You could also do a search for `2d` or `3d`... Hope that helps — Foreign Object, Dec 21 '12 at 20:14
Are you sure jquery is being loaded correctly? If you take out all the datepicker code and *only* do an alert, does it get executed? Here's a fiddle with your code working correctly (at least for me) http://jsfiddle.net/N895K/2/ — CupawnTae, Dec 21 '12 at 20:26
I am damn sure that jquery and jquery.ui are both loaded correctly. In script tab of firebug when I write an expression `$('#End').datepicker()`, it attaches datepicker to the element — Muhammad Adeel Zahid, Dec 21 '12 at 20:31

score -1 · Answer 1 · answered Dec 21 '12 at 20:08

-1

With the datepicker, i'm not sure you can set string value after initializing the datepicker.

Try removing those two lines :

$('#End').val('date');
$('#Start').val('start');

answered Dec 21 '12 at 20:08

GregM

2,634
3
22
37

I did that after failing to attach the datepicker. it was just to check if code is executing and as a lost resort I inserted alert in the code but nothing executed. – Muhammad Adeel Zahid Dec 21 '12 at 20:10
Did you #end and #start element are node ? – GregM Dec 21 '12 at 20:13

score -1 · Answer 2 · edited May 23 '17 at 12:04

I never used Datepicker but I assume if you comment these lines out it will work:

$('#End').val('date');
$('#Start').val('start');

Most of jquery is asynchronous, ie. the two lines above will be executed before a date has been picked by the user (so values are missing). So you need to include a callback function like this (quick google)

jQuery datepicker, onSelect won't work

    $('#End').datepicker( {
        onSelect: function(date) {
            alert(date);        }
    });

Edit:

This works for me on jsfiddle (http://jsfiddle.net/q6UFc/):

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<input type="text" id="end" name="end" />

Javascript:

$(document).ready(function () {          
$('#end').datepicker( {
            onSelect: function(date) {
                alert(date);        }
        });

})

This works for me on jsfiddle: http://jsfiddle.net/q6UFc/ If it doesn't work I'll assume adaneo was right and some other javascript code is failing before this. Edit: Can you show us an example? — Fels, Dec 21 '12 at 20:47

JavaScript code not executing

2 Answers2

Edit: