Loading tabs with Jquery / Ajax and WebApi Get Method

Question

I'm learning jquery/ajax and doing some testing. I am trying to serve html from asp.net WebApi application and load it into JqueryUI tabs when a user select the desired tab.

I am not able to get my html content loaded.

I am following the tutorial on this link

This is the html I'm using:

<!DOCTYPE html>
<html>

<head>
<title> Este es el pedazo de titulo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/ui.tabs.closable.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<script>
$(document).ready(function(){

    $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
     });
   });  
 });

</script>
</head>

<body>

<div id="tabs">
  <ul>   
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="http://localhost/RestFulApi/api/Tabs?name=carlos">Tab 2</a></li>    
  </ul> 
   <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>  

</body>

</html>

As you can see I have modified the href on Tab2 to load from my WebApi service

Inside the webApi service, I am using the following function, which is returning the html without any problem:

public class TabsController : ApiController
    {
        //
        // GET: /Tabs/

        public HttpResponseMessage Get(string name)
        {

            string div= "<div style=\"color:white;background-color:red;width:350px;height:300px\"> Hello " +
                  name+ "<br>This html have being server from webApi!</div>";
            return new HttpResponseMessage
            {
                Content = new StringContent(div, Encoding.UTF8, "text/html")
            };
        }

    }

The problem is whenever I click tab2 I get the predefined error message:

Couldn't load this tab We'll try to fix this as soon as possible.

Any idea why my tab is not being filled with my Html Response?

EDIT:

Ok, I have added console.log(arguments) after the

 ui.jqXHR.error(function() {}

and I am getting the following error:

XMLHttpRequest cannot load http://mydomain/RestFulApi/api/Tabs?name=carlos . Origin null is not allowed by Access-Control-Allow-Origin.

Answer 1

After doing some research about the Access-Control-Allow-Origin problem, I fixed it by executing my application on IIS server and changing the href path

to the following:

 <li><a href="/RestfulApi/api/Tabs?name=carlos">Tab 2</a></li>

Loading tabs with Jquery / Ajax and WebApi Get Method

Question

1 answers

solution1
0 ACCPTED 2013-05-29 09:30:33

Loading tabs with Jquery / Ajax and WebApi Get Method

Question

1 answers

solution1 0 ACCPTED 2013-05-29 09:30:33

solution1
0 ACCPTED 2013-05-29 09:30:33