Использование ajax для загрузки представления в codeigniter

Question

У меня есть представление, которое по существу состоит из трех форм, все в своем собственном div.

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

В настоящее время у меня все они работают в отдельных представлениях, но я не хочу обновления страницы.

IЯ хочу сделать все это, используя ajax, чтобы страница не обновлялась, я раньше не использовал ajax, поэтому любая помощь, советы и т. д. были бы полезны.Большое спасибо заранее.

Answer 1

Два способа сделать это:

а) Поместите все формы в один вид. Установите стили CSS, которые вам не нужно отображать: none; и показать только одну форму.

б) Создание методов контроллера для отображения отдельных представлений. Используйте JavaScript Framework, такой как JQuery, для отображения ваших форм с помощью Ajax (например, с помощью функции load, вызывающей методы вашего контроллера).

Answer 2

Ajax действительно дружелюбен, особенно с jQuery.Подробнее об этом читайте здесь: jQuery.post ()

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

Очевидно, что есть разные способы сделать это, но для простоты я написал здесь пример:

HTML:

<div id="form1">
   <form>
      <input type="text" name="form1_input1" id="form1_input1" />
      <input type="text" name="form1_input2" id="form1_input2" />
      <input type="button" value="Next" name="form1_next" id="form1_next" />
   </form>
</div>

<div id="form2">
   <form>
      <input type="text" name="form2_input1" id="form2_input1" />
      <input type="text" name="form2_input2" id="form2_input2" />
      <input type="button" value="Next" name="form2_next" id="form2_next" />
   </form>
</div>

<div id="form3">
   <form>
      <input type="text" name="form3_input1" id="form3_input1" />
      <input type="text" name="form3_input2" id="form3_input2" />
      <input type="button" value="Next" name="form3_next" id="form3_next" />
   </form>
</div>

JQuery:

$(document).ready(function() {
    $("#form2").hide(); // hides form2 and form3 elements on document load
    $("#form3").hide();

    $("#form1_next").click(function() {
        var form1_input1 = $("#form1_input1").val(); // retrieve values from input
        var form1_input2 = $("#form1_input2").val();
            $.post("LINK-TO-CONTROLLER", { form1_input1: form1_input1, form1_input2: form1_input2 },
               function(data){
                   $("#form1").hide();
                   $("#form2").show(); // shows form 2, hides form 1
            });
    });

    $("#form2_next").click(function() {
        var form2_input1 = $("#form2_input1").val(); // retrieve values from input
        var form2_input2 = $("#form2_input2").val();
            $.post("LINK-TO-CONTROLLER", { form2_input1: form2_input1, form2_input2: form2_input2 },
               function(data){
                   $("#form2").hide();
                   $("#form3").show(); // shows form 2, hides form 1
            });
    });

    $("#form3_next").click(function() {
        var form3_input1 = $("#form3_input1").val(); // retrieve values from input
        var form3_input2 = $("#form3_input2").val();
            $.post("LINK-TO-CONTROLLER", { form3_input1: form3_input1, form3_input2: form3_input2 },
               function(data){
                   $("#form3").hide();  // finish
                   alert("COMPLETE!");
            });
    });
});

В PHP CodeIgniter:

Вы можете получить переменные записи, используя $ this-> input-> post ("form1_input1"); и т. д ... Вам не нужно возвращать представления.

function my_controller_form_one() {
    $input_one = $this->input->post("form1_input1");
    $input_two = $this->input->post("form1_input2");
    $this->my_model->doSomething($input_one, $input_two);
    return true;  // need not return anything, really. Unless you are doing server-side validation stuff.
}