I need to refresh a select (by id) when the ajax call is successful. But i have no idea how to process
ajax function :
$('#insertForm').on('click', function(){
var form_intitule = $('input[name=form_intitule]').val();
$.ajax({
type: "GET",
url: "lib/function.php?insertForm="+insertForm+"&form_intitule="+form_intitule,
dataType : "html",
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
},
success:function(data){
/*here i need to reload #listeFormation*/ }
});
});
html.php
<div class="form-group">
<label for="nomSalarie" class="col-sm-1 control-label" id="nameSelect">Formations</label>
<div class="col-sm-11">
<select name="listeFormation[]" id="listeFormation" class="form-control" multiple>';
while($ligne = $displayFormation->fetch()){
$data['formation'] .='<option value="'. $ligne['form_id'].'">'.$ligne['form_intitule']. " [" . $ligne['form_organisme'] . "]".'</option>';
}
</select>
</div>
</div>
There are 2 ways in my thought:
$('#insertForm').on('click', function(){
var form_intitule = $('input[name=form_intitule]').val();
$("#listeFormation").load(
"lib/function.php",
{
insertForm: insertForm,
form_intitule: form_intitule
},
function(response, status, xhr){
if(status == "error"){
alert(xhr + '--' + xhr.status + " " + xhr.statusText);
}else{
// Process the HTML you want here.. lets call: 'html_you_want_to_inject'
$('#listeFormation').html(html_you_want_to_inject);
}
}
});
});
$("#listeFormation").html(html_you_want_to_inject);
I guess one point to think is about to remove the PHP from the div and turn this div dinamic since the page load with your Javascript. You kill your PHP each time the AJAX runs, rewriting the content in runtime.
</div>