CODEWITHSUNDEEP
jqueryhtmlcssajax
user9982219
user9982219

Reputation:

JQUery: Checking or unchecking checkbox depending of AJAX response

I'm building an admin panel from scratch for a personal project, one of the tasks I want it to do is show data in a table, in order to get this data I use AJAX and JQuery to grab data from the server and populate the table in the frontend.

This data has an isVisible boolean field (can be 0 or 1), issue I have is I want to check or uncheck the checkbox when populting the rows depending if the isVisible field is true or false.

This is my JQuery code:

success: function(data) {
				
				console.log(data);
					
					    $('.row[data-link=' + linked_entry + ']').remove();
					
					    $.each(data, function (index, item) {
					
					        var sliders_row = '<tr class="row" data-link="sliders">';
                            /*sliders_row += '<td>' + this.id + '</td>';*/
                            sliders_row += '<td>' + this.title + '</td>';
                            sliders_row += '<td>' + this.body + '</td>';
                            sliders_row += '<td>' + this.image + '</td>';
                            sliders_row += '<td style="text-align:center;"><input type="checkbox" name="isVisible" value="" checked></td>';
                            sliders_row += '<td class="entry_table_options_container">';
                            sliders_row += '<i class="fa fas fa-pencil-alt form_show_edit" data-link="sliders" data-id="'+ this.id + '" data-title="'+ this.title +'" data-body="'+ this.body +'" data-image="'+ this.image +'" data-isVisible="'+ this.isVisible +'"title="Editar" title="Editar" style="background-color:#5BC0DE;"></i>';
                            sliders_row += '</td>';
                            sliders_row += '</tr>';
	
					        $('.entry_table_container[data-link=' + linked_entry + ']').append(sliders_row);
                        });
                        
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Is there a way to do this on the fly without having to create two different html templates to append inside success fucntion?

Upvotes: 0

Views: 31

Answers (1)

Hari Das
Hari Das

Reputation: 10849

Do it as follow.

sliders_row += '<td style="text-align:center;"><input type="checkbox" name="isVisible" '+(this.isVisible ? 'checked' : '')+'></td>';

Here is an example 

var isVisible = true;
$(document).ready(function(){
  $("#abc").html('<input type="checkbox" name="isVisible" value="" '+(isVisible ? 'checked' : '')+'>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>

Upvotes: 1

Related Questions