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

[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>