CODEWITHSUNDEEP
javascriptjqueryhtmlwebslider
Jonny Flowers
Jonny Flowers

Reputation: 631

Run Javascript within lightSlider

I am trying to place a jQuery UI date picker within a lightSlider item. However I cannot seem to figure out how I can actually get Javascript to execute within the slider based on its contents. The date picker is just one example of what I am trying to achieve.

The code I have so far is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5/CSS3 Modal</title>
    <!-- Demo Styles -->
    <link href="css/demo.css" rel="stylesheet">
    <!-- Modal Styles -->
    <link href="css/modal.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/lightSlider.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/jquery.lightSlider.js"></script>
</head>

<body>
    <div class="container">
        <p><a href="#modal" class="btn go">Date Range</a></p>
    </div>
    <div id="modal">
        <div class="modal-content">
            <div class="header">
                <h2>Select Date Range</h2>
            </div>
            <div>
                <ul id="lightSlider">
                    <li>
                        <h3>Start Date</h3>
                        Date: <div id="datepicker"></div>
                    </li>
                    <li>
                        <h3>End Date</h3>
                        <script>document.write("Calendar in here");</script>
                    </li>
                </ul>
            </div>
            <div class="cf footer">
                <a href="#" class="btn">Close</a>
            </div>
        </div>
        <div class="overlay"></div>
    </div>

    <script type="text/javascript">
        $(document).ready(function Slide() {
            slider = $("#lightSlider").lightSlider({
                mode:'fade',
                minSlide:1,
                pager:true,
            });

            //Go to 1st Slide
            slider.goToSlide(0);
        });
        $(lightSlider).ready(function() {
            $( "#datepicker" ).datepicker();
        });
    </script>

</body>
</html>

This code does not display the date picker and returns the following in the console.

[Error] TypeError: 'undefined' is not a function (evaluating '$( "#datepicker" ).datepicker()')
    (anonymous function) (localhost, line 64)
    j (jquery.min.js, line 2)
    fireWith (jquery.min.js, line 2)
    ready (jquery.min.js, line 2)
    K (jquery.min.js, line 2)

I thought using $(lightSlider).ready(function() would make the call wait for the light slider to run before executing the date picker.

Any help or advice on where I am going wrong would be much appreciated.

Upvotes: 0

Views: 1439

Answers (1)

Ajay Kumar Ganesh
Ajay Kumar Ganesh

Reputation: 1852

Please include jquery-ui library.

from the error , its obvious that datepicker function is not defined as the js library is missing

Happy Jquerying!! :)

Upvotes: 5

Related Questions