How can i call a jquery dialogue box if form submitted successfully ?

[eluser]Kiran cet[/eluser]
I want to call a jquery dialogue box after successful form submission ?

I am using ocular template library.

Code:

<?php

class College_registration extends CI_Controller
{
function __construct()
{
  parent::__construct();
  
}

function registration()
{
  $this->template->current_view = ('college');
  $this->form_validation->set_error_delimiters('<div class="error2">', '</div>');

  $this->form_validation->set_rules('college_url','this field','required');
  $this->form_validation->set_rules('admin_id','this field','required|is_unique[admin_details.userid]');
  $this->form_validation->set_rules('college_code','college code',
  
  if($this->form_validation->run()==FALSE)
  {
   $this->template->render();
  }
  else
  {
   $this->load->model('College_Register_Model');
   $this->College_Register_Model->insert_data(); //data inserted successfully

   // then i want to call a jquery function
  
  }
}
}

Please help me....

[eluser]Clooner[/eluser]
As I read this it is more of a javascript/jquery issue. Simply catch the form submit using a handler in javascript/jquery using the .submit function. It's clearly documented on the jquery site!

[eluser]LuckyFella73[/eluser]
Looking at the controller the form is submitted without using js.
In that case you could load a javascript like a partial view having
something like this:

Code:

$(function() { // on document ready

$('#id_dialog_box').delay(1000).fadeIn();

});

The HTML (having id="id_dialog_box") has to be hidden by default (display:none,
allready implemented in you page.

If you want to do it like Jeroen suggested you would have to submit
the form via javascript and fadIn the box on success (ajax feedback)

[eluser]Kiran cet[/eluser]
Thanks for your suggestion Jeroen Schaftenaar and LuckyFella73..

Can i submit form using Ajax without page refresh then pop up a jquery dialogue box..
How can i do that ?? In that case how will i call my controller function "registration" ?
Can i use codeigniter validation with Ajax ? some code snippet please

[eluser]LuckyFella73[/eluser]
You can use this js and edit like needed:

Code:

// in your header:
<scr + ipt type="text/javascript">
var ci_base_url = '&lt;?php echo base_url();?&gt;';
</scr + ipt>

// put this in a js file and load it
$('#id_submit_button').click(function (e) { // or choose submit event
e.preventDefault();

var form_data = {
  form_field_name: $('#id_form_element').val()
};

$.post(ci_base_url + "controller_name/method_name" , {
  "form_field_name": form_data.form_field_name
},
function(data){
  if (data.validation_flag == 1) {
   // validation passed
   // display success message
  }
  else {
   // validation failed
   // display error message
  }
  
}, "json");
});

In your controller you can use the form_validation library as usual.
Return JSON like

Code:

// ...
die( json_encode($result_array));

and set the array index "validation_flag" according to the validation result.

[eluser]Unknown[/eluser]
[quote author="LuckyFella73" date="1343223417"]You can use this js and edit like needed:

Code:

// in your header:
<scr + ipt type="text/javascript">
var ci_base_url = '&lt;?php echo base_url();?&gt;';
</scr + ipt>

// put this in a js file and load it
$('#id_submit_button').click(function (e) { // or choose submit event
e.preventDefault();

var form_data = {
  form_field_name: $('#id_form_element').val()
};

$.post(ci_base_url + "controller_name/method_name" , {
  "form_field_name": form_data.form_field_name
},
function(data){
  if (data.validation_flag == 1) {
   // validation passed
   // display success message
  }
  else {
   // validation failed
   // display error message
  }
  
}, "json");
});

In your controller you can use the form_validation library as usual.
Return JSON like

Code:

// ...
die( json_encode($result_array));

and set the array index "validation_flag" according to the validation result.[/quote]


Hey Lucky,

I was trying to accomplish a similar idea with your suggestion above and cannot seem to get a pass on the form validation with the CI library. When I remove the e.preventDefault from the Js, I get a passing json response back. It's like the CI form validation doesn't work unless the form submit happens.

I was curious if you might have any ideas to point me in the right direction? I am trying to submit my form using a jquery dialog modal.

My form_validation array

Code:

'timetrack_m_add' => array (
       array (
        'field' => 'm_timetrack_hours',
        'label' => 'Hours',
        'rules' => 'required|numeric|min_length[1]|max_length[8]|greater_than[0]'
        ),
       array (
        'field' => 'm_timetrack_date',
        'label' => 'Date',
        'rules' => 'required'
        )
       )

my js located in my view

Code:

$('#m_timetrack_submit').click(function (e) { // or choose submit event
  e.preventDefault();

  var tt_tid='<?=$task['id'];?>';
  var tt_hours=$("#m_timetrack_hours").val();
  var tt_date=$("#m_timetrack_date").val();

  $.post('<?php echo base_url();?>task/post_action' , {
   "tt_tid": tt_tid,
   "tt_hours": tt_hours,
   "tt_date": tt_date
  },
  function(data){
   if (data.validation_flag == 1) {
    // validation passed
    alert("win");
   }
   else {
    // validation failed
    alert("fail!");
   }
  }, "json");

});

my controller method

Code:

function post_action()
{
  $this->load->library('form_validation');
  $this -> form_validation -> set_error_delimiters('<span class="error">', '</span>');
  $validate_config = "timetrack_m_add";
  
  $response['timetrack_tid'] = $this->input->post('tt_tid');
  $response['timetrack_hours'] = $this->input->post('tt_hours');
  $response['timetrack_date'] = $this->input->post('tt_date');

  #Check if the form is valid
  if ($this->form_validation->run($validate_config) == FALSE ){
  
   $response['validation_flag'] = false;
   $response['message'] = "FAIL";
   $response['errors'] = validation_errors();

  #Form data was valid
  }else{
   $response['validation_flag'] = true;
   $response['message'] = "WIN";
  }

  die(json_encode($response));
}

my view / form

Code:

<div id="timetrack_modal" title="TimeTrack">
   &lt;?php
    $attributes = array('id' => 'm_timetrack_form');
    echo form_open('task/post_action', $attributes);
   ?&gt;
   <div id="form_message"></div>
   <div class="field">
   <label for="m_timetrack_hours">Hours<em>*</em></label>
   &lt;input class="input ui-widget-content ui-corner-all" id="m_timetrack_hours" name="m_timetrack_hours" value="" maxlength="8" type="text" /&gt;
   </div>
  
   <div class="field">
   <label for="m_timetrack_date">Date<em>*</em></label>
   [removed]
    $(function(){
     $("#m_timetrack_date").datetimepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      second: 0,
      timeFormat: 'hh:mm:ss'
     });
    });
   [removed]
   &lt;input class="input ui-widget-content ui-corner-all" id="m_timetrack_date" name="m_timetrack_date" type="text" value="" readonly /&gt;
  
   &lt;input type="hidden" name="type_id" value="1" readonly&gt;
   &lt;input type="submit" id="m_timetrack_submit" name="add" class="add" value="add"&gt;
  
   &lt;?php echo form_error('m_timetrack_date'); ?&gt;
   </div>
   &lt;/form&gt;
  </div>