Home » Php » php – Display Jquery chosen data from database to update [Codeigniter]

php – Display Jquery chosen data from database to update [Codeigniter]

Posted by: admin July 12, 2020 Leave a comment

Questions:

I have jQuery chosen named centro medicos in an insertion form, I can select all data, select some of the data. If I click select all here is the result:

enter image description here

Let’s say that I select only 3 items and then I save. Now I want to edit. When the edit page is loaded I want to have the 3 items that I selected loaded:

enter image description here

And if I click on select all (Selectionar todo) the rest of items are displayed.

1- Controller

public function edit_form()
{
    $edit_id= $this->uri->segment(3);
    $data['ITEM_EDIT'] = $this->model->get_title_by_id($edit_id);
    $data['ITEM_ALL']= $this->model->get_all_title();
    $this->load->view('view_edit_form', $data);
}

2- View

<select class="chosen-select"  multiple  name="item[]">
<?php 
    foreach($ITEM_ALL as $item_all) {
        foreach($ITEM_EDIT as $item_edit) {
            if($title_edit->title== $title_all->title)
            { 
                 echo '<option value="'.$item_all->title.'" class="'.$item_all->id.'" selected>'.$item_all->title.'</option>';
             }
             else 
             {
                 echo '<option value="'.$item_all->title.'" class="'.$item_all->id.'" >'.$item_all->title.'</option>';
             }
        }
    }
?>
 </select>

3- jQuery

$(".chosen-select").chosen({
    no_results_text: "Oops, nothing found : ",
})

How can I achieve this?

How to&Answers:

@Diasline
This code works fine i’ve checked in my system and reproduced the error you got.
This is a sample code created using the chosen. I’ve given a select all option in this code by clicking a button. Here is the code go through it.

<html lang="en">
<head>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <button id="select-all">Select All</button><br/>
           <select data-placeholder="Chosen Example" multiple class="chosen-select" tabindex="18" id="multiple-label-example">
            <option value="">American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option selected>Brown Bear</option>
            <option selected>Giant Panda</option>
            <option>Sloth Bear</option>
            <option>Sun Bear</option>
            <option>Polar Bear</option>
            <option>Spectacled Bear</option>
          </select>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script>
$('#select-all').click(function(){
    $('#multiple-label-example option').prop('selected', true); // Selects all options
    $("#multiple-label-example").trigger("chosen:updated");
});
</script>

Here you can see on the click event of the button i’ve added a line to
change all the options as selected and then a line below that to
update the chosen. If you don’t give the last line i.e , if you don’t
update the chosen it will not work. It will only work after updating
the chosen.Hope this solves your issue .please let me know if the
issue persists.

Answer:

i think you need to update plugin state.

$(function(){
    $(".chosen-select").trigger("chosen:updated");
})

Answer:

Your PHP snippet needs to be changed to something more like:

<select class="chosen-select"  multiple  name="title[]">
<?php 
    $selected_titles = array_map(function ($item) { return $item->title; }, $TITLE_EDIT);
    foreach($TITLE_ALL as $title)
    {
            $selected = in_array($title->title, $selected_titles) ? 'selected' : '';
            echo '<option value="'.$title->title.'" class="'.$title->id.'" '.$selected.'>'
                 .$title->title
                 .'</option>';
    }
?>
 </select>

Beyond that, without a screenshot or other info, it is unclear what you mean when you say it doesn’t work.

Answer:

Thanks to every one that helped me with this issues.
The response of Darshan works in deed, but it’s not regarding my case because the select should be from 2 tables in other to edit it.
when i click on edit I grab the edit id that is found in the second table.
table one: from it i grab all data to save in database

1- Table Centro_medico

id          name
1           hosptal a
2           hospital b
3           hospital c
4           hospital d
5           hospital e

After select one or more in this table, we save data in the second table:

2- table 2 (hospital)

id  id_lind  id_centro_medico
1   2        1
2   2        2
3   2        3

the id_link column is the id pass to url in the edit_form

1- controller

public function edit_form()
{
$edit_id= $this->uri->segment(3);

$data['ITEM_ALL']= $this->model->get_all_centro_medico();
$this->load->view('view_edit_form', $data);
}

2- view edit form

<div class="form-group">
<label class="control-label col-sm-4">Centro médico</label>
<div class="col-sm-4">
<button type="button" class="chosen-toggle select col-xs-6">Select all</button>
<button type="button" class="chosen-toggle deselect col-xs-6">Deselect all</button>

<select  class="form-control chosen-select" data-placeholder="Comienza a escribir un nombre para filtrar." multiple  name="seguro_medico[]" >

<?php 
// I select id_centro_medico equal to edit_id and equal to id of each centro_medico row  ,
// and I compare them

            foreach($ITEM_ALL as $row)
            { 

            $id_centro_medico=$this->db->select('id_lind')->where('id_lind',$edit_id )
             ->where('id_centro_medico',$row->id)
             ->get('hospital')->row('id_lind');

                    if($edit_id==$id_centro_medico){
                            $selected="selected";
                    } else {
                           $selected="";
                    }

            echo "<option value='$row->id_sm.' $selected>$row->title</option>";
            }
            ?>
            </select>
            </div>
            </div>

At last i don’t need to use :

$(function(){
    $(".chosen-select").trigger("chosen:updated");
})