Вход

Просмотр полной версии : Как заменить всё содержимое страницы? AJAX/JQuery


someone
15.02.2013, 15:13
Добрый день. Нубский вопрос. Сделал ajax запрос (с целью полной замены <form> на <select>) через событие onchange элемента списка формы, получил в ответ всю полную страницу. Хочу заменить содержимое текущей страницы на содержимое ответа(использую метод $.ajax({complete : complete}) ), без перезагрузки страницы(без location.reload() ). Пока не получается сделать без ошибок.

Код:

$('form.translation>select').on('change', function(){ // ajax запрос на изменение перевода
var csrftoken = $.cookie('csrftoken');
var lang = $('form.translation>select').val();

function complete(jqXHR) {
alert($(jqXHR.responseText).filter('body')); // тут ошибка: throw new Error( "Syntax error, unrecognized expression: " + msg );
// $('body').html($(jqXHR.responseText).filter('body' ));
}

$.ajax({
url: '/translate/',
type: 'POST',
headers: {'X-CSRFToken': csrftoken},
data: {lang: lang},
complete: complete
})
// location.reload();

})


Вот форма на всякий:

<form action="/translate/" method="POST" class="form-inline pull-right translation" style="margin-bottom: 0px;">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='SgVdbKyGNHWcLohomtDJSsd2t8tA6CLp' /></div>
<label for="id_lang">Language:</label><select name="lang" id="id_lang">
<option value="ru">Русский</option>
<option value="en" selected="selected">English</option>
</select>
<input type="submit" class="btn" value="Change">
</form>



Подскажите как можно сделать корректно? При использовании location.reload() вроде всё работает без нареканий.

danik.js
15.02.2013, 15:31
получил в ответ всю полную страницу
А зачем? Нужно на сервере проверять заголовок X-Requested-With на значение XMLHttpRequest и отдавать не целиком страницу, а только обновляемую часть. Зачем менять всю страницу через ajax? это же равносильно location.reload()

someone
15.02.2013, 15:44
Всё просто, я только начал изучать клиентское программирование... Понимаю, что экономии от этого никакой, но как бы за меня никто не сделает и меня никто не научит) потоэтому шагаю как могу)

К тому же, в этом случае дело касается перевода страницы. Наверно это как то нужно делать через json... Не всё сразу...
Про заголовок спасибо, буду знать...

tktl
15.02.2013, 15:46
О блин. Ну и вопрос. Я не понял. Совершенно.

Я не пойму причем здесь Ajax вообще.
Если надо заменить какой-то элемент (хоть body, хоть html) находите его в DOM. Потом можно удалить или заменить содержимое на свое.

Про ajax запрос - можно указать тип ожидаемого ответа. Судя по всему вы ожидаете html, а получаете скорее всего text.


function complete(data) {
var body = $(data).filter('body');
//какой-то код
}


Но вообще - это жесть, что у Вас там написано.

someone
15.02.2013, 15:50
Я не пойму причем здесь Ajax вообще


Хочу заменить форму на обычный <select>

tktl
15.02.2013, 15:54
посмотрите какой вам ответ от сервера приходит

function complete(data) {
console.log(data);
}

в консоли будет написано

danik.js
15.02.2013, 15:56
Тогда уж проще делать перенаправление на переведенную страницу. Тот же google translate не делает топорную замену body.innerHTML целиком. Там идет работа с каждым элементом, причем учитывается атрибут translate каждого элемента

someone
15.02.2013, 16:01
Тогда уж проще делать перенаправление на переведенную страницу. Тот же google translate не делает топорную замену body.innerHTML целиком. Там идет работа с каждым элементом, причем учитывается атрибут translate каждого элемента

Т.е. пока проще оставить location.reload() ??

tktl
15.02.2013, 16:15
danik.js
Восхищаюсь Вами.
Я только из Ваших ответов понял суть вопроса :lol:

+100

someone
15.02.2013, 16:19
Оставил location.reload(). Тема закрыта