CODEWITHSUNDEEP
phpajaxcodeigniterbootstrap-modal
MSE
MSE

Reputation: 73

Insert data from modal without refreshing the page

I want to create a modal that will not refresh my page but i don't know how. Some says i will use ajax but i'm confuse on how will i use ajax in my codes. please help me

VIEW:

  <div clas="container-fluid">
      <div class="form-group">
    <div class="col-sm-10">
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Add Ingredients</h4>
            </div>
            <div class="modal-body">
              <div clas="container-fluid">
      <?php echo form_open('dashboard/uploadIngredients', 'class="form-horizontal" enctype="multipart/form-data"'); ?>
    <div class="form-group">
      <div class="col-sm-10">

        <select required class="form-control" name="ingredient_category">

          <option value="" selected disabled>Select Ingredient Category</option>
      <option value="All">All</option>
      <?php foreach($this->products_model->getCategory() as $row): ?>
        <option value="<?php echo $row->category_id ?>"><?php echo $row->category_name; ?></option>
      <?php endforeach; ?>
        </select>

      </div>
    </div>
  <div class="form-group">
      <div class="col-sm-10">
        <textarea class="form-control" name="ingredients" rows="5" placeholder="Ingredients (EX. onion, oil, pasta)" required></textarea> 
      </div>
    </div>

    <div class='form-group'>
      <div class="col-sm-10">
        <button class="btn btn-lg btn-positive" type="submit"><i class="glyphicon glyphicon-ok"></i> Save Ingredient</button>
      </div>
    </div>
  <?php echo form_close(); ?></div></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div> </div> </div></div> </div>
    </div>

   </div>

CONTROLLER:

public function uploadIngredients() {

    foreach(explode(',', $this->input->post('ingredients')) as $key => $value)
        {
            if (!$this->products_model->getIngredientByName($value)) {
                $saveData[] = array(
                    'ingredient_id' => null,
                    'name'  => trim($value)
                );  
            }
        }

    $ingredient_id = $this->products_model->saveIngredients($saveData); 
    foreach (explode(',', $this->input->post('ingredient_category')) as $key => $value)
    {
     foreach ( $ingredient_id as $key => $str ){
        $joinData[] = array(
                            'ingredient_id'     => $str,
                            'category_id'       => intval($value)
        );
}
        //var_dump($joinData); die();
        $this->products_model->saveCategoryIngredients($joinData);

        redirect('dashboard/add_product');
        }


}/* end of uploadIngredients() */

MODEL:

public function saveIngredients($ingredient_id)
    {
        foreach($ingredient_id as $row => $value) {
            $query=$this->db->where('ingredient_id', $value->ingredient_id);
                $this->db->insert('ingredient', $value);
                $insert_id[] = $this->db->insert_id();  
        }
        return $insert_id;
    }

Upvotes: 1

Views: 3931

Answers (2)

Wahid Masud
Wahid Masud

Reputation: 1093

at the last form group you are using a button of type submit. whenever you hit the button it will submit all the data and refresh the page. so if you don't want to reload the page you should not use a submit type button. rather you can use a normal button with ajax function call.

example: 

<button class="btn btn-lg btn-positive" type="button" onclick="return ajaxFunction();"><i class="glyphicon glyphicon-ok"></i> Save Recipe</button>

ajax example: 

ajaxFunction(){
    $.ajax({
        url: //a php file's location that will receive and process all the data
        type: 'POST',
        data: //json or javascript object, for example, var1:'value1', in the php file you will get the value of var1 by using $_POST['var1'], if you use multiple variable as data then use a curly bracket with them, for example, {var1:'value1',var2:'value2'}
        success: function(response){
            //the response variable will hold anything that is written in that php file(in html) and anything you echo in that file
        }
     });return false;
}

Upvotes: 2

Visarut Sae-Pueng
Visarut Sae-Pueng

Reputation: 353

using ajax

it's a better way

$.ajax({
    url: "localhost/codeigniter-project/index.php/controller",
    type: "POST", // you can use GET
    data: {name: 'John'}, // post data
    success: function(data){
        console.log(data); // after success
    }
});

Upvotes: 1

Related Questions