Заполнение нескольких текстовых полей из выпадающего списка - CodeIgniter/PHP

Question

У меня есть проект CodeIgniter Я бы хотел «обновить» :) В одной части этого я выбираю значение (первичный ключ) из таблицы и отображаю все данные из это запись. В настоящее время я использую раскрывающееся меню для выбора и кнопку для запуска запроса, который затем отображает данные на той же странице. Таблица имеет следующие поля:

claim_id - primary key 
repair_type 
type 
block 
condition 
defect 
symptom 
repair 
addition 

Моя модель:

class Claim_m extends MY_Model 
{ 
    protected $_table_name = 'claim';    
    protected $_order_by = 'repair_type';    
    protected $_primary_key = 'claim_id'; 

    public function __construct() 
    { 
    parent::__construct(); 
    } 

    public $rules_claim = array(
    'repair_type'=>array(
     'field'=>'claim_id', 
     'label'=>'ID Claima', 
     'rules'=>'required' 
     ) 
    ); 

    public function daj_dropdown() //creates dropdown 
    { 
     $rezultat = $this->db->select('claim_id,repair_type')->get('claim')->result_array(); 
     $dropdown = array(); 
     foreach($rezultat as $r) 
     { 
      $dropdown[$r['claim_id']] = $r['repair_type']; 
     } 
     return $dropdown; 
    } 
} 

Мой контроллер:

class Claims extends Frontend_Controller 
    { 
     public function __construct() 
     { 
      parent::__construct(); 
      $this->load->model('claim_m'); 
     } 


     public function choice() 
     { 
      //validation 
      $rules = $this->claim_m->rules_claim; 
      $this->form_validation->set_rules($rules); 

      if($this->form_validation->run() == TRUE) 
      { 
       $claim_id = $this->input->post('claim_id'); 
       $this->data['zapisi'] = $this->claim_m->daj($claim_id,TRUE); 
      } 

      //dropdown 
      $this->data['dropdown'] = $this->claim_m->daj_dropdown(); 

      //set subview 
      $this->data['subview'] = 'claim/zapis'; 


      $this->load->view('_main_layout', $this->data); 
     } 
    } 

My View (zapis.php):

<?php echo form_open();?> 
    <table class="table"> 
     <tr> 
      <td>Type of repair:</td> 
      <td><?php echo form_dropdown('claim_id',$dropdown); ?></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><?php echo form_submit('submit', 'Izaberi', 'class="btn btn-primary"'); ?></td> 
     </tr> 
    </table> 
<?php echo form_close(); ?> 

<?php 
    if(!isset($zapisi)) 
    { 
     echo 'no records'; 
    } 
    else 
    { ?> 
     <section> 
      <h2>Claim pattern - <u> <?php echo($zapisi->repair_type); ?> </u></h2> 


      <i>Defect type: </i><font color="red"><?php echo($zapisi->type); ?></font></br> 
      <i>Defect block: </i><font color="red"><?php echo($zapisi->block); ?></font></br> 
      <i>Condition code: </i><font color="red"><?php echo($zapisi->condition); ?></font></br> 
      <i>Defect code: </i><font color="red"><?php echo($zapisi->defect); ?></font></br> 
      <i>Symptom code: </i><font color="red"><?php echo($zapisi->symptom); ?></font></br> 
      <i>Repair code: </i><font color="red"><?php echo($zapisi->repair); ?></font></br> 
      <i>Other: </i></br><font color="red"><?php echo($zapisi->addition); ?></font></br> 
     </section> 
    <?php } ?> 

Все это прекрасно работает, но мне нужно сделать его без кнопки на вид. В основном мне нужно записывать все остальные поля, когда выбор изменяется в выпадающем меню без необходимости нажатия кнопки. Я узнал об учебном пособии, когда требуется один файл, но мне нужно представить (после изменения в раскрывающемся меню) 7 полей из таблицы базы данных MySQL (тип, блок, состояние, дефект, симптом, ремонт, добавление).

Я не знаю много о jQuery или Ajax, но я предполагаю, что это необходимо для чего-то подобного. Если кто-то может помочь мне с этим или указать мне на правильный учебник, я был бы благодарен. Спасибо заранее!

Edit: функция Daj() из MY_Model

public function daj($id = NULL, $single = FALSE) 
     { 
      if ($id != NULL) 
      { 
       $filter = $this->_primary_filter; 
       $id = $filter($id); 
       $this->db->where($this->_primary_key,$id); 
       $method = 'row'; 
      } 
      elseif($single == TRUE) 
      { 
       $method = 'row'; 
      } 
      else 
      { 
       $method = 'result'; 
      } 

      $this->db->order_by($this->_order_by); 
      return $this->db->get($this->_table_name)->$method(); 
     } 

Answer 1

Если вы хотите получить данные по изменению ниспадающего, без перезагрузки страницы, вы должны пойти с асинхронным вызовом. Я бы предложил использовать jQuery AJAX, вы можете проверить документацию here.

