I have a main HTML file with all the jQuery and JavaScript files included in it. Now I have a table which has a expand/collapse functionality. This table is in a different HTML file.
I am trying to load the table in the main file. I was successful in loading the table in the main HTML file but the expand/collapse is not working only in IE6/IE7. This works fine in FF, Chrome, Safari and IE8.
local.js has the expand/collapse code
table.html is the html file which has only the table code and no JavaScript.
MAIN HTML:
<html>
<title>Main html</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" scr="localjs.js"></script>
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
});
</script>
</head>
<body>
<div id="ajaxtable"></div>
</body>
</html>
I can see the table gets loaded in the ajaxtable div but the expand/collapse is not working only in IE6.
As I mentioned in my comment above, you are loading localjs.js before the $('#ajaxtable') call. Attach the click handler after the table has been created and you should be fine...
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
$('table tr.heading').click(function(){ $(tr.alpha).slideToggle('slow'); });
});
</script>