Javascript начального уровня с рельсами: обновление div при отправке формы (3.1 / jquery)

Question

У меня есть базовая страница с div, содержащим текст, и форма для обновления этого текста на rails 3.1 / jquery.Я не очень хорошо знаю jquery или js, поэтому я просто ковыряюсь с кофейным сценарием для контроллера.

Ни одно из найденных мной руководств не выглядит актуальным, а немногие из найденных мной являются древними.Я могу видеть, что происходит, вроде: я могу получить предупреждение js об успехе ajax, для формы как удаленной формы (которая выводит на сервер, и обновление на контроллере работает - основной текст изменяется, ноМне нужно обновить страницу, чтобы увидеть изменения).

Итак, у меня есть 2 основных вопроса, над которыми я работаю:

• Нужно ли мне возиться с частями jsили я могу просто поместить это в js / coffeescript для страницы?Похоже, что это может быть обработано без кучки партиалов.

• как именно вы управляете заменой информации с помощью js / jquery: .html, .load и некоторые другие функции кажутсяподразумевается, но я не нашел правильного комбо.

Все учебники, которые я нашел, либо слишком стары, либо слишком многословны для базового понимания работыделать некоторые базовые JQuery вещи в рельсах.Я пытаюсь работать в направлении уменьшения скорости и ускорения отправки форм с помощью js / json.Новый, понятный, простой учебник для непосвященных был бы отличным, но все, что указывало бы мне в правильном направлении обучения, было бы замечательно.

Да, я еще не опубликовал код, но если я смогу немного поработать, я опубликую это.

Answer 1

Если у вас есть alert() при успешном выполнении ajax, сделайте что-то вроде этого:

$("#myDivId").text(myText);

Где myText это либо текст, который вы отправили на сервер, либо ответ от сервера - в зависимости от того, чтонаиболее подходит для вашей ситуации.

В более общем смысле, для замены текста элемента используйте $("#myElementId").text("new text").Для замены HTML элемента используйте $("#myElementId").html("<b>new HTML</b>")

Answer 2

Я не знаю Ruby, но это довольно легко сделать с помощью jQuery.

Вы можете выполнить отправку формы AJAX и обновить свой элемент <div> после успешного завершения вызова AJAX.

//bind some code to the submit event for your form
$('#form_id').bind('submit', function (event) {

    //preventDefault(); is the same as return false; except you can run code after preventDefault();
    event.preventDefault();

    //make a GET request to your server-side script
    $.get('path/to/form_action.rb', $(this).serialize(), function (response) {

        //this is the callback for the AJAX call
        $('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>');
    });
});

Некоторые заметки:

• Вы также можете использовать метод $.post() (http://api.jquery.com/jquery.post/) вместо $.get() (http://api.jquery.com/jquery.get/)) и отправлять данные с помощью метода POST.
• event.preventDefault (); остановит отправку формы в обычном режиме, поэтому вы сможете обработать ее с помощью собственного кода.
• Переменная response в обратном вызове AJAX является ответом, который выводит ваш скрипт ruby ​​после обработки отправки формы.
• $(this).serialize() при вызове $.get() добавляет входные данные вашей формы к вызову AJAX: http://api.jquery.com/serialize/