multiple jquery functions not working

Question

I'm writing a html page where there are 1 different jquery operations done.

Selecting dates from jquery datepicker plugin.
Getting data from database for auto complete.

And below is my code.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and
    JSON</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="header">
        <h3>Autocomplete in java web application using Jquery and JSON</h3>
    </div>
    <br />
    <br />
    <div class="search-container">
        <div class="ui-widget">
            <input type="text" id="search" name="search" class="search" />
        </div>
    </div>
    <p>
        Date: <input type="text" id="startDatePicker">
    </p>
    <p>
        Date: <input type="text" id="endDatePicker">
    </p>
    <div id="resultarea"></div>
</body>
</html>

autocompleter.js

$(document).ready(function() {
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
});

$(document).ready(function() {
    $(function() {
        $("#search").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : "Controller",
                    type : "GET",
                    data : {
                        term : request.term
                    },
                    dataType : "json",
                    success : function(data) {
                        response(data);
                    }
                });
            }
        });
    });
});

Here, fetching the data for displaying name is working fine, but the datepicker is not working as expected. But when i use the below code. (Removing the datepicker from and pasting it in index.html header's script tag). The datepicker is working fine.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and
    JSON</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<link rel="stylesheet" href="style.css">
<script>
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
</script>
</head>
<body>
    <div class="header">
        <h3>Autocomplete in java web application using Jquery and JSON</h3>
    </div>
    <br />
    <br />
    <div class="search-container">
        <div class="ui-widget">
            <input type="text" id="search" name="search" class="search" />
        </div>
    </div>
    <p>
        Date: <input type="text" id="startDatePicker">
    </p>
    <p>
        Date: <input type="text" id="endDatePicker">
    </p>
    <div id="resultarea"></div>
</body>
</html>

I'm unable to know where am I going wrong. And why the second code works and why doesn't the first.

One of my teachers suggested that making HTML in plain and linking all the css and js would be a good design approach, So I wanted to separate the js file from HTML.

Thanks

autocompleter.js has two $(document).ready(function(){}); where only one should exist for the entire document. This function is the equivalent of saying do this when the page loads, but you have it twice, that is a conflict of interest, you should only need one and put all your code in there — AGE
– AGE, Commented Dec 29, 2015 at 14:46
To add to my previous comment, as a rule of thumb: all your javascript/jquery <script> tags should be written after your <body> tag — AGE
– AGE, Commented Dec 29, 2015 at 14:47

David · Accepted Answer · 2015-12-29 14:49:02Z

3

Why are you wrapping this in two document.ready handlers?:

$(document).ready(function() {
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
});

Note the difference from the "working" version:

$(function() {
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();
});

When you do this in jQuery:

$(function () { /.../ });

It attaches that function to the document.ready event. Which means your working version says:

On document.ready, initialize the date pickers.

And your non-working version says:

On document.ready, attach another function to the document.ready handler which itself will initialize the date pickers.

Since document.ready only happens once, your second handler function will never execute.

You already have a "working" version, so use that:

$(function() {
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();
});

edited Dec 29, 2015 at 14:49

answered Dec 29, 2015 at 14:47

David

221k42 gold badges247 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AGE Over a year ago

for the sake of it, edit this good answer and add that they should always add their script tags after the <body>

David Over a year ago

@AGE: While that's often good advice, it's somewhat irrelevant to the question. For the code presented it really wouldn't make a difference.

AGE Over a year ago

Agreed, I just thought it would make a good addition to your answer

user3872094 Over a year ago

Thanks @AGE, this is helpful

Aramil Rey · Accepted Answer · 2015-12-29 14:59:27Z

1

Remove both of your upper level $(function() {}); inside your $(document).ready(); functions and it should work fine.

Both do the same "When doc is ready do this...", so its unnecessary to have them both and problematic to have them nested.

Your first piece of code isn't working because, your script waits for the document to be ready to execute a function that waits for the document to be ready, and that already happened.

The second one executes the code when the document is ready as usual.

edited Dec 29, 2015 at 14:59

answered Dec 29, 2015 at 14:47

Aramil Rey

3,4751 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

multiple jquery functions not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related