Home/ Questions/Q 8990209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:27:06+00:00

I have a set of checkboxes (that currently do not do anything) on my

  • 0

I have a set of checkboxes (that currently do not do anything) on my homepage:

    <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>

I wrote a simple back-end right now that supports URLs like: http://myhomepage.com?funny=1&popular=1 to show questions that are both funny AND popular, for example. There’s a query parameter for each option. The server checks the query parameters and returns an updated the @questions variable with the appropriate set. The view iterates through @questions and displayed them one by one.

Here’s my goal:
As the user selects checkboxes (e.g. funny and popular), I’d love to have the homepage make calls to the server (AJAX?) to update the set of questions displayed on the page to match the user’s selections (ideally with a spinner displayed as stuff is loading). I can use jQuery or just about anything else.

How would I go about doing this? For the back-end, I’m using Sinatra / Ruby, Bootstrap for the UI, and I can use jQuery or just about anything else you recommend 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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>
    • 0