1

こんにちは、私は jquery -ajax を初めて使用します。CI に参加するための助けが必要です。

AJAX を使用したフォームの送信に関するこのチュートリアルに従いましたが、この機能を CodeIgniter サイトに追加したいと考えています。私がやりたいのは、ユーザーがフォームを送信したとき、各入力フィールドに個別に表示する検証エラーがある場合 (ネイティブ ci プロセスのように)、または validation_errors() 関数を介してこれが不可能な場合です。エラーが発生しなかった場合は、フォームの上に成功メッセージが表示されます。

これまでの私のコードは次のとおりです。

私の見解

 // If validation succeeds then show a message like this, else show errors individually or in validation_errors() in a list
<div class="alert alert-success">Success!</div>
<?php echo validation_errors(); //show all errors that ajax returns here if not individualy  ?>

<?php echo form_open('admin/product/add, array('class' => 'ajax-form')); ?>
<p>
    <label for="product_name">Product *</label>
    <input type="text" name="product_name" value="<?php echo set_value('product_name', $prod->product_name); ?>" />
    <?php echo form_error('product_name'); ?>
</p>
<p>
    <label for="brand">Brand</label>
    <input type="text" name="brand" value="<?php echo set_value('brand', $prod->brand); ?>" />
    <?php echo form_error('brand'); ?>
</p>
...

私のコントローラー

 public function add($id){
           // set validation rules in CI native
           $rules = $this->product_model->rules;
           $this->form_validation->set_rules($rules);

           if ($this->form_validation->run() === true) {
                       // get post data and store them in db
          $data = $this->input_posts(array('product_name', 'brand', 'category_id', 'description'));
          $this->product_model->save($data, $id);
    // no errors - data stored - inform the user with display success-div
     } else {
    // validation failed - inform the user by showing the errors
     }
//load the view
$this->load->view('admin/products/add', $data);
}

そして、これがjsスクリプトです

 $(document).ready(function () {
 $('form.ajax-form').on('submit', function() {
  var obj = $(this), // (*) references the current object/form each time
   url = obj.attr('action'),
   method = obj.attr('method'),
   data = {};

  obj.find('[name]').each(function(index, value) {
   // console.log(value);
   var obj = $(this),
    name = obj.attr('name'),
    value = obj.val();

   data[name] = value;
  });

  $.ajax({
   // see the (*)
   url: url,
   type: method,
   data: data,
   success: function(response) {
    console.log(response); // how to output success or the errors instead??
   }
  });
  return false; //disable refresh
 });
});

ajax リクエストを介して検証結果 (成功または投稿エラー) を渡し、ビューに表示するにはどうすればよいですか?? 私が行ったいくつかの小さな調査から、(2 つのコントローラーを使用する代わりに) ネイティブ プロセスと ajax 要求の両方を保持する単一のコントローラーを使用できることがわかりましたが、私の主な問題は、結果がどのように理解できないかです。検証の js スクリプトを通過し、ビューに表示されますか?? アラート ボックスに何も表示したくないことに注意してください。代わりに、結果を div または個別に (可能であれば) エラーを表示します。

編集アプリケーションにいくつかの変更を加えました。これまでのコードは次のとおりです。

コントローラー

public function manage($id = NULL){
    $this->load->library('form_validation');

    $data['categ'] = $this->category_model->with_parents();

    //fetch a single product or create(initialize inputs empty) a new one
    if (isset($id) === true) {
        $data['prod'] = $this->product_model->get($id);
        $data['attr'] = $this->attribute_model->get_by('product_id', $id, null, true);
    } else {
        $data['prod'] = $this->product_model->make_new();
        $data['attr'] = $this->attribute_model_model->make_new();
    }

    if (isset($_POST['general_settings'])) {
        if ($this->form_validation->run('product_rules') === true) {
            // get post inputs and store them in database
            $data = $this->product_model->input_posts(array('product_name', 'brand', 'category_id', 'general_description'));
            $this->product_model->save($data, $id);

            $status = true;
        } else {
            // validation failed
            $status = validation_errors();
        }
        if ( $this->input->is_ajax_request() ) {
            echo json_encode($status);
            exit;
        }
        redirect('admin/product');
    }
    //if (isset($_POST['attributes_settings'])) { the same thing here  }                

    // load the view
    $this->load->view('admin/products/manage', $data);
}

そしてjs

success: function(response) {
    //console.log(response);
    if (data.status === true) {
        $('#ajaxResults').addClass('alert alert-success').html(response);
    } else {
        $('#ajaxResults').addClass('alert alert-error').html(response);
    };

}

しかし、私はいくつかの問題を抱えています

  1. エラーがない場合、validation_errors() からアラート エラーとしてエラー メッセージを取得しますが、アラート成功の代わりに、アラート エラーでも true を取得します。

2.成功メッセージを返すにはどうすればよいですか? 例えば。「保存が完了しました!」というメッセージ。

  1. ajax 以外のリクエストでは、データはデータベースに保存されますが、ajax の場合は保存されません。何が間違っているのでしょうか？
4

2 に答える 2

2

HTML:

<div id="ajaxResults"></div>

JavaScript ajax:

 success: function(response) {
    $('#ajaxResults').text(response);
   }

あなたが書いたこのスクリプトは、検証が成功した場合のみですよね?

違う。「成功」のコードは、サーバーから応答が返されるたびに実行されます (HTTP ヘッダーが 200 であると仮定)。あなたの JavaScript は、サーバーにエラーがあるかどうかを知っていますか? いいえ。

検証が失敗したか成功したかを認識するには、JavaScript が必要です。それには多くの方法があります。これらの 1 つは、表示するメッセージを送信し、その後に 0 または 1 を送信する可能性があります。

したがって、PHP は次のようになります。

return "0 " . $errorMessage;

と

return "1 " . $successMessage;

substringメッセージが 0 で始まるか 1 で始まるかを、JavaScript が if ステートメントと で認識する必要があります。

于 2013-07-17T12:01:23.350 に答える
0

この方法を使用してください。これがうまくいくことを願っています

<script type='text/javascript'>
var base_url = '<?=base_url()?>';

function ajax_call()
{
   var ids = $("#all_users").val();

   $.ajax({
      type:"POST",
      url: base_url+"expense/home/get_expense",
      data: "userid=" + ids,
      success: function(result){
      $("#your_div_id").html(result);
 }
 });

}
</script>
于 2013-07-18T03:51:16.693 に答える