使用Ajax或JQuery使用Select2字段重新加载div

时间:2016-07-03 21:07:37

标签: javascript jquery ajax jquery-select2 select2

我在bootstrap模式中加载了两个ajax表单。

第一种形式是创建联系人(只是名称输入字段)。

第二种形式用于创建具有多个字段的患者记录。其中一个字段是select2字段,您可以在其中选择推荐该患者的人员。此select2字段的选项是数据库中的所有联系人。

我尝试实现以下目标:

每当我在第一个表单上提交新联系人时,我想重新加载包含第二个表单上的select2字段的div,以便我可以选择提交的联系人。

我设法在不使用select2的情况下重新加载选择字段但是当我使用select2字段尝试我的代码时,该字段消失。

下面你可以看到我的代码。

联系人创建表单

<form id="newcon" role="form" class="form-horizontal form-groups-bordered validate" action="<?php echo base_url();?>index.php?admin/contact/fastcreate" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="field-1" class="reqlbl col-sm-3 control-label">
      <?php echo get_phrase( 'name'); ?>
    </label>
    <div class="col-sm-5">
      <input type="text" name="name" class="form-control" id="field-1" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>">
    </div>
  </div>
  <div class="form-group">
    <label for="field-20" class="reqlbl col-sm-3 control-label">
      <?php echo get_phrase( 'last_name'); ?>
    </label>
    <div class="col-sm-5">
      <input type="text" name="last_name" class="form-control" id="field-20" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>">
    </div>
  </div>
  <div class="col-sm-3 control-label col-sm-offset-2">
    <input type="button" class="btn btn-success dis" value="<?php echo get_phrase('create_contact');?>" onclick="this.value='<?php echo get_phrase('sending_please_wait')?>...';">
  </div>
</form>

患者创建表

<form role="form" class="form-horizontal form-groups-bordered validate" action="<?php echo base_url(); ?>index.php?admin/patient/create" method="post" enctype="multipart/form-data">
  <div class="form-group selectcontactreload">
    <label for="field-ta" class="col-sm-3 control-label">
      <?php echo get_phrase( 'recommendation'); ?>
    </label>
    <div class="col-sm-5">
      <select id="selectcontact" name="sistasi" class="form-control select2">
        <option value="">
          <?php echo get_phrase( 'select_contact'); ?>
        </option>
        <option value="newcontact">
          <?php echo get_phrase ( 'new_contact') ?>
        </option>
        <?php foreach ($contact_info as $row) { ?>
        <option value="<?php echo $row['contact_id']; ?>">
          <?php echo $row[ 'name'] . ' ' . $row[ 'last_name']; ?>
        </option>
        <?php } ?>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="field-2" class="reqlbl col-sm-3 control-label">
      <?php echo get_phrase( 'name'); ?>
    </label>
    <div class="col-sm-5">
      <input type="text" name="name" class="form-control" id="field-2" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>">
    </div>
  </div>
  <div class="col-sm-3 control-label col-sm-offset-2">
    <input type="submit" class="btn btn-success" value="<?php echo get_phrase('submit');?>">
  </div>
</form>

我尝试在第一次表单提交时重新加载select2字段的代码如下:

$('#newcon').ajaxForm(function() {

  $(".selectcontactreload").load('index.php?modal/popup/add_patient' + " .selectcontactreload");

});

上面代码的问题是它重新加载字段但没有触发select2 js。 如果我从选择字段中删除select2类它完美地工作但我需要它与select2一起工作。

有什么建议吗? 我看过其他帖子说要使用以下内容:

$('#newcon').ajaxForm(function() {

$("#selectcontact").select2("destroy");
$("#selectcontact").select2();

});

但是这段代码并没有解决我的问题。

0 个答案:

没有答案