Punit Gajjar Punit Gajjar - 2 months ago 6
Ajax Question

Append the options to select box only once instead of multiple times

I have a

Button
called "Add New Menu" in my HTML page ,
onclick
i am opening the Modal which contain a form and some
<select></select>
elements.

like this.

<button class="btn btn-success" onclick="add_menu()"><i class="glyphicon glyphicon-plus"></i> Add New Menu</button>


Here is my Modal.

<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">Menu Form</h3>
</div>
<div class="modal-body form">
<form id="form" class="form-horizontal" name="form">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Menu Title</label>
<div class="col-md-9">
<input name="menu_title" placeholder="Menu Title" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Parent Menu</label>
<div class="col-md-9">
<select name="parent_id" id="parent_id" class="form-control">
<option value=""> -- Select Parent Menu -- </option>

</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>


If you have checked i have
<select name="parent_id" id="parent_id" class="form-control">
in a form inside modal and having single option.

Now when user click on "Add New Menu" button i am calling the below function which is in Javascript.

function add_menu()
{
AppendMenuTitles();

$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Menu'); // Set Title to Bootstrap modal
}

function AppendMenuTitles(){

// ajax delete data to database
$.ajax({
url : "<?php echo site_url('insoadmin/menu/getMenus')?>/",
type: "POST",
dataType: "JSON",
success: function(data)
{
$.each(data.menus, function(i, item) {
//console.log(data[i].expert_name);
$('#parent_id').append($('<option>', {
value: data.menus[i].menu_id,
text : data.menus[i].menu_title,
}));
});
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error getting Menus , Please try again');
}
});

}


here everything works fine, i am getting data through an ajax but the problem is , each time user clicks on the "Add New Menu" button it keep appending the options to my select box, when it should be once only.

I dont want to append each time user clicks on the "Add new Menu" button and ya make sure each time user click on the "Add new button" i need to make an Ajax call for compulsory, then append options to the
<select>

Answer
success: function(data){
    $('#parent_id').html('')
    $.each(data.menus, function(i, item) {
        //console.log(data[i].expert_name);
        $('#parent_id').append($('<option>', { 
            value: data.menus[i].menu_id,
            text : data.menus[i].menu_title,
        }));
    });
},

Put $('#parent_id').html(''), this will remove your older html

Comments