Загрузка вкладок с помощью метода JQuery/Ajax и WebApi Get

Я изучаю jquery/ajax и выполняю некоторые тесты. Я пытаюсь передать html из приложения ASP.NET ASP.NET и загружать его на вкладки JqueryUI, когда пользователь выбирает нужную вкладку.Загрузка вкладок с помощью метода JQuery/Ajax и WebApi Get

Я не могу загрузить содержимое html.

Я следую учебник по этому link

Это HTML я использую:

<!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>

Как вы можете видеть, я модифицировал HREF на Tab2, чтобы загрузить из моего WebAPI службы

Внутри сервиса webApi, я использую следующую функцию, которая без проблем отправляет html:

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") 
      }; 
     } 

    }

Проблема заключается в том, когда я нажимаю tab2 я получаю сообщение об ошибке: предопределенный

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

Любая идея, почему моя закладка не наполненную мой Html ответ?

EDIT:

Хорошо, я добавил console.log(arguments) после

ui.jqXHR.error(function() {}

, и я получаю следующее сообщение об ошибке:

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

источник

2013-05-29 Carlos Landeras

некоторые указатели: убедитесь, что домен таким же (обратите внимание на учебнике использует только относительные ссылки), и что она не включает в себя '' тегов. – hexblot

Я не использую относительную ссылку. Уже удален из html ответа. Спасибо за советы –

После выполнения некоторых исследований о Access- Control-Allow-Origin, я исправил ее, выполнив мое приложение на сервере IIS и изменив путь href

к следующему:

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

источник

2013-05-29 09:30:33

Загрузка вкладок с помощью метода JQuery/Ajax и WebApi Get

ответ

Смежные вопросы