Search jQuery

jQuery Forum

Screen name:
urbancondor

urbancondor's Profile

1 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Using sortable() on AJAX-generated results
[0Replies]
- 01-Jan-2013 11:52 PM
- Forum: Using jQuery UI
Hi all,

I have been playing around with the sortable() functionality and I have got it working fine on static DB results, however I have noticed that I can't get it to work on AJAX-generated DB results. I feel it has something to do with how I call the sortable() function within the $(document).ready(function() however I am not 100% sure. I have searched this forum and other forums to see if anyone else has this problem but I haven't found anything similar yet, so here's my attempt to describe my problem:

I have a MySQL database called 'db_objects' which contains 1 table:
2. CREATE TABLE IF NOT EXISTS `tbl_objects` (
3. `obj_id` int(11) NOT NULL AUTO_INCREMENT,
4. `obj_name` varchar(50) DEFAULT NULL,
5. `obj_type` int(11) DEFAULT NULL,
6. PRIMARY KEY (`obj_id`)
7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
9. INSERT INTO `tbl_objects` (`obj_id`, `obj_name`, `obj_type`) VALUES
10. (1, 'Sam', 1),
11. (2, 'John', 1),
12. (3, 'Tom', 1),
13. (4, 'Bob', 1),
14. (5, 'Fluffy', 2),
15. (6, 'Paws', 2),
16. (7, 'Kitty', 2),
17. (8, 'Tibbles', 2),
18. (9, 'Mr. Meow', 2);
Now, I have a HTML page where I want to view the results on this table based on a drop-down box which filters by the obj_type column (1 = human names, 2 = feline names):
2. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><title>SORTABLE EXAMPLE</title>
3. <link rel='stylesheet' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
4. <script src='http://code.jquery.com/jquery-1.8.3.js'></script>
5. <script src='http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script>
6. <style>
7. div.div_container {
8. background:#0F6;
9. max-width:400px;
10. padding: 10px 10px 10px 10px;
11. }
12. h2.h2_med_green {
13. display: inline;
14. font-weight:normal;
15. color:#090;
16. font-size: 1.4em;
17. }
18. ul {
19. list-style: none;
20. padding: 0px 0px 0px 0px;
21. margin: 0px 0px 0px 0px;
22. }
23. li.li_sortable {
24. cursor: hand;
25. cursor: pointer;
26. border-bottom: 1px dotted #999999;
27. background:#DDDDDD;
28. height: 31px;
29. line-height: 31px;
30. }
31. </style>
32. <script type='text/javascript'>
33. $(document).ready(function() {
34. //CALL SORTABLE FUNCTIONALITY
35. $('#ul_sortable').sortable();
36. //CALL AJAX RESULTS
37. showAJAXResults(1);
38. });
39. </script>
40. </head>
41. <body>
42. <div class="div_container">
43. Click and drag each round to re-order.<br />Object Type: 
44. <select id="ajax_select_type">
45. <option value="1">Human</option>
46. <option value="2">Feline</option>
47. </select>
48. <div id="ajax_results"></div>
49. </div>
50. <script>
51. $("#ajax_select_type").change( function() {
52. //CALL AJAX DBR
53. showAJAXResults($(this).val());
54. });
55. function showAJAXResults(obj_type){
57. //HTTP REQUEST CODE
58. if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();} // code for IE7+, Firefox, Chrome, Opera, Safari
59. else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
60. xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("ajax_results").innerHTML=xmlhttp.responseText;}}
62. //ASSEMBLE THE PAGE CALL VALUE
63. var page_call_value = "ajax/ajax_page.php?t="+obj_type;
65. //CALL THE AJAX PAGE
66. xmlhttp.open("GET",page_call_value,true);
67. xmlhttp.send();
68. }
69. </script>
70. </body>
71. </html>
Finally, this page links to the following PHP page which is called via AJAX:
2. <?php
3. //DETERMINE INPUT VALUES
4. $object_type=$_GET["t"];
6. //CONNECT TO THE DATABASE
7. $con = mysql_connect("localhost","<USERNAME>","<PASSWORD>");
8. mysql_select_db("db_objects", $con);
10. //GET SQL QUERY
11. $q_db_result = "SELECT DISTINCT obj_id, obj_name, obj_type
12. FROM tbl_objects
13. WHERE obj_type = '".$object_type."'
14. ORDER BY obj_name";
16. //Execute the FULL_RESULT_QUERY QUERY
17. $sql_results = mysql_query($q_db_result) or die(mysql_error());
19. //TURN THE RESULTS RETRIEVED INTO AN ARRAY
20. $results_array = array();
21. while($row = mysql_fetch_assoc($sql_results)){
22. $results_array[$row['obj_id']]['obj_name'] = $row['obj_name'];
23. $results_array[$row['obj_id']]['obj_type'] = $row['obj_type'];
24. }
26. //ASSEMBLE THE RESULTS
27. if(sizeof($results_array)>0){
29. foreach($results_array as $obj_id => $result_details){
30. //DECLARE VARIABLES
31. $obj_name=$result_details['obj_name'];
32. $obj_type=$result_details['obj_type'];
34. $return_value .= "<li class='li_sortable' value='".$obj_id."'><h2 class='h2_med_green'>".$obj_name."</h2></li>\n";
35. }
37. //PUT THE UL TAGS AROUND THE HTML CODE
38. $return_value = "<ul id='ul_sortable'>\n".$return_value."</ul>\n";
40. //PUT THE RESULTS IN THE INNER CONTAINER DIV
41. $return_value = "<div id='ajax_results_ic' class='ajax_results_ic_2'>".$return_value."</div>";
43. }else{
44. $return_value = "NO RESULTS RETURNED";
45. }
47. //DISPLAY HTML CODE
48. echo $return_value;
50. //CLOSE DB CONNECTION
51. mysql_close($con);
52. ?>
Now, if you can get this working you will notice that the sortable() functionality does not work. As I mentioned before, I think it has something to do with the fact that the DB results are generated on-the-fly by AJAX, so trying to declare/call the sortable() functionality in the $(document).ready(function() won't work, i.e.
2. $(document).ready(function() {
3. //CALL SORTABLE FUNCTIONALITY
4. $('#ul_sortable').sortable();
5. });
I'm not sure how to get around this - does anyone have any suggestions?

Thanks so much in advance!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend