Welcome Guest, Not a member yet? Register   Sign In
How to load response from controller inside a div instead of a separate webpage
#1

So I am validating a form using code igniter which simplifies my code a lot however I am facing a new problem. My form at first gets loaded as a pop up inside a div of view. But when the controller returns response after validation then the form opens as a separate webpage instead of just loading inside the previous div of view.

main_view.php

Code:
<script>
function div_show(type, classID) {    
  if(type=='adduser')
  {
    document.getElementById('AddUser_popup').style.display = "block";
    $("#AddUser_popup").load("add_user");  // javascript to call the controller which loads the form
  }
}
</script>
<body>
 <button id="popupNewTerm" onClick="div_show('adduser', null)">Add user</button>

 <div class="AddUser_popup" id="AddUser_popup"><!--Upon add User button click form gets loaded in this-->  </div>
</body>



Controller:

Code:
public function add_user()
{
   $data = array();
   $this->load->helper('form');
   $this->load->helper('url');
   $this->load->library('form_validation');
   $this->load->model('user_m');
   $this->form_validation->set_rules('username','Username', 'required|trim');
   $this->form_validation->set_rules('emp_email','E-mail', 'required|trim|valid-email|xss_clean');

   if($this->form_validation->run()==FALSE)
   {
       $this->load->view('includes/forms/add_user', $data);
   }
   else {
       $data['username']=$this->input->post('username');
       $data['emp_email']=$this->input->post('emp_email');


       $user=array(
           'user_id'=> NULL,
           'username'=> $data['username'],
           'emp_email'=>$data['emp_email']
       );
       $this->user_m->insert_user($user);
       $this->load->view('includes/forms/add_user', $data);
   }
}



Form-> (add_user.php)

Code:
<div id="popupContact">
<?php

if(isset($username) && isset($emp_email))
{
    echo validation_errors();
    echo 'User added successfully!';
}
else {
   echo validation_errors();
   echo form_open('', 'id="form" name="form"');
   echo '<p id="close" onclick ="div_hide()">X</p>';
   echo '<h2>Add User</h2>';
   echo '<hr>';
   echo '<label for="username">Username: </label>'.form_input('username', set_value('username')) .'&nbsp;&nbsp;';
   echo '<label for="emp_email">Email: </label>'.form_input('emp_email', set_value('emp_email')) . '<br><br>';


   echo form_submit('submit', 'Submit', 'id="submit"');

   echo form_close();
}
?>
</div>


how can I load the form inside the main_view.php after the validation fails from the controller or when the validation is successful, I want the form to close inside the main view page. I can do form validation using normal javascript and php but wanted to learn code igniter method of validation. 
Urgently need help, Please.
Reply
#2

Hi,

Not sure if this will help but you could rewrite it to work in this way.

The form is loaded in the pop up in the normal way inside a view, not via ajax, but as part of the main page view, except in your case it is in a non-displayed pop up window but still originally written in normal HTML view formats.

Instead of submitting the data via a normal post button, the button is not enabled via js but instead runs your script.

Your script collects all the relavant post fields and submits via ajax to a controller, that process the data and returns either 'ok' if succesful or if not the validation errors. Your script either displays the error messages (html injection to a relevant named div) or it closes the popup and does whatever you need it to do next. (redirect, refresh a user list, whatever...)

Having said all that, are you sure you are disabling the default post event on your form, sounds like it is being submitted from your description.

IMHO, forms inside popups is not a great user experience. Also it gets very complicated very quickly if you have to deal with errors like 'user already exists' or 'your login has expired', or any error that requires further input from the user. However that is just my opinion, but I find that ajax is at its most powerful when used where it is truly relevant, and truly most convenient for a user. A form like 'add user' is a typical example where there not only might be many return messages requiring further clarification, but also a serious enough action that a new page load should not be a problem. Also maintaining this code in the future will be a lot easier than what you are currently doing if the 'add user' functionality was seperated from your other page logic. For instance, later you might want to add a user that does not have certain privileges, or is not yet active waiting for some clearance or payment, or you might want to send an invite to them, or a custom message. Or have them added to a queue for moderation. All this might require further steps to the form, and a multi step ajax loaded and updated form can become a maintenance nightmare, with very little, if any, user benefit. Why not seperate it out to seperate pages and/or libraries or models so that if you need to add a user from elsewhere in your system, you can do so easily and quickly.

Ajax is great, but from experience, ajax heavy pages for little user benefit becomes a nightmare very quickly.

Anyway, hope that helps in some way,

Paul.
Reply
#3

(01-25-2017, 04:49 PM)PaulD Wrote: Hi,

Not sure if this will help but you could rewrite it to work in this way.

The form is loaded in the pop up in the normal way inside a view, not via ajax, but as part of the main page view, except in your case it is in a non-displayed pop up window but still originally written in normal HTML view formats.

Instead of submitting the data via a normal post button, the button is not enabled via js but instead runs your script.

Your script collects all the relavant post fields and submits via ajax to a controller, that process the data and returns either 'ok' if succesful or if not the validation errors. Your script either displays the error messages (html injection to a relevant named div) or it closes the popup and does whatever you need it to do next. (redirect, refresh a user list, whatever...)

Having said all that, are you sure you are disabling the default post event on your form, sounds like it is being submitted from your description.

IMHO, forms inside popups is not a great user experience. Also it gets very complicated very quickly if you have to deal with errors like 'user already exists' or 'your login has expired', or any error that requires further input from the user. However that is just my opinion, but I find that ajax is at its most powerful when used where it is truly relevant, and truly most convenient for a user. A form like 'add user' is a typical example where there not only might be many return messages requiring further clarification, but also a serious enough action that a new page load should not be a problem. Also maintaining this code in the future will be a lot easier than what you are currently doing if the 'add user' functionality was seperated from your other page logic. For instance, later you might want to add a user that does not have certain privileges, or is not yet active waiting for some clearance or payment, or you might want to send an invite to them, or a custom message. Or have them added to a queue for moderation. All this might require further steps to the form, and a multi step ajax loaded and updated form can become a maintenance nightmare, with very little, if any, user benefit. Why not seperate it out to seperate pages and/or libraries or models so that if you need to add a user from elsewhere in your system, you can do so easily and quickly.

Ajax is great, but from experience, ajax heavy pages for little user benefit becomes a nightmare very quickly.

Anyway, hope that helps in some way,

Paul.

Thank you so much for your nice explanation. I started this project midway taking responsibility from another developer. I am definitely considering now to create separate pages for adding/editing user instead of popup window.

Pinak
Reply




Theme © iAndrew 2016 - Forum software by © MyBB