JQUery: Checking or unchecking checkbox depending of AJAX response

Question

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?

Hari Das · Accepted Answer · 2018-07-08 17:09:38Z

1

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>

answered Jul 8, 2018 at 17:09

Hari Das

11k8 gold badges69 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQUery: Checking or unchecking checkbox depending of AJAX response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related