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

Question

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

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

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

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

Answer 1

Два способа вы могли бы сделать это:

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

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

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:

Вы должны получить переменные post, используя $ 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. 
}