[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

jquery question regarding selecting boxes on checkbox group

I am using jquery (1.5.2) to create a check-box group which is working fine.  Once I have it created I then need to select the check-boxes.  All the information is being returned in a json array.  I am just having a mad case of mind-block here.

This is my code so far which builds the check-box group just fine.

function getStatusLimits(page_id) {
	$.ajax({
		type: 'GET',
		url: '../php/getfunctions.php',
		dataType: 'json',
		async: true,
		cache: false,
		data: ({
			func: 'getStatusLimits',
			page_id: page_id
		}),
		success: function(data,textStatus,jqXHR) {
			$('#status-ul').html('');
			var checklist = '';
			var i = 0;
			for (i; i < data['selections'].length; i++) {
				checklist += '<li><label><input type="checkbox" name="status_limit[]" value="'+data['selections'][i].BASE_STATUS+'" />'+data['selections'][i].BASE_STATUS+'</label></li>';
			}
			$('#status-ul').html(checklist);
			
			var selectedLimits = data.selected_limits;
			
		}
	});	
}

Open in new window


This is my json code that is returned.
{"selections":[{"BASE_STATUS":"AAA"},{"BASE_STATUS":"BBB"},{"BASE_STATUS":"CCC"},{"BASE_STATUS":"DDD"}],"selected_limits":["BBB","DDD"]}

Open in new window


My goal is to use the "selected_limits" values from the returned json data to then check the boxes there...in this cases BBB and DDD should be checked.

Thanks!

0
mrh14852
Asked:
mrh14852
  • 4
  • 3
1 Solution
 
mrh14852Author Commented:
I figured it out...but it seems kludgy...any suggestions on cleaning it up?

function getStatusLimits(page_id) {
	$.ajax({
		type: 'GET',
		url: '../php/getfunctions.php',
		dataType: 'json',
		async: true,
		cache: false,
		data: ({
			func: 'getStatusLimits',
			page_id: page_id
		}),
		success: function(data,textStatus,jqXHR) {
			$('#status-ul').html('');
			var checklist = '';
			var i = 0;
			for (i; i < data['selections'].length; i++) {
				checklist += '<li><label><input type="checkbox" name="status_limit[]" value="'+data['selections'][i].BASE_STATUS+'" />'+data['selections'][i].BASE_STATUS+'</label></li>';
			}
			$('#status-ul').html(checklist);
			
			var selectedLimits = data.selected_limits;
			var i = 0;
			$('#status-ul input').each(function() {
				if (selectedLimits[i] === $(this).val()) {
					$(this).attr('checked','checked');
					i++;
				}
			});
		}
	});	
}

Open in new window

0
 
sonawanekiranCommented:
You can avoid below section which is for selected checkbox
 var selectedLimits = data.selected_limits;
      var i = 0;
      $('#status-ul input').each(function() {
        if (selectedLimits[i] === $(this).val()) {
          $(this).attr('checked','checked');
          i++;
        }
      });

Open in new window

So that your new code will looks like
function getStatusLimits(page_id) {
  $.ajax({
    type: 'GET',
    url: '../php/getfunctions.php',
    dataType: 'json',
    async: true,
    cache: false,
    data: ({
      func: 'getStatusLimits',
      page_id: page_id
    }),
    success: function(data,textStatus,jqXHR) {
      $('#status-ul').html('');
      var checklist = '';
      
      for (var i = 0; i < data['selections'].length; i++) {
        var checked = data['selections'][i].BASE_STATUS == data.selected_limits[i] ? "checked" : "";
        checklist += '<li><label><input type="checkbox" name="status_limit[]" value="'+data['selections'][i].BASE_STATUS+'" ' + checked + '  />'+data['selections'][i].BASE_STATUS+'</label></li>';
      }
      $('#status-ul').html(checklist);
    }
  }); 
}

Open in new window


Other than this nothing wrong with the code i.e. not kludgy
0
 
sonawanekiranCommented:
Sorry
This
var checked = data['selections'][i].BASE_STATUS == data.selected_limits[i] ? "checked" : "";

Open in new window

should be

 var checked = $.inArray(data['selections'][i].BASE_STATUS, data.selected_limits) ? "checked" : "";

Open in new window


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mrh14852Author Commented:
Had to change it to this....in your way it was selecting everything but the one I wanted selected.

var checked = $.inArray(data['selections'][i].BASE_STATUS,data.limits) ? '' : 'checked="checked"';

Open in new window


With that sad however this is only selecting the first one it finds and not the rest...

if I alert out "data.selected_limits" they are all there but the inArray() function is only finding 1 entry.
0
 
mrh14852Author Commented:
Okay...it looks like its not matching anything with a special character.

For example.

Standard
Fast

Are fine but as soon as it hits

Slow - 5 Day
Slow - 14 Day

It stops matching but no errors are thrown.
0
 
sonawanekiranCommented:
This is not true regarding special character. I tried this

var arr = ['standard', 'Slow - 5 Day', 'Slow - 14 Day']
  alert($.inArray('Slow - 5 Day',arr));

and I get alert 1 i.e. element is present in array  ( -1 for element is absent in array)

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.md5.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
  var arr = ['standard', 'Slow - 5 Day', 'Slow - 14 Day'] 
  alert($.inArray('Slow - 5 Day',arr));
});
</script>
</head>

<body>

</body>
</html>

Open in new window

0
 
mrh14852Author Commented:
Sorry to take so long to get back to you.  I ended up having to re-write the whole module because the requirements changed.  Anyway I appreciate your assistance with the code.

Cheers
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now