Why the Ajax script is not running on IIS 7.5 Win 2008 R2 server?

Question

I have a web app that works fine on VS 2013 on my development server, but once I published it on the IIS 7.5 2008 R2 server the Ajax scripts, located on my custom script file, don't work anymore, although the other JQuery scripts that do not call Ajax do work properly. Is there anything else that needs to be done in order to have ajax working in the server? I've read some posts about, but couldn't find an answer yet. I've limited experience in IIS and Ajax.

// Update:

I've already figured out that the Ajax script works and that the problem is most likely in the following line:

"url: '/Home/GetRates', // URL for the request"

Using the debuger I found out that the GetRates() function is not been called in the Remote Server, although it is in the local (Under VS 2013) development server. The only difference that I see is the path, but dont know how to fix it. Below is the Ajax script:

// Retrieve rates and update partial view
$(function () {
    $('#reservSearch').submit(function () {
        if ($(this).valid()) {
            $("#theModal").modal("show");              // Display the in progress.....
            $.ajax({
                url: '/Home/GetRates',                 // URL for the request 
                data: $("#reservSearch").serialize(),  // the data to send (will be converted to a query string)
                type: "POST",                          // whether this is a POST or GET request  
                dataType: 'html',                      // the type of data we expect back   
                success: function (data) {             // code to run if the request succeeds; The response is passed to the function
                    $("#theModal").modal("hide");      // Close the in progress modal.....
                    $('#ratesView').html(data);        // Fill div with results
                },
                error: function (xhr, status) {        // code to run if the request fails; the raw request and status codes are passed to the function
                    $("#theModal").modal("hide");      // Close the in progress modal.....
                    alert('Error: Retrieving parking rates' + "</br>" + xhr.error);
                }
            });
        }
//        // it is important to return false in order to cancel the default submission of the form and perform the AJAX call
        return false;
    });
});

// SECOND UPDATE

After following the directions in the comment section, this is the response from the ajax call:

    <div id="header"><h1>Server Error in Application "DEFAULT WEB SITE"</h1></div> 
<div id="server_version"><p>Internet Information Services 7.5</p></div> 
<div id="content"> 
<div class="content-container"> 
 <fieldset><legend>Error Summary</legend> 
  <h2>HTTP Error 404.0 - Not Found</h2> 
  <h3>The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.</h3> 
 </fieldset> 
</div> 
<div class="content-container"> 
 <fieldset><legend>Detailed Error Information</legend> 
  <div id="details-left"> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <tr class="alt"><th>Module</th><td>IIS Web Core</td></tr> 
    <tr><th>Notification</th><td>MapRequestHandler</td></tr> 
    <tr class="alt"><th>Handler</th><td>StaticFile</td></tr> 
    <tr><th>Error Code</th><td>0x80070002</td></tr> 

   </table> 
  </div> 
  <div id="details-right"> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <tr class="alt"><th>Requested URL</th><td>http://localhost:80/Home/GetRates</td></tr> 
    <tr><th>Physical Path</th><td>C:\inetpub\wwwroot\Home\GetRates</td></tr> 
    <tr class="alt"><th>Logon Method</th><td>Anonymous</td></tr> 
    <tr><th>Logon User</th><td>Anonymous</td></tr> 

   </table> 
   <div class="clear"></div> 
  </div> 
 </fieldset> 
</div> 
<div class="content-container"> 
 <fieldset><legend>Most likely causes:</legend> 
  <ul>  <li>The directory or file specified does not exist on the Web server.</li>  <li>The URL contains a typographical error.</li>    <li>A custom filter or module, such as URLScan, restricts access to the file.</li> </ul> 
 </fieldset> 
</div> 
<div class="content-container"> 
 <fieldset><legend>Things you can try:</legend> 
  <ul>  <li>Create the content on the Web server.</li>  <li>Review the browser URL.</li>    <li>Create a tracing rule to track failed requests for this HTTP status code and see which module is calling SetStatus. For more information about creating a tracing rule for failed requests, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li> </ul> 
 </fieldset> 
</div> 


<div class="content-container"> 
 <fieldset><legend>Links and More Information</legend> 
  This error means that the file or directory does not exist on the server. Create the file or directory and try the request again. 
  <p><a href="http://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=404,0,0x80070002,7601">View more information &raquo;</a></p> 

 </fieldset> 
</div> 
</div> 
</body> 
</html> 

Answer 1

How to debug AJAX calls

The full answer is spread across the comments on OP's question but I think this one helped the most:

1. Go to the web page which makes the AJAX call
2. In Chrome press F12
3. Go to the Network tab
4. Activate the AJAX call by submitting the form #reservSearch
5. In the Network tab look for a call to /Home/GetRates
6. Click it
7. Check the Preview and Response tabs to see the output from your server
8. Is it displaying the expected HTML data which your AJAX call is listening for?