2012-05-03 3 views
0

ajax jquery를 통해 양식을 제출하는 데 문제가있었습니다. 내 문제는 페이지를 새로 고치지 않고 jquery 모달 폼을 codeigniter 컨트롤러에 제출하는 방법입니다. 동시에 제출 된 데이터에 codeigniter 컨트롤러 (유효성 검사)에서 오류가있는 경우 jquery가 오류 메시지를 표시하는 방법은 무엇입니까? 여기 jquery 모달에서 codeigniter 컨트롤러로 양식 제출

JS 스크립트 내 코드

$(function() { 

// Dialog 
$('#dialog').dialog({ 
    autoOpen: false, 
    width: 380, 
    height:300, 
    buttons: { 
     'Save': function() { 

    function submitForm(){ 

    $.ajax({ 
    type : 'POST', 
    url : 'http://localhost/hmvc/index.php/sysconfig/sysmenu/create', 
    data : $('#menu_form').serialize(), 
    success : function(data) { 
     // Show OK message 
     alert('ok'); 
    }, 
    error: function(error){ 
     // Show error message 
     alert('error'); 
    } 
}); 

return false; 
} 

     }, 
     'Cancel': function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

// Dialog Link 
$('#dialog_link').click(function(){ 
    $('#dialog').dialog('open'); 
    return false; 
}); 


}); 

컨트롤러

function _validate() 
{ 
    $config = array(

       array(
       'field'=>'sysmenu_name', 
       'label'=>'menu name', 
       'rules'=>'trim|max_length[30]|htmlspecialchars|required|xss_clean' 
       ), 

       array(
       'field'=>'sysmenu_link', 
       'label'=>'hyperlink', 
       'rules'=>'trim|max_length[100]|htmlspecialchars|required|xss_clean' 
       ), 

       array(
       'field'=>'sysmenu_sequence', 
       'label'=>'sequence', 
       'rules'=>'trim|max_length[2]|htmlspecialchars|required|xss_clean' 
       ) 

      ); 

    $this->form_validation->set_rules($config); 

    $this->form_validation->set_error_delimiters('<div class="error_msg">', '</div>'); 
} 

function create() 
{ 
    if($this->input->is_ajax_request()) 
    { 
    $this->_validate(); 
    if($this->form_validation->run($this)==FALSE) 
    { 

      echo validation_errors(); 
    } 


    } else { 

     $menu_level = getValue_where('sysmenu_level',"sysmenu_id ='".$this->input->post('sysmenu_parent_id')."'",'base_sysmenu') + 1; 

     $data = array(
       'sysmenu_name'=>$this->input->post('sysmenu_name'), 
       'sysmenu_parent_id'=>$this->input->post('sysmenu_parent_id'), 
       'sysmenu_link'=>$this->input->post('sysmenu_link'), 
       'sysmenu_level'=>$menu_level, 
       'sysmenu_sequence'=>$this->input->post('sysmenu_sequence') 
       ); 

     $this->sysmenu_model->insert_menu($data); 
     $this->index(); 
    } 
} 

보기

입니다 84,875,

답변

0

당신은 수동으로 양식을 제출하고, AJAX 호출 내에서의 성공/오류를 처리해야합니다.

전화 Save 내에서이 같은 기능 :

function submitForm(){ 

$.ajax({ 
    type : "POST", 
    url : "sysconfig/sysmenu/create", 
    data : postData, // Add your form data as inputname1=value1&inputname2=value2.... 
    success : function(data) { 
    // Show OK message 
    }, 
    error: function(error){ 
    // Show error message 
    } 
}); 
} 

+0

그래서 어떻게 _validate 메서드에서 유효성 검사 오류를 표시할까요? 죄송합니다. jquery와 CI를 처음 사용했습니다. – softboxkid

+0

@zaherg이 시사하는 것처럼 개발자 도구 (Firefox 용 Firebug가 가장 좋습니다)를 사용하고 서버가 반환하는 항목을 확인하는 것이 좋습니다. 일단 알게되면 유효성 검사 오류를 표시하는 것이 더 쉬울 것입니다. – Sircom

0

내가 도우려고하지만 당신이 그것을 테스트해야합니다 :

  1. 는 양식이 false를 돌려 있는지 확인, (http://s.zah.me/IouBgK에서와 같이 약간의 수정을 가하고 return false;을 추가하고 datadata : $('#yourformID').serialize(),으로 변경).
  2. 컨트롤러에서 제출 된 데이터를 확인하여 Ajax 요청이 있는지 확인하거나 $this->input->is_ajax_request()을 사용하지 않는지 확인한 다음 유효성 검사 결과 또는 컨트롤러가 수행하는 결과를 표시합니다.
+0

이미 내 질문을 편집하면 JS, 컨트롤러 및보기가 업데이트되었습니다. 그러나 경고 ('오류')는 여전히 나타나지 않습니다.아약스가 – softboxkid

+0

당신의 json 데이터 타입을 보내지는 않지만 일반 데이터로 처리한다면, 당신은 당신의 js로부터'dataType : 'json','을 제거해야 할 것이다. (그리고 내가 본 것 귀하의 코드) – zaherg

+0

크롬 또는 개발자가 양식을 제출했는지 여부 또는 다른 문제가 있는지 확인하는 데 도움이되는 도구를 활성화하십시오. – zaherg

1

다음 기준을 사용하십시오.

컨트롤러 클래스에서보기 페이지를 시작하는 방법을 사용하십시오.

public function CreateStudents() { 

     $this->load->helper('form'); // include form helper 

     $data['title'] = "Create Students Page"; //Title of the page 

     $this->load->view('templates/header', $data); // header 
     $this->load->view('createstudents', $data); // main content 
     $this->load->view('templates/footer', $data); // footer 
    } 

그런 다음 Ajax 메서드를 만듭니다. 양식을 제출할 때이 메소드가 실행됩니다.

public function CreateStudentsAjax() { 

    $this->load->helper('form'); 
    $this->load->library('form_validation'); 
    $this->form_validation->set_error_delimiters('', ''); 

    $this->form_validation->set_rules('roll', 'Roll Number', 'required'); 
    $this->form_validation->set_rules('name', 'Name', 'required'); 
    $this->form_validation->set_rules('phone', 'Phone', 'required'); 

    if ($this->form_validation->run()) { 

     $this->welcome_model->InsertStudents(); 
     echo json_encode("Oks"); 
    } else { 

     $data = array(
      'roll' => form_error('roll'), 
      'name' => form_error('name'), 
      'phone' => form_error('phone') 
     ); 

     echo json_encode($data); 
    } 
} 

보기 페이지에서 양식을

<div id="message"> 


</div> 

<?php echo form_open('welcome/CreateStudentsAjax'); ?> 

    <label for="roll">Student Roll Number</label> 
    <input type="text" id="txtRoll" value="" name="roll"/> 

    <label for="Name">Students Name</label> 
    <input type="text" id="txtName" value="" name="name"/> 

    <label for="Phone">Phone Number</label> 
    <input type="text" id="txtPhone" value="" name="phone"/> 

    <input type="submit" name="submit" value="Insert New Students" /> 

    <?php echo '</form>'; ?> 

스크립트를 추가하는 것은이 모두

<script type="text/javascript"> 

     $(document).ready(function(){ 

      $('form').submit(function(){ 
       //alert('ok');  
       $.ajax({ 
        url:this.action, 
        type:this.method, 
        data:$(this).serialize(), 
        success:function(data){ 
         var obj = $.parseJSON(data); 

         if(obj['roll']!=null) 
         {        
          $('#message').text(""); 
          $('#message').html(obj['roll']); 
          $('#message').append(obj['name']); 
          $('#message').append(obj['phone']); 
         } 
         else 
         {        
          $('#message').text(""); 
          $('#message').html(obj); 
         } 

        }, 
        erro:function(){ 
         alert("Please Try Again"); 
        }       
       }); 
       return false; 
      });       
     }); 

    </script> 

입니다. 모두 코드를 즐기기를 바랍니다.