codeigniter - 在同一網址上顯示多個下拉菜單和結果

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> 

選項的值是從數據庫中取得。在這張桌子上，我有錦標賽和類別之間的關係。它記錄的是這個樣子：

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，再下拉菜單，「類別」應該用新的值（步驟1）更新，並在下面顯示帶有結果的記錄（例如團隊名稱，勝利等）（步驟2）。這意味着，url （localhost/ci/results /）不應該改變。

我想出瞭如何製作step1，按照本教程： dynamic_dependent_dropdown_filtering_with_codeigniter_and_jquery, 但卡在step2上。

我想，不知何故，我必須觸發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> 

這是（從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) 
     ); 
    }); 
}) 

類似的東西從AJAX調用它。

---

更新：

如果你想在頁面上的數據更新基於下拉選擇，你不想要的網址改變，你需要使用Ajax請求，並填充數據。

在result.php控制器創建一個函數，返回的結果：

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