Проверьте приведенный ниже пример. Детали для запроса задаются в объекте, отправленном в ajax, это должно быть довольно просто. Данные отправляются как объект, но вы также можете отправить всю форму, передав в качестве данных $('#form_id').serialize().

Затем в методе done вы можете поймать любые данные, отправленные в качестве ответа (msg в примере) и использовать их по мере необходимости.

$.ajax({ 
    method: "POST" 
    url: "test.html", 
    data: {field1:'Field1', field2:'Field2'} 
}).done(function(msg) { 
    console.log(msg); 
}); 

Обратно к вашей проблеме. Вам нужно настроить этот вид фрагмента, где URL-адрес должен быть установлен на функцию вашего контроллера. Данные, которые вы должны отправить в ajax, - это значение раскрывающегося списка. Предположим, что идентификатор поля - «dropdownId». Затем данные будут data: {selection: $('#dropdownId').val() }.

Теперь вам нужно только отрегулировать отклик контроллера - повторите его, чтобы читать его с javascript.

Хорошей практикой является возвращение JSON, а затем анализ его на переднем конце. Вы можете создать массив со всеми полями, которые хотите вернуть, а затем закодировать его в JSON в своем контроллере и повторить его.

$arr = ['field1' => 'Val1', 'field2' => 'Val2']; 
echo json_encode($arr); 

Тогда в проделанной функции вашего AJAX вызова, вы будете иметь:

var obj = JSON.parse(msg); 

И вы можете получить доступ к полям типа:

obj.field1, obj.field2... 

Тогда вам просто нужно для установки значений полей (идентификаторы - поле1, поле2 и т. д.):

$('#field1').val(obj.field1); 
$('#field2').val(obj.field2); 
... 

Answer 2

Это один из способов использования JQuery для запроса нового html при изменении раскрывающегося списка.

Добавьте эту функцию в контроллер Claims.php

public function new_select() { 
    $claim_id = $this->input->post('claim_id'); 
    $data['zapisi'] = $this->claim_m->daj($claim_id, TRUE); 
    //output the sub-subview it will be recieved by the ajax success function 
    $this->load->view('claim_detail', $data); 
} 

new_select() будет использоваться в AJAX вызова JQuery, показанного позже.

Измените файл представления zapis.php к этому

<div>Type of repair:</div> 
<div> 
    <?php echo form_dropdown('claim_id', $dropdown, NULL, array('id' => 'repair_select')); ?> 
</div> 
<section id="repair-detail"> 
    <?php 
    $this->load->view('claim_detail'); 
    ?> 
</section> 

Обратите внимание, что атрибут id был добавлен в выпадающем списке. Также обратите внимание, что приведенные выше загрузки представляют собой дополнительный под-просмотр, который представляет собой новый файл вида - claim_detail.php - следующим образом.

<h2> 
    Claim pattern - <u><?php echo isset($zapisi) ? $zapisi->repair_type : "No Repair type selected"; ?></u> 
</h2> 
<div><?php 
    if(isset($zapisi)) 
    { 
    ?> 
    <i>Defect type: </i><font color="red"><?php echo $zapisi->type; ?></font><br> 
    <i>Defect block: </i><font color="red"><?php echo $zapisi->block; ?></font><br> 
    <i>Condition code: </i><font color="red"><?php echo $zapisi->condition; ?></font><br> 
    <i>Defect code: </i><font color="red"><?php echo $zapisi->defect; ?></font><br> 
    <i>Symptom code: </i><font color="red"><?php echo $zapisi->symptom; ?></font><br> 
    <i>Repair code: </i><font color="red"><?php echo $zapisi->repair; ?></font><br> 
    <i>Other: </i><br><font color="red"><?php echo $zapisi->addition; ?></font><br> 
    <?php 
    } 
    ?></div> 

<script> 
    $(document).ready(function() { 
    //handle changes to the dropdown 
    $("#repair_select").on('change', function (event) { 
     $.ajax({ 
     type: 'POST', 
     url: "claims/new_select", 
     data: {claim_id: $(this).val()}, //send new select id to server 
     dataType: 'html', 
     success: function (returned) { 
      //replace the html inside <section id="repair-detail"> with the returned html 
      $("#repair-detail").html(returned); 
     } 
     }); 
    }); 
    }); 
</script> 

Новый вид имеет javascript для обработки события изменения раскрывающегося списка. В основном он замечает изменение в раскрывающемся списке и отправляет вновь выбранный claim_id функции контроллера new_select, которая отвечает, отправив обратно html, заполненную значениями базы данных. Функция ajax success: заменяет html внутри <section id="repair-detail"> на returned html. Страница динамически обновляется с новым контентом!

Я не тестировал это, поэтому, пожалуйста, простите любые синтаксические ошибки. Но концепция звучит и является очень распространенным решением для такого типа ситуаций.