How to save multiple rows using jquery ajax in CI

Question

In my html, rows are added dynamically by pressing a button.

<button id="add-row">Add New Row</button>

<div class="container">
  <div class="row"><!-- Begins with 1 row -->
    <input type="text" class="text"><input type="number" class="number">
  </div>
  <div class="row"><!-- IF user adds 1 row -->
     <input type="text" class="text"><input type="number" class="number">
  </div>
</div>
<button id="save">Save</button>

In my jQuery

//Add row
$('#add-row').on('click',function(){
      $('.container').prepend('<div class="row">'+
                                '<input type="text" class="text"><input type="number" class="number">'+
                              '</div>');
});
//Save
$('#save').on('click',function(){
  var text = $('.text').val();
  var number = $('.number').val();
  $.ajax({
  type: "POST",
  url: BASE_URL+'save/saverows',
  dataType: 'html',
  data: {text:text,number:number},
  async: false,
  success: function(data){ 
      alert('Rows saved!');
      } 
  }); 
});

In my CI Controller

public function saveRows(){
    $data = array(
        'text' => $this->input->post('text'),
        'number' => $this->input->post('number')
    );

    $this->Row_model->saveAll($data);
}

In my CI Model

 public function saveAll($data){
    $this->db->insert('savehere', $data);
  }

Database table looks like this

ID  TEXT  NUMBER
1   a     11
2   b     22
3   c     33
4   d     44

What I have is just for saving a single row only. How can I accomplish this if there are more than 1? I have an idea of using loop but I do not know how to implement it here. I've also read about CI's inserting by batch but it has a fixed number of rows to be saved.

My problem is in the #save onclick. How to retrieve all the text and number values and then pass it to jquery ajax then to codeigniter controller.

Using Ilan Hasanov's answer below. The console.log of the arrays is:

for (var i = 0; i < arrText.length; i++) {
      console.log(arrText[i]+" "+arrNumber[i]);
}
text 100
text2 55

Change dataType: 'html' to dataType: 'json'

Parth Trivedi
– Parth Trivedi

2016-01-07 13:05:18 +00:00
Commented Jan 7, 2016 at 13:05 — Parth Trivedi
– Parth Trivedi, Commented Jan 7, 2016 at 13:05
How would data :{} look like?

Dev
– Dev

2016-01-07 13:06:12 +00:00
Commented Jan 7, 2016 at 13:06 — Dev
– Dev, Commented Jan 7, 2016 at 13:06
Its json object. Do it and it will work as expected.

Parth Trivedi
– Parth Trivedi

2016-01-07 13:06:52 +00:00
Commented Jan 7, 2016 at 13:06 — Parth Trivedi
– Parth Trivedi, Commented Jan 7, 2016 at 13:06

CodeLoop · Accepted Answer · 2023-04-23 15:15:54Z

2

I have created a function for you that will loop and asign your inputs.

$('#add-row').on('click', function() {
$('.container').prepend('<div class="row">' + '<input type="text" class="text"><input type="number" class="number">' + '</div>');
});

//Save
$('#save').on('click', function() {
var arr = [];
  $(".row").each(function(index) {
  var text   = $(this).find('input[type=text]').eq(index).val();
  var number = $(this).find('input[type=number]').eq(index).val();
   arr.push({
      text: text,
      number: number
   });
});

$.ajax({
      type: "POST",
      url: BASE_URL+'save/saverows',
      data: {batch:arr},
      async: false,
      success: function(data){
          alert('Rows saved!');
      }
  });
});

In you Controller you do

public function saveRows(){
$this->db->insert_batch('savehere', $this->input->post('batch'));
}

'savehere' replace to your table name

We made the array before in the jQuery in your database structure so it has to be inserted nice and short code.

Depending on your database structure

arr.push({
   text: text,
   number: number
});

or if in your database uppercase then

arr.push({
   TEXT: text,
   NUMBER: number
});

edited Apr 23, 2023 at 15:15

CodeLoop

373 bronze badges

answered Jan 7, 2016 at 13:03

Ilanus

6,9585 gold badges15 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Dev Over a year ago

My problem begins in the AJAX in jQuery. How to pass multiple rows with the same columns. In the data line of the AJAX.

jagad89 Over a year ago

@IIan I think he have multiple text and number fields. he want to submit multiple objects. So it might be needed to iterate over text and number input values

Dev Over a year ago

Yes. My problem is in the #save onclick. How to retrieve all the text and number values and then pass it to jquery ajax then to codeigniter controller.

Ilanus Over a year ago

@iamDevlin you need to loop the dynamic inputs see my edit

Dev Over a year ago

I tried it. Nothing is saved. Nothing happens. No error in the console. EDIT: I was using json before so I changed it to html but still not saved. I get the alert Rows saved! though.

|

Pravesh Mehta · Accepted Answer · 2016-01-07 13:37:40Z

0

Take name and ID of every input field, which should be unique Send the form by serializing to controller

answered Jan 7, 2016 at 13:37

Pravesh Mehta

2281 silver badge9 bronze badges

Comments

jagad89 · Accepted Answer · 2016-01-07 19:07:58Z

0

At server end we need to generate array of rows like shown here

//Save
$('#save').on('click',function(){
    var data = [];
    $('.text').each(function(index){
        // text and number are datatypes in database. so i mentioned respected column name
        var row = { "text_col": $(this).val(), "number_col": $('.number')[index].val()   }; 
   data.push(row);
     });

    $.ajax({
          type: "POST",
          url: BASE_URL+'save/saverows',
          dataType: 'json',
          data: data,
          async: false,
          success: function(data){
        if(data == "done"){
        alert('Rows saved!');
        }
    }
  });
});

Controller:

public function saveRows(){
    if ($this->input->is_ajax_request()){
    $data = $this->input->post();
    // I assume row_model already loaded by you.
    $this->Row_model->saveAll($data);
    $this->output->set_output("done");
    }
    $this->output->set_output("failed");
}

Inside Row_model

public function saveAll($data){
    $this->db->insert_batch('table_name', $data);
 }

I hope this will helps. I have not tested code. So if you find any problem feel free to edit.

edited Jan 7, 2016 at 19:07

answered Jan 7, 2016 at 17:00

jagad89

2,6431 gold badge24 silver badges31 bronze badges

4 Comments

Dev Over a year ago

$('.text').each(function(index,val). Wouldn't this just loop through the text inputs? I'm not so familiar with the index,val parameters. EDIT: I think I get it. I will give this a try.

jagad89 Over a year ago

@iamDevlin good catch. updated answer. EDIT: Hope you get solution.

Dev Over a year ago

Uncaught TypeError: val.val is not a function

jagad89 Over a year ago

Updated answer we need to pass that object again to jQuery

Collectives™ on Stack Overflow

How to save multiple rows using jquery ajax in CI

3 Answers 3

12 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related