Ajax-вызов не работает должным образом в Chrome и FF - PullRequest
Новая
       11

Ajax-вызов не работает должным образом в Chrome и FF

1 голос
/ 19 июня 2011

Я пытаюсь изменить содержимое div, вызывая частичное представление с помощью jQuery, из другого частичного представления.
Вот внутреннее представление, из которого я пытаюсь вызвать второе: 

<h2>Login</h2>
<div id="Bar">Content goes here
</div>
<div id="Register">Register</div>

И мой jQuery: 

$(document).ready(function () {
    $('#Register').click(function () {

        var resultHTML = jQuery.ajax({
            type: 'GET',
            url: 'AccountBar/Register'
        }).responseText;
        $('#Bar').html(resultHTML);       
    });
});

Это хорошо работает в IE (9), но не в Chrome и не в FF - оба просто очищают div "Bar".
При отладке в браузерекажется, что resultHTML пуст как в Chrome, так и в FF (но в IE это правильно).
При отладке в VS все щелчки в регистре div вызывают правильное действие: 

public PartialViewResult Register()
        {
            return PartialView();
        }

И представление: 

@model PartialTry.Models.PasswordModel
    <h2>Register</h2>

Есть идеи, как заставить Chrome и FF изменить div "Bar"?
Спасибо.

Ответы [ 2 ]

1 голос
/ 19 июня 2011

Когда вы делаете это: 

var resultHTML = jQuery.ajax({
    type: 'GET',
    url: 'AccountBar/Register'
}).responseText;
$('#Bar').html(resultHTML);

IE9 делает здесь небольшую хитрость, блокируя до завершения запроса (или кэшируя его, в зависимости от того, в какой сборке вы находитесь) при доступе к .responseText.Важно помнить, что это асинхронный вызов , что означает, что он отключается и делает запрос ... результат будет доступен позже.

В этом случае самый простой подход - это метод .load() только для этого: 

$('#Bar').load('AccountBar/Register');

Это примерно означает: 

$.ajax({
    type: 'GET',
    url: 'AccountBar/Register'
    success: function(result) {
        $('#Bar').html(result);
    }
});

Альтернативный подход, который вы пытаетесь сделать, состоит в том, чтобы сделать запрос * синхронным * (пожалуйста, , не делайте этого ), установив async: false на $.ajax({}) вызове , вот так: 

var resultHTML = jQuery.ajax({
    type: 'GET',
    url: 'AccountBar/Register',
    async: false
}).responseText;

Это будет работать ... но также будет блокировать браузер во время его работы, вместо того, чтобы не прерывать работу и не обновлять #Barпосле завершения ... это намного хуже для пользователя, и лучше не делать этого.

1 голос
/ 19 июня 2011

Вы пытались дождаться ответа через обратный вызов?Например: 

$.ajax({
  type: 'GET', 
  url: 'AccountBar/Register',
  context: document.body,
  success: function(response) {
    $('#Bar').html(response);
  },
  error: function(response) {
    alert('oops, something went wrong!')
  }
});
...