tiny carousel not working with ajax
I am trying to make this to work by loading other data from external file.
Unfortunately, the buttons and the carousel don't slide, only when loading data from ajax.
How can I get this to work?
Notice: the buttons and numbers don't work.
Here is the ajax:
- $("#city").change(function(){
- var city=$("#city").val();
- $.ajax({
- type:"post",
- url:"../../data/image.php",
- data:"city="+city,
- success:function(data){
- $("#slider1").html(data);
- }
- });
- });
And here is how I get the data: (image.php file)
- $city=$_POST["city"];
- $result=mysql_query("SELECT * FROM images WHERE city='$city' ");
- echo '<a href="#" class="buttons prev link">left</a>
- <script>
- // Popup window code
- function newPopup(url) {
- popupWindow = window.open(
- url,"popUpWindow","height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes");
- }
- </script><div class="viewport">
- <ul class="overview">';
- while($fetch = mysql_fetch_array($result))
- {
- echo '<a href="javascript:newPopup(\'sample.php\');" class = "link"><li><img src="../../upload/image/'.$fetch['image'].'" width="400" height="200"></li></a>';
- }
- echo '</ul>
- </div>
- <a href="#" class="buttons next link">right</a>
- <ul class="pager">
- <li><a rel="0" class="pagenum link" href="#">1</a></li>
- <li><a rel="1" class="pagenum link" href="#">2</a></li>
- <li><a rel="2" class="pagenum link" href="#">3</a></li>
- <li><a rel="3" class="pagenum link" href="#">4</a></li>
- </ul>';
This file is incorporated inside another file. Ajax makes it possible that the data is sent to #slider1 div to the other file. When copy pasting this code to the other file, it works perfectly.