显示ajax回调后插入的新行

时间:2016-02-10 13:46:48

标签: php jquery ajax

这里有我的代码在ajax中插入一行,它运行正常。

我需要显示用户在我的select multiple中插入的新行而不重新加载页面但我不知道该怎么做..

谢谢你的帮助

Ajax电话:

$('#insertForm').on('click', function(){
    var form_user = $('input[name=form_user]').val();
    var form_intitule = $('input[name=form_intitule]').val();
    var form_organisme = $('input[name=form_organisme]').val();
    var form_date = $('input[name=form_date]').val();
    var form_benefice = $('textarea[name=form_benefice]').val();
    var form_dispositif = $('#form_dispositif').val();
    var form_entpro_ActionAutre = $('input[name=entpro_ActionAutre]').val();

$.ajax({
  type: "GET",
  url: "lib/function.php?insertForm="+insertForm+"&form_user="+form_user+"&form_intitule="+form_intitule+"&form_organisme="+form_organisme+"&form_date="+form_date+"&form_benefice="+form_benefice+"&form_dispositif="+form_dispositif+"&form_entpro_ActionAutre="+form_entpro_ActionAutre,
  dataType : "html",
  error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
      },
  success:function(data){
  }
});
});

我在function.php中选择多个:

$displayFormation = $bdd->prepare('SELECT * FROM FORMATION WHERE form_id_user = :idSalarie ORDER BY form_date DESC');
$displayFormation->bindParam(':idSalarie', $_POST['idSalarie']);
$displayFormation->execute();

$data['formation'] .='
    <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'] . "]". " [Année : " . dateAnglaisVersFrancaisAnnee($ligne['form_date']) . "]" . " [Bénéfices : " . $ligne['form_benefice'] . "]" . " [Dispositif : " . $ligne['form_dispositif'] . "]".'</option>';
                }
               $data['formation'] .='
            </select>
        </div>
    </div>';

1 个答案:

答案 0 :(得分:0)

我要做一些猜测和一些建议。如果不知道结果数据是什么,就很难完全回答。

我的工作示例和测试:https://jsfiddle.net/Twisty/053q24dh/

这是我建议的JQuery:

$('#insertForm').on('click', function() {
  var form_user = $('input[name=form_user]').val();
  var form_intitule = $('input[name=form_intitule]').val();
  var form_organisme = $('input[name=form_organisme]').val();
  var form_date = $('input[name=form_date]').val();
  var form_benefice = $('textarea[name=form_benefice]').val();
  var form_dispositif = $('#form_dispositif').val();
  var form_entpro_ActionAutre = $('input[name=entpro_ActionAutre]').val();

  $.ajax({
    type: "GET",
    url: "lib/function.php",
    data: {
      "insertForm": insertForm,
      "form_user": form_user,
      "form_intitule": form_intitule,
      "form_organisme": form_organisme,
      "form_date": form_date,
      "form_benefice": form_benefice,
      "form_dispositif": form_dispositif,
      "form_entpro_ActionAutre": form_entpro_ActionAutre,
    },
    dataType: "html",
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
    },
    success: function(data) {
      // Asumming the page returns the following HTML, or something similar:
      // <option value="9">Title [Organize] [Année : 02/02/16] [Bénéfices : 1] [Dispositif : 1]</option>
      $("#listeFormation").append(data);
    }
  });
});

同样,这假设返回到data的HTML是要附加到option对象的单个select标记。看起来你的帖子中的PHP正在寻找POST而你的ajax正在制作GET,所以我假设它们是不同的PHP脚本。如果不是,您需要确保PHP知道如何正确响应并且不会发回太多数据。

另外,我注意到此代码段中未定义insertForm。如果它是全局定义的,那很好,否则你需要在这个函数的范围内定义它。