AJAX problem with html

AJAX problem with html

I am having a weird problem. I have a php script that is called by an ajax function that is not placing the html returned the way the data is. Here we go.
  1. <?php // getMemberVideos.php
  2. // Get schedule from the database
  3. include "main.php"; // This is for the id vars only
  4. $db=mysql_connect($hostname, $idname, $idpass) or die(mysql_errno($db).": ".mysql_error($db));
  5. mysql_select_db($sdbname);
  6. // Get the Schedule Table
  7. $sql = sprintf("SELECT category FROM schedule WHERE type = 'Video' ORDER BY category ASC");
  8. $q = mysql_query($sql);
  9. $catcnt = 0;
  10. $lastcat = "";
  11. $cats = $tm = $em = array();
  12. $sch = '<ul>';      // start the tablist
  13. $tbl = '<table width="98%" align="center">';
  14. while($em = mysql_fetch_array($q)) {
  15. $cat = $em['category'];
  16. if (strcmp($cat, $lastcat) != 0) {
  17. $lastcat = $cat;
  18. $cats[$catcnt++] = $cat;
  19. $sch .= '<li><a href="#'.$cat.'">'.$cat.'</a></li>';
  20. }
  21. }
  22. $sch .= "</ul>";            // end the tablist
  23. for ($i = 0; $i < $catcnt; $i++) {      // build the tabs div content
  24. $sch .= sprintf('<div id="%s">%s',$cats[$i], $tbl);
  25. $sql = sprintf("SELECT * FROM schedule WHERE type = 'Video' AND category = '%s' ORDER BY category, title ASC", $cats[$i]);
  26. $q0 = mysql_query($sql);
  27. while($tm = mysql_fetch_array($q0)) {
  28. $rmn = $tm['roomname'];
  29. $cid = $tm['custid'];
  30. $iml = $tm['picture'];
  31. $tit = $tm['title'];
  32. $dsc = $tm['description'];
  33. $cat = $tm['category'];
  34. $prv = trim($tm['privacy']);
  35. $ifm = explode('/',$iml); // Break up the filepath
  36. $ifc = count($ifm) -1; // Get the count -1
  37. $ifs = explode('.',$ifm[$ifc]);         // Break apart the filename
  38. $imt = sprintf("http://itssoezy.com/uploads/%s/%s.jpg", $cid, $ifs[0]);
  39. $r0 = sprintf('<tr><td align="left" width="30%%"><a href="users/broadcast/watcher.php?c=%s&s=%s&p=%s" title="%s"><img align="absmiddle" src="%s" alt="ise" width="64" height="64"><font size="2">&nbsp;%s</font></a></td>', $cid, $iml, $prv, $dsc, $imt, $tit);
  40. $r1 = '<td align="left" width="55%"><b><font size="2">'.$dsc.'</font></b></td>';
  41. $r2 = '<td align="left" width="15%"><b><font size="2">Privacy: '.$prv.'</font></b></td>';
  42. $sch .= $r0.$r1.$r2.'</tr>';
  43. }
  44. $sch .= '</table></div>';
  45. }
  46. echo json_encode($sch);
  47. ?>
This is called by the following jQuery function.
  1. function MemberVideos() {
  2. $.ajax({
  3. url: "iwon/support/getMemberVideos.php",
  4. type: "POST",
  5.         dataType: 'json',
  6. cache: false,
  7. async: false,
  8. success: function(html) {
  9. $("#membervideolist").html(html);
  10. }
  11. });
  12. }
In the <head> section I have the jQuery code
$(function() {
$("#cattabs").tabs();
});

In the <body> section I simply use a div to make the tabs
<div id="cattabs"><div id="membervideolist"></div></div>

I traced the network access in Chrome using the JS console and the returned html from the PHP file is:
  1. "<ul><li><a href=\"#Music\">Music<\/a><\/li><li><a href=\"#Travel\">Travel<\/a><\/li><li><a href=\"#Vehicles\">Vehicles<\/a><\/li><\/ul><div id=\"Music\"><table width=\"98%\" align=\"center\"><tr><td align=\"left\" width=\"30%\"><a href=\"users\/broadcast\/watcher.php?c=6285F178F928&s=uploads\/6285F178F928\/TakilmaRunWork.mp4&p=No\" title=\"This is 3-Gen practicing Takilma Run\"><img align=\"absmiddle\" src=\"http:\/\/itssoezy.com\/uploads\/6285F178F928\/TakilmaRunWork.jpg\" alt=\"ise\" width=\"64\" height=\"64\"><font size=\"2\">&nbsp;Takilma Run Work Video<\/font><\/a><\/td><td align=\"left\" width=\"55%\"><b><font size=\"2\">This is 3-Gen practicing Takilma Run<\/font><\/b><\/td><td align=\"left\" width=\"15%\"><b><font size=\"2\">Privacy: No<\/font><\/b><\/td><\/tr><\/table><\/div><div id=\"Travel\"><table width=\"98%\" align=\"center\"><tr><td align=\"left\" width=\"30%\"><a href=\"users\/broadcast\/watcher.php?c=TKLM33446655&s=uploads\/TKLM33446655\/IMG_0013.mp4&p=No\" title=\"The California Coast near Santa Barbara  From Amtrak coach\"><img align=\"absmiddle\" src=\"http:\/\/itssoezy.com\/uploads\/TKLM33446655\/IMG_0013.jpg\" alt=\"ise\" width=\"64\" height=\"64\"><font size=\"2\">&nbsp;Coast Starlight<\/font><\/a><\/td><td align=\"left\" width=\"55%\"><b><font size=\"2\">The California Coast near Santa Barbara  From Amtrak coach<\/font><\/b><\/td><td align=\"left\" width=\"15%\"><b><font size=\"2\">Privacy: No<\/font><\/b><\/td><\/tr><\/table><\/div><div id=\"Vehicles\"><table width=\"98%\" align=\"center\"><tr><td align=\"left\" width=\"30%\"><a href=\"users\/broadcast\/watcher.php?c=6285F178F928&s=uploads\/6285F178F928\/TL-CLIP0006.MP4&p=No\" title=\"This is my friends Harley I am showing for demo purposes.\"><img align=\"absmiddle\" src=\"http:\/\/itssoezy.com\/uploads\/6285F178F928\/TL-CLIP0006.jpg\" alt=\"ise\" width=\"64\" height=\"64\"><font size=\"2\">&nbsp;My Friends Harley<\/font><\/a><\/td><td align=\"left\" width=\"55%\"><b><font size=\"2\">This is my friends Harley I am showing for demo purposes.<\/font><\/b><\/td><td align=\"left\" width=\"15%\"><b><font size=\"2\">Privacy: No<\/font><\/b><\/td><\/tr><\/table><\/div>"
Which is exactly what I want. It has the ul for 3 tabs across and then adds the div's for the tabs. When I run this as a standalone it works perfectly! HELP! Maybe I'm too tired and can't see the error. So please need some other eyes.
Thanks a lot.