jquery - jquery modal 経由で codeigniter コントローラーにフォームを送信する

Question

ajax jquery を介してフォームを送信する際に問題が発生しました。私の問題は、ページを更新せずにjqueryモーダルフォームをcodeigniterコントローラーに送信する方法ですか? 同時に、送信されたデータに codeigniter コントローラー (検証) からのエラーが含まれている場合、jquery はどのようにエラーメッセージを表示しますか?

ここに私のコードがあります

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();
    }
}

見る

<div id="dialog" title="<?php echo $this->lang->line('add_new_menu') ?>">
<div class="notice_msg"><?php echo $this->lang->line('compulsary'); ?></div><br />

<div class="errors"><!-- append the error message here --></div>

<?php echo form_open('','class=normal_form name=create_menu id=menu_form'); ?>
<label><?php echo $this->lang->line('menu_name'); ?></label><?php echo form_input('sysmenu_name'); ?>*<br />
<label><?php echo $this->lang->line('parent_menu'); ?></label><?php //echo form_input('sysmenu_parent_id'); ?><?php echo form_dropdown('sysmenu_parent_id', dropdown_where('sysmenu_id','sysmenu_name',"sysmenu_level = 1",'base_sysmenu'), ''); ?><br />
<label><?php echo $this->lang->line('menu_link'); ?></label><?php echo form_input('sysmenu_link'); ?>*<br />
<label><?php echo $this->lang->line('menu_sequence'); ?></label><?php echo form_input('sysmenu_sequence','','size=12, maxlength=2'); ?>*<br />
<label>&nbsp;</label><?php //echo form_submit('data',$this->lang->line('btn_save')); ?>
<?php echo form_close(); ?>

score 1 · Accepted Answer

次の基準を使用します。

コントローラクラス内メソッドを使用してビューページを初期化します。

 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>

これで全部です。すべてのコードをお楽しみください。

score 0 · Accepted Answer

フォームを手動で送信し、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
  }
 });
}

score 0 · Accepted Answer

私は助けようとしますが、あなたはそれをテストする必要があります:

フォームが false を返すことを確認して、デフォルトの動作を無効にします ( http://s.zah.me/IouBgKのように、いくつかの変更を加えて、を追加して bereturn false;に変更dataしますdata : $('#yourformID').serialize(),)。
コントローラーで送信されたデータをチェックして、それが ajax リクエストであるかどうかを確認する必要が$this->input->is_ajax_request()あります。その後、検証の結果またはコントローラーが行うことをエコーします。

jquery - jquery modal 経由で codeigniter コントローラーにフォームを送信する

3 に答える 3

Related

Reference