使用ajax刷新div

Question

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>

Answer 1

There are 2 ways in my thought:

1. Use the $.load() from jQuery like: (it's a GET which inject the response into the node you select)

$('#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);  
      }
    }
  });
});

1. Using your code, you could use simplely:

$("#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>