0

私のホームページには一連のチェックボックスがあります (現在は何もしません):

    <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 のような URL をサポートする単純なバックエンドを作成して、面白い質問と人気のある質問を表示します。オプションごとにクエリ パラメータがあります。サーバーはクエリ パラメータをチェック@questionsし、適切なセットで更新された変数を返します。@questionsビューはそれらを 1 つずつ反復して表示します。

ここに私の目標があります: ユーザーがチェックボックス (面白いものや人気のあるものなど) を選択すると、ホームページにサーバー (AJAX?) を呼び出して、ページに表示される一連の質問を更新して、ユーザーの選択に一致させたいと思います (理想的には読み込み中にスピナーが表示されます)。jQuery などを使用できます。

どうすればこれを行うことができますか？バックエンドには Sinatra / Ruby、UI には Bootstrap を使用しています。jQuery など、お勧めのものは何でも使用できます :)

4

1 に答える 1

1 
<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-13T22:17:53.000 に答える