設置查詢參數並重新載入頁面複選框被選中

我有一組複選框（目前什麼都不做）在我的主頁：設置查詢參數並重新載入頁面複選框被選中

<ul class="nav nav-list"> 
     <li class="nav-header">Questions</li> 
     <li><label class="checkbox"> <input type="checkbox"> All </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Funny </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Popular </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Helpful </label></li> 
    </ul>

我寫了一個簡單的後端，現在支持例如：http://myhomepage.com?funny=1&popular=1這樣的網址可以顯示既有趣又受歡迎的問題。每個選項都有一個查詢參數。服務器檢查查詢參數並返回一個已更新的@questions變量和相應的集合。該視圖迭代通過@questions並逐一顯示它們。

這是我的目標：當用戶選擇複選框（例如有趣和流行）時，我希望主頁可以調用服務器（AJAX？）來更新頁面上顯示的一組問題以匹配用戶的選擇（理想情況下顯示爲正在加載的東西）。我可以使用jQuery或其他任何東西。

我該如何去做這件事？對於後端，我使用Sinatra/Ruby，Bootstrap用於用戶界面，並且我可以使用jQuery或其他任何你推薦的方法:)

來源

2012-12-13 tonic

所以你只是缺少js代碼的Ajax發射/處理？在示例網址上，響應看起來像什麼樣的請求？ – PinnyM

嗯，正如我上面提到的：例如，http://myhomepage.com?funny=1&popular=1將顯示既有趣又流行的問題。這有幫助嗎？不知道這是你在找什麼！ – tonic

我的意思是響應會有什麼樣的結構 - 它會是JSON編碼的對象還是隻是一個HTML代碼片段？你能在你的文章中提供樣本回復嗎？更好的是，你能提供構建響應的後端代碼嗎？ – PinnyM

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
</head> 
<body> 
<ul class="nav nav-list"> 
     <li class="nav-header">Questions</li> 
     <li><label class="checkbox"> <input type="checkbox"> All </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Funny </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Popular </label></li> 
     <li><label class="checkbox"> <input type="checkbox"> Helpful </label></li> 
    </ul> 

    <div id="result"></div> 

<script> 

$(function(){ 
var Url; 
$("input[type='checkbox']").click(function(){ 
    Url = 'http://myhomepage.com?'; 
    $.each($("input[type='checkbox']"),function(){ 

    if(this.checked) 
    { 
     var html = $.trim($(this).parent().html().replace('<input type="checkbox"> ','')); 
     Url = Url + html + "=1&"; 
    } 

    }); 
    console.log(Url); 
    $.ajax({ 
     url: Url, 
     success: function(data) { 
     $('#result').html(data); 
     alert('Load was performed.'); 
     } 
    }); 

}); 

}); 
</script> 
</body> 
</html>

來源

2012-12-13 22:17:53 Anass

謝謝，我會給這個鏡頭！ – tonic

這太棒了！什麼時候取消選中複選框？通過這個工作... – tonic

我編輯了代碼！看看！這應該現在工作！ – Anass

設置查詢參數並重新載入頁面複選框被選中

回答

相關問題