How to render different url based on checkbox in Ajax?

Question

I want to change the view of one page depending on which checkbox is checked. Also when one is checked another becomes unchecked.

<input class="searchType" type="checkbox"></input>
<input class="searchType2" type="checkbox"></input>

I tried something like this but I don't know how to add another solution(if another checkbox is checked)

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "GET",
                url: 'projects/index',
                data: $(this).attr('id'),

                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });
      $('.searchType2').click(function() {
          alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
          if(this.checked){
              $.ajax({
                  type: "GET",
                  url: 'projects/categories',
                  data: $(this).attr('id'), 

                  success: function(data) {
                      alert('it worked');
                      alert(data);
                      $('#container').html(data);
                  },
                  error: function() {
                      alert('it broke');
                  },
                  complete: function() {
                      alert('it completed');
                  }
              });

          }
      });

When I try code like this, in the server console I get for first checkbox:

Rendering projects/index.html.erb
Completed 200 OK in 217ms (Views: 197.8ms | ActiveRecord: 7.0ms)

And if other is checked

Rendering projects/categories.html.erb
Completed 200 OK in 217ms (Views: 197.8ms | ActiveRecord: 7.0ms)

It seems like it works but in reality, it does not change any route, all remains the same

Cheers

If your logic flow is hitting the `error` handler it means there was a problem on the server side. As such you need to debug the code that's run in your `projects/index` endpoint, not the JS. — Rory McCrossan, Jun 25 '19 at 09:00
This means your request is failing. Check the response for server side errors — frobinsonj, Jun 25 '19 at 09:01
First, verify your request URL, are you accessing correct URL or not? you can use tools like a [postman](https://www.getpostman.com/) to troubleshoot server response and correct request format — Harsh kurra, Jun 25 '19 at 09:05
oh, it was a typo in the index method, now the request is success. But still, don't know how to change page based on which checkbox is checked. Can you please review updated question — goldie, Jun 25 '19 at 10:10
Is this what you're looking for: https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery?rq=1 — freedomn-m, Jun 25 '19 at 14:56

score 0 · Answer 1 · edited Jun 25 '19 at 14:54

0

Your input has no id attributes, please add the attributes

HTML

<input id="1" value="1" type="checkbox" class="searchType">
<input id="2" value="2" type="checkbox" class="searchType">

Javacript

$('.searchType').click(function() {
    var input = $(this);
    var val = input.val();
       if(input.is(':checked')){
            $.ajax({
                type: "GET",
                url: 'projects/index',
                data: {id : val},

                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

edited Jun 25 '19 at 14:54

freedomn-m

27,664
8
35
57

answered Jun 25 '19 at 09:16

Ntiyiso Rikhotso

644
6
15

Where do you get that they are not checkboxes, I'm seeing that they are checkboxes and the developer also added `if(this.checked){` to imply that they are either checkboxes or radio buttons. What else can be `checked`? I have removed the extra attribute I added by mistake – Ntiyiso Rikhotso Jun 25 '19 at 11:50
I think by the time I commented, they were not checkboxes and there was something referring to `id` – Ntiyiso Rikhotso Jun 25 '19 at 12:13

score 0 · Answer 2 · answered Jun 25 '19 at 10:28

Since your route isn't working, you need to update the url, not the parameters.

So go the end result should be projects/index/searchType and not projects/index?searchType

The below snippet is an example that should cover all your questions.

It will uncheck any checkboxes that is not the checkbox doing the action. Though I would recommend using select or radio in this instance.

var searchType = document.getElementById("searchType"); //Get the checkbox element
var searchType2 = document.getElementById("searchType2");

searchType.addEventListener("change", search); //set the onchange event for each checkbox
searchType2.addEventListener("change", search);

function search() {
    var checkbox = this;

    var checkboxes = document.querySelectorAll("input[type=\"checkbox\"]");

    for (var i = 0; i < checkboxes.length; i++) {
        var chk = checkboxes[i];

        if (chk !== checkbox) {
            chk.checked = false;
        }
    }

    if (checkbox.checked) {
        $.ajax({
            type: "GET",
            url: 'projects/index/' + checkbox.id,
            success: function (data) {
                alert('it worked');
                console.log(data);
                $('#container').html(data);
            },
            error: function () {
                console.log('it broke');
            },
            complete: function () {
                console.log('it completed');
            }
        });
        return;
    }

    console.log("no checkbox selected");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchType" class="searchType" type="checkbox"></input>
<input id="searchType2" class="searchType2" type="checkbox"></input>

How to render different url based on checkbox in Ajax?

2 Answers2