Search code examples
jqueryjquery-ui-datepickerjquery-load

date picker jquery plugin not working in another page via jquery load method

I have two html main.html and a.html

<html>
<head>
<title> main.html   </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
     $("#y").click(function()
     {
       $('#y1').load('a.html');
     });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y1">frame   </div>
</body>
</html>

a.html

<html>
<head>
<title>a.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date").datepicker();
      $("#y2").on("click",function(){
          alert("clicked data in a.html");
      });
});
</script>
</head>
<body>
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
</body>
</html>

when I open a.html file the datepicker works good, but open main.html file click 'link1' to load the a.html into main.html datepicker fails and I get a error message in firefox error console as 

>Error: TypeError: $(...).datepicker is not a function
>Source File: http://code.jquery.com/jquery-latest.js?_=1362478481277
>Line: 605

[EDITIED to improve my question below]

now my main.html

<html>
<head>
<title> main.html   </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
     $("#y").click(function()
     {
       $('#y1').load('a.html');
     });
     $("#y4").click(function()
     {
       $('#y1').load('b.html');
     });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y4">link2    </div>
  <div id="y1">frame   </div>
</body>
</html>

a.html

<html>
<head>
<title>a.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date").datepicker();
      $("#y2").on("click",function(){
          alert("clicked data in a.html");
      });
});
</script>
</head>
<body>
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
</body>
</html>

b.html

<html>
<head>
<title>b.html    </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
      $("#date1").datepicker();
      $("#y3").on("click",function(){
          alert("clicked data in b.html");
      });
});
</script>
</head>
<body>
  <div id="y3"> click here to get alert   </div>
  <input id="date1" type="text" />
</body>
</html>
Solution

  • Try to add

    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"/>

    to your main.html page

    Ok, read this tutorial: http://webtutsdepot.com/2009/06/13/ajax-page-loading-with-jquery/

    Important: When you load a page into another page the page you load will get the styles from the current page, this means that all you need to have in the page you want to load is what goes inside the tags.

    So you need to load all your script files in your main.html page and all you need in other pages is

    *edit Changed main.html and a.html to reflect your question, this sould solve your problems with script conflict

    main.html 

    <html>
<head>
<title> main.html   </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
<script>
$(document).ready(function() {
    $("#y").click(function()
    {
       $('#y1').load('a.html #calendar'
       , function() {
            $("#date").datepicker();
            $("#y2").on("click",function(){
                alert("clicked data in a.html");
            });
       });
    });

    $("#y4").click(function()
    {
       $('#y1').load('b.html #calendar'
       , function() {
            $("#date1").datepicker();
            $("#y3").on("click",function(){
                alert("clicked data in b.html");
            });
       });
    });
});
</script>
</head>
<body>
  <div id="y">link1    </div>
  <div id="y4">link2    </div>
  <div id="y1">frame   </div>
</body>
</html>

    a.html

    <html>
<head>
<title>a.html</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
  <div id='calendar'>   
  <div id="y2"> click here to get alert   </div>
  <input id="date" type="text" />
  </div>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
      $("#date").datepicker();

      $("#y2").on("click",function(){
      alert("clicked data in a.html");
      });
});
</script>