Geek Answers Handbook

Jquery data collector not working on another page using 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 the a.html file, the datepicker function works well, but open the main.html file by clicking 'link1' to load a.html in main.html datepicker fails and I get an error message in the error firefox 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>
+4
source share
2 answers

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 main.html page

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

Important: when loading a page to another page, the loaded page will receive styles from the current page, which means that all of you need to have the tags on the page you want to load.

So, you need to load all your script files on the main.html page and everything you need on other pages,

* change Changed main.html and a.html to reflect your question, this may 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>
+1
source

I had the same problem that was solved using the previous version of "jQuery-UI". In my case, I use versions 1.9.2 and 1.10.3 for "jQuery" version 1.10.1. Know the reason, but I think that the latest versions will bring some compactness problems, so I decided to use it always back to the past. I hope it will be useful

0
source

More articles:


All Articles