Appending URL using jQuery based on whether a checkbox is checked

Question

I am trying to append a URL using jQuery.

I have a grid of 'warnings' on my page, populated from a servlet. There is a check box at the top of the screen, which when checked will show the cleared warnings along with the active ones. Basically, this check box is showing and hiding rows of the grid. There's a button to clear a warning, and a button to unclear warnings. The unclear button shows when the checkbox is checked.

Upon first click of the check box, the URL is appended correctly. However, when unchecking the check box, the unclear button sticks and the URL is not properly appended.

Here's my jQuery:

 $(document).ready(function() 
   {
      var showClearedWarningsFlag = getURLParameter("showHideClearedWarnings");

  if(showClearedWarningsFlag = "SHOW")
  {
     $('#showClearedWarningsCheckBox').prop('checked', true);
     $('#unclearButton').show();
  }
  else
  {
     $('#showClearedWarningsCheckBox').prop('checked', false);
     $('#unclearButton').hide();
  }

});


 $('#showClearedWarningsCheckBox').change(function ()
 {
    if($(this).is(':checked'))
    { 
       window.location.search = "?showHideClearedWarnings=" + "SHOW";    
    }
    else
    {
       window.location.search = "?showHideClearedWarnings=" + "HIDE";
    }

 });

$('#clearButton').click(function(){
         $('#bagWarningAction').val('CLEAR') ;
    });

   $('#unclearButton').click(function(){
       $('#bagWarningAction').val('UNCLEAR') ;
   });

So, what I am trying to do here:

if URL is show
   then show unclear button and check box
else if URL is hide
   don't show unclear button and don't check box
on change of checkbox
   if checked
      append URL to show
   else if not checked
      append URL to hide

Then, I have the two buttons for clear and unclear passing through SHOW or HIDE to a hidden input on my page.

However, what is happening is when I press the check box for show cleared warnings, this is successfully appending the URL, but leaves the checkbox unchecked on the page refresh. So, upon checking the checkbox again, it's just redirecting to the SHOW URL. If I manually change the URL to HIDE, it hides the cleared warnings.

I think I am missing something very subtle here. If anyone could shed light as to why the checkbox isn't surviving the refresh, I would be very grateful!

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Edit: I reread your question more attentively this time. You could check the console, there might be an error(wrong ID, what not). Otherwise i see no problem with your code. The text below still applies, you might want to use a cookie, it's a tad more durable than an URL param(not to mention prettier for the end-user).

The checkbox value cannot survive a refresh by definition. That's an input, and their values are not stored, unless you manually do so(for instance, via cookie).

So you could try to create a cookie via jQuery that saves the last known value of the checkbox.

I would recommend reading on this SO reply to see how to do that How do I set/unset cookie with jQuery?

edited May 23 '17 at 12:06

Community

1
1

answered Jul 02 '15 at 09:43

Adrian Todorov

289
1
2
11

Hi Adrian, thanks for taking the time to answer. The web app this code is used in doesn't have the URL showing to the end user. I know this method probably isn't the best way to go about it, but I need to get something in before the sprint is over! I just want to get it working for now, and then possibly look at a more elegant solution next time. I will try using cookies, but I would rather do it using jQuery, if only to figure out why my code isn't working! – Tom Deakin Jul 02 '15 at 10:07
I would recommend checking this SO reply http://stackoverflow.com/questions/1090948/change-url-parameters/10997390#10997390 It has a nice and easy to use function to change URL parameters(what you are trying to do with window.location.search, which i am not absolutely positive can be used to update existing values, which is why i asked you to check your browser console to see if it shows any errors). – Adrian Todorov Jul 02 '15 at 10:24
Ah my apologies - no, there's no errors being shown! Will check out that link. Thanks very much. – Tom Deakin Jul 02 '15 at 10:28

score 0 · Accepted Answer · answered Jul 02 '15 at 16:10

0

I've fixed the issue. Really, really silly mistake. In my if check I am always changing the URL to show, as I am using one equals sign instead of two.

Whoops!

answered Jul 02 '15 at 16:10

Tom Deakin

81
2
8

Appending URL using jQuery based on whether a checkbox is checked

2 Answers2