jQuery UI and Ajax

jQuery UI and Ajax

Hi, i have website that retrieves his main content using ajax.
The problem is that whenever i include the jquery ui library into the main page(the static one, where all the dynamic content is loaded inside a div) the ajax script doesn't work anymore.
The console doesn't give any error and there're no ajax requests.
The load order of the main page is:
jQuery
jQuery ui
<html content>(including the div where the content is loaded)
ajax script

If i include the jquery ui script at the end of the content that gets loaded, the ajax script works only once and the jquery ui widget works on that content but besides that the ajax script doesn't load any other content(doesn't even starts a request when clicking on menu's entries).

This is the ajax script i wrote:


  1. $(function() {
  2.     var newHash      = "",
  3.         $mainContent = $("#mainContent"),
  4.         $pageWrap    = $("#contentCenter"),
  5. $mainMenu = $("#topMenu li a"),
  6.         baseHeight   = 0,
  7.         $el;
  8.  
  9.     $pageWrap.height($pageWrap.height());
  10.     baseHeight = $pageWrap.height() - $mainContent.height();
  11.     
  12.     $mainMenu.on("click", function() {
  13.         window.location.hash = $(this).attr("href");
  14.         return false;
  15.     });
  16.     
  17.     $(window).bind('hashchange', function(){
  18.     
  19.         newHash = window.location.hash.substring(1);
  20.         
  21.         if (newHash) {
  22.             $mainContent
  23.                 .fadeOut(200, function() {
  24.                     $mainContent.hide(function() {
  25. $(".loader").show();
  26. var page = newHash;
  27. var data = 'page=' + page;
  28. $.ajax({
  29. url: "main_content/action.php", 
  30. type: "POST",       
  31. data: data + "&request=ajax",
  32. cache: false,
  33. success: function (html) {
  34. $mainContent.html(html);
  35. if ($mainContent.find("img").length > 0) {
  36. $("#mainContent img").on('load', function() {
  37. $(".loader").hide();
  38. $mainContent.fadeIn(200, function() {
  39. $pageWrap.animate({
  40. height: baseHeight + $mainContent.height() + "px"
  41. }, 300, function(){
  42. $pageWrap.css("height", "auto");
  43. });
  44. });
  46. $mainMenu.removeClass('selected');
  47. $('a[href="' + newHash + '"]').addClass('selected');
  48. return false
  51. });
  52. }
  54. else {
  56. //$(".loader").hide();
  57. $mainContent.fadeIn(200, function() {
  58. $pageWrap.animate({
  59. height: baseHeight + $mainContent.height() + "px"
  60. }, 300, function(){
  61. $pageWrap.css("height", "auto");
  62. });
  63. });
  65. $mainMenu.removeClass('selected');
  66. $('a[href="' + newHash + '"]').addClass('selected');
  67. return false
  69. }
  70.  }
  71. });
  72. });
  73.                 });  
  74.         };
  75.         
  76.     });
  77.     
  78.     $(window).trigger('hashchange');

  80. });
I saw that when including jQuery ui at the end of the loaded content the jQuery ui script sends a request that looks like this: 
GET http://localhost/congrestar2/main/jscripts/jquery-ui-1.9.1.custom.min.js?_=1354181469313
is that normal?

Any suggestions on how to solve the problem? Thanks