Display Jquery chosen data from database to update [Codeigniter]

Question

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:

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:

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?

Are you using the [jquery chosen plug-in](https://harvesthq.github.io/chosen/)? I think you have to call `chosen:updated` like `$('.chosen-select').trigger('chosen:updated');` tl;dr; [This answer.](https://stackoverflow.com/a/9161115/3585500) — ourmandave, Oct 25 '17 at 17:54
Can you [edit](https://stackoverflow.com/posts/46936857/edit) your post to include the HTML output from **2-View**? I tried to recreate the issue (without knowing what your data consists of but made samples based on how it is used) but it appears to show the selected item as selected... [see demo here](http://phpfiddle.org/main/code/7dyc-pasm) — Sᴀᴍ Onᴇᴌᴀ, Nov 09 '17 at 01:29
Do you want to display it on select or do you want to display data after selecting option from select? — Bluetree, Nov 09 '17 at 03:41

score 4 · Accepted Answer · answered Nov 12 '17 at 08:45

@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.

Steve · Answer 2 · 2017-11-13T19:40:15.327

1

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.

edited Nov 13 '17 at 19:40

answered Nov 08 '17 at 20:44

Steve

776
6
13

I updated my question, still any response. No one need my bounty ! – Diasline Nov 09 '17 at 22:14
1

steve's code should work - the only thing which should be changed is the line `$selected = in_array($title, $selected_titles) ? 'selected' : '';` to `$selected = in_array($title->title, $selected_titles) ? 'selected' : '';` – Atural Nov 10 '17 at 08:58

score 1 · Answer 3 · answered Nov 10 '17 at 06:08

1

i think you need to update plugin state.

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

answered Nov 10 '17 at 06:08

romal tandel

481
12
19

score 0 · Answer 4 · answered Nov 15 '17 at 19:05

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

Display Jquery chosen data from database to update [Codeigniter]

4 Answers4