codeigniter - 여러 개의 드롭 다운 및 동일한 URL에 결과 표시

Question

두 번의 드롭 다운이 있으며, 토너먼트 & 카테고리가 있습니다. 보기의 출력이 같은 것입니다 : 옵션의

<select id="tournament"> 
<option selected="selected" value="1">Tournament1</option> 
<option value="2">Tournament2</option> 
<option value="3">Tournament3</option> 
</select> 

<select id="category"> 
<option selected="selected" value="1">Category1</option> 
<option value="2">Category2</option> 
<option value="3">Category3</option> 
</select> 

값은 DB 테이블에서 가져온 있습니다. 이 표에는 토너먼트와 카테고리의 관계가 있습니다. 그 기록은 다음과 같이 보일 :

tournament_id CATEGORY_ID team_id ...

 1   1  1 
     1   1  2 
     1   1  3 
     2   1  4 
     2   2  5 
     2   3  6 

내가 때 "대회"드롭 다운 변경,의 다음, 1에서 2로 말을 드롭 다운 수 있도록되어하고 싶은 "분류" (예 : 팀 이름, 승 등) (단계 2)와 함께 새로운 값 (단계 1) 및 아래 표시된 레코드로 업데이트해야합니다. 즉, URL (localhost/ci/results /)이 변경되어서는 안됩니다.

이 튜토리얼을 따라 step1을 만드는 방법을 알아 냈습니다. dynamic_dependent_dropdown_filtering_with_codeigniter_and_jquery, 하지만 2 단계에서 멈추었습니다.

어떻게 든 컨트롤러와 뷰를 jquery로 트리거해야하는데, 이렇게하면 두 개의 드롭 다운 중 일부가 변경된 후에 새로운 레코드가 표시됩니다.

이 작업을 수행하는 방법에 대한 도움이나 조언이 있으면 감사하겠습니다.

motogp results

---

업데이트 # 1 :

이 내 컨트롤러 (results.php) 인 :

class Results extends CI_Controller { 
public function __construct() 
{ 
    parent::__construct(); 
    $this->load->model("tournaments_model"); 
} 

function index(){ 
    $data['mytitle'] = 'Results'; 

    if($this->input->post('tournaments')){ 
     $tournament_id = $this->input->post('tournaments'); 
    }else{ 
     $tournament_id=1; 
    } 

    if($this->input->post('categories')){ 
     $category_id = $this->input->post('categories'); 
    }else{ 
     $category_id=1; 
    } 

    $data['tournaments'] = $this->tournaments_model->getTournaments(); 
    $data['categories'] = $this->tournaments_model->getCategories($tournament_id); 

    $data['rows'] = $this->tournaments_model->getAll($tournament_id, $category_id); 

    if($data['rows']>0){ 
     $this->load->view('header_view', $data); 
     $this->load->view('results_view', $data); 
     $this->load->view('footer_view'); 
    }else{ 
     $this->load->view('header_view', $data); 
     $this->load->view('norecords_view'); 
     $this->load->view('footer_view'); 
    } 
} 

function postCategory($tournament_id) 
{ 
    $this->load->model("tournaments_model"); 
    $data['categories'] = $this->tournaments_model->getCategories($this->input->post('tournaments')); 
    $data['categories'] = json_encode($data['categories']); 
    $this->load->view('jsonCategory_view', $data); 
} 

이

기본적으로,이 같은 뭔가가 필요 보기 (results_view.php) :

<table> 
<tr> 
<td>Tournament</td> 
<td> 
<?php 
echo '<form id="frmTCG" action="'; echo base_url().'results/" method="post" name="frmTCG"/>'; 

foreach($tournaments as $r){ 
$opTournament[$r->tournament_id] = $r->tournament_name; 
} 

if(isset($_POST['tournaments'])){ 
echo form_dropdown('tournaments', $opTournament, $_POST['tournaments'], 'id="tournament"'); 
}else{ 
echo form_dropdown('tournaments', $opTournament, null, 'id="tournament"'); 
} 

?> 
</td> 
</tr> 
<tr> 
<td>Category</td> 
<td> 
<?php 
foreach($categories as $r){ 
$opCategory[$r->category_id] = $r->category_name; 
} 

if(isset($_POST['categories'])){ 
echo form_dropdown('categories', $opCategory, $_POST['categories'], 'id="category"');     
}else{ 
echo form_dropdown('categories', $opCategory, null, 'id="category"');     
} 
?> 

</td> 
</tr> 
<tr> 
</table> 

이210 (footer_view에서 호출) JQuery와 있습니다 :

$('#tournament').change(function(){ 
var tournament_id = $('#tournament').val(); 

if (tournament_id != ""){ 

    var post_url = "results/postCategory/" + tournament_id; 
    //var post_url = "results/"; 

    $.ajax({ 
     type: "POST", 
     url: post_url, 
     //data:  $('#tournament').serialize(),  
     data: $('#frmTCG').serialize(),// 
     dataType: 'json', 


     success: function(data) 
      { 

      $('#category').empty(); 
      $('#category').show(); 

       $.each(data,function(id, name) 
       {      
       var opt = $('<option />'); 
        opt.val(id); 
        opt.text(name); 

        $('#category').append(opt); 

       }); 

      }, //end success 
     error: function(jqXHR, textStatus, errorThrown) { 
      console.log("getTestData failed with textStatus '" + textStatus + "' errorThrown '" + errorThrown + "'"); 
    } 

    }); 

} 
}); //end change  

$('#category').change(function(){ 
    var category_id = $('#category').val(); 

    if (category_id != ""){ 
     var post_url = "results/postCategory/" + category_id; 
    ...same as $('#tournament').change() 
} 

문제는 $ tournament_id 및 지수 (에서 $ CATEGORY_ID가) 업데이트되지는 결코 그들은 $의 값을 얻을 수 없다는 것입니다 _POST []는 getAll()이 새로운 레코드를 가져 오지 않음을 의미합니다.

두 개의 드롭 다운 중 하나가 변경된 후에 컨트롤러의 index()를 다시 호출하도록하려면 어떻게해야합니까? 고맙습니다.

Answer 1

Karoly가 말했듯이, 이것은 ajax의 문제입니다.

는 대회

function ajax_return_categories($tournament_id = NULL) 
{ 
    if($tournament_id != NULL) 
    { 
     $this->db->select('categories')->from('db_table')->where('category_id',$tournament_id); 
     $query = $this->db->get(); 
     return json_encode($query->result_array()); 
    } 
} 

의 범주를 반환 컨트롤러에서 함수를 만들고 첫 번째 드롭 다운 그런 식으로 뭔가를

$('#tournament').change(function(){ 
    var tournament_id = this.value; 
    var result = $.get('/tournament_controller/ajax_return_categories/'+tournament_id); 
    $.each(result, function(val, text) { 
     $('#category').append(
      $('<option></option>').val(val).html(text) 
     ); 
    }); 
}) 

을 변경할 때 아약스와에서 호출.

는

---

갱신 :

당신은 페이지의 데이터가 드롭 다운 선택에 기반 업데이트하고 사용자가 URL을 변경하지 않으 싶은 경우에, 당신은 요청에 Ajax를 사용하여 데이터를 채울 필요 .

function get_results($tournament_id = NULL, $category_id = NULL){ 

    $data['rows'] = $this->tournaments_model->getAll($tournament_id, $category_id); 

    if($data['rows']>0){ 
     $this->load->view('results_view', $data); 
    }else{ 
     $this->load->view('norecords_view'); 
    } 
} 

하고 드롭 다운이

$('#tournament').change(function(){ 
    var tournament_id = this.value; 
    var result_table = $.get('/tournament_controller/get_results/'+tournament_id); 
    $('#results_holder').html(result_table); 
    var result = $.get('/tournament_controller/ajax_return_categories/'+tournament_id); 
    $.each(result, function(val, text) { 
     $('#category').append(
      $('<option></option>').val(val).html(text) 
     ); 
    }); 
})