I have almost given up but thought I would post here in a last attempt. I am pretty new to jquery and I am having an issue. I need to use the same carousel with three different json queries on the same page. I tried putting them in divs with InnerHTML but only the first one shows and only in ie - nothing in mozilla. Really don't want to make three pages. Is this doable and if so how?
Here is the code:
<!--- all --->
<script>
$.getJSON("myurl.com",
function(data) {
$.each(data, function(i,item) {
var url = 'next.html?' + $.param({data: {image: item.image}});
$("#stuff").append("<li>"+item.image+"</li>");
});
});
</script>
<!--- one --->
<script>
$.getJSON("myurl1.com",
function(data) {
$.each(data, function(i,item) {
var url = 'next.html?' + $.param({data: {image: item.image}});
$("#stuff1").append("<li>"+item.image+"</li>");
});
});
</script>
<!--- two --->
<script>
$.getJSON("myurl2.com",
function(data) {
$.each(data, function(i,item) {
var url = 'next.html?' + $.param({data: {image: item.image}});
$("#stuff2").append("<li>"+item.image+"</li>");
});
});
</script>
<script language="JavaScript">
function changeContent() {
document.getElementById('stuffDiv').innerHTML="<div id='my-carousel' class='carousel'><ul><div id='stuff'></div></ul></div>";
}
function changeContent1() {
document.getElementById('stuffDiv').innerHTML="<div id='my-carousel' class='carousel'><ul><div id='stuff1'></div></ul></div>";
}
function changeContent2() {
document.getElementById('stuffDiv').innerHTML="<div id='my-carousel' class='carousel'><ul><div id='stuff2'></div></ul></div>";
}
</script>
</head>
<body>
<div id="stuffDiv">
<div id="my-carousel" class="carousel">
<ul><div id="stuff"></div>
</ul>
</div>
</div>
<input type="button" value="One" onClick="changeContent1()">
<input type="button" value="Two" onClick="changeContent2()">
<input type="button" value="All" onClick="changeContent()">
</body>
</html>