Using ajax to load a view in codeigniter

I have a view which is essentially made up of three forms, all inside their own div.

On page load I want to have the first form shown and the other two hidden and if the validation is successful then I want the first form to hide and have the second one m开发者_Go百科ade visible and so on.

I currently have them all working in separate views but I don't want page refreshes.

I want to do all of this using ajax so that the page doesn't refresh, I've not used ajax before so any help, tips, etc would be great. Many thanks in advance.

---

Two ways you could do this:

a) Put all forms in one view. Set the css styles of the ones you don't need to display: none; and only show one form.

b) Create controller methods to show the individual views. Use a JavaScript Framework like JQuery to show your forms with Ajax (for example with the load-function, calling your controller methods).

---

Ajax is really friendly, especially with jQuery. Read more about it here: jQuery.post()

You don't necessary need to create views for every controller functions, and you can utilize that and make ajax calls to the controller.

There are obviously different methods of doing this, but for simplicity sake, I've wrote an example here:

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!");
            });
    });
});

In PHP CodeIgniter:

You would retrieve the post variables using $this->input->post("form1_input1"); etc... You do not need to return views.

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.
}