Перезагрузить документ готов после инъекции Ajax Response в DOM?

Question

У меня есть форма, которая использует палитру цветов, это определено в Document Ready с тегами выбора формы ввода.Но мне требуется доступ к некоторым данным через AJAX на другой странице, и ответ должен заменить эту форму.Когда я это делаю, jquery colorpicker перестает работать.Я думаю, было бы здорово перезагрузить Document Ready или что-то в этом роде.

В противном случае я думаю, что мой единственный вариант - это JSON для передачи переменных из вывода PHP в jquery и затем обратно в html, верно?

Answer 1

Есть два основных способа сделать это. Во-первых, сделать функцию, которая инициализирует вашу палитру цветов, вызываемой из другого кода. Другой способ - вручную перезапустить событие готовности документа. Первый требует небольшой модификации кода выбора цвета, но последний будет повторно выполнять все функции, связанные с document.ready! Убедитесь, что это то, что вы хотите, прежде чем вы это сделаете. : -)

// option one

function setupColorPicker() {
    // do color picking magic
}

$(document).ready(setupDatePicker);

$.ajax(options).done(setupColorPicker);

// option two

$(document).ready(function() {
    // do color picking magic
});

$.ajax(options).done(function() {
    $(document).trigger("ready"); // probably has unintended side-effects!
});

Answer 2

Передача данных с сервера в формате JSON не только достигнет вашей цели, но и повысит производительность (СКОРОСТЬ) приложения, а также сэкономит вам байты полосы пропускания.Если вы все еще хотите внедрить ответ в виде обычного html, просто инициализируйте плагин выбора цвета в функции и вызовите функцию после обратного вызова ajax success.

$(document).ready(function(){
    //page is ready

    function colorpicker(){
      //initialize your color picker

    }

    $.ajax({
      url: 'serverpage.cshtml', //whatever server page
      data: {data1: data1},
      success: function(){
        //append the response into the designated form or div
        colorpicker(); //fire the color picker function to refresh
      } 
    });
});

Answer 3

Вы должны зарегистрировать события, используя метод live или delegate:

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

Answer 4

Вы можете заставить скрипт инициализации палитры цветов запускаться из своей собственной функции и вызывать его один раз в документе, готовом, и снова в обратном вызове вашего вызова ajax.