я хочу перезагрузить / обновить страницу после показа моего клонированного элемента

Question

это кодовый проект

это просмотр скрипт

v_add_transaksi.php

<div class="after-add-more">
        <div class="row">
            <div class="col-md-5">
        <div class="form-group">
            <label>Pilih Kategori Menu</label>
            <select required="required" name="id_kategori_menu" class="form-control" id="kategori">
                <option value="">- Pilih Kategori Menu -</option>
                <?php 
                foreach($kategori as $row)
                { 
                  echo '<option value="'.$row->id_kategori.'">'.$row->nama_kategori.'</option>';
                }
                ?>
            </select>
        </div>
        </div>
        </div>
        <div class="row">
            <div class="col-md-4 pr-1">
                <div class="form-group">
                    <label>-Pilih Menu</label>
                    <select class="form-control" name="menu" id="menu">
                    </select>
                </div>
            </div>
            <div class="col-md-4 px-1">
                <div class="form-group">
                    <div id="jumlah">
                    <label>Jumlah</label>
                    <input type="text" class="form-control" placeholder="Username" value="">
                    </div>
                </div>
            </div>
            <div class="col-md-4 pl-1">
                <div class="form-group">
                    <div class="form-group remove">
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="form-group">
            <button class="btn btn-fill btn-success" type="submit">Submit</button>
            <a class="btn btn-success btn-fill add-more">Add More</a>
            <a class="btn btn-danger btn-fill" href="<?php echo base_url('admin/kategori_menu'); ?>">Kembali</a>
        </div>
        <div class="clearfix"></div>

и я поместил скрипт jquery на домашнюю страницу , которая выглядит следующим образом

<script type="text/javascript">
jQuery(document).ready(function() {
//$(".add-more").load(location.href + ".add-more");
  $("body").on("click",".add-more",function(){
      var html = $(".after-add-more:first").clone(true);
      $(html).find(".remove").html("<br><a class='btn btn-danger btn-fill remove'>Remove</a>");
    $(".after-add-more").last().after(html);
  });
  $("body").on("click",".remove",function(){ 
      $(this).parents(".after-add-more").remove();
  });
  });
</script>

jquery скрипт для клонирования моего элемента формы в v_add_transaksi.php.

кроме этого, я также делаю свою опцию выбора из выпадающего меню, прикованную цепью, поэтому, когда я выбираю 'Kategori Menu', тогда 'Меню', которое соответствует id , будет отображаться во втором опциях выбора, здесь это код

<script>
$(document).ready(function(){ // Ketika halaman sudah siap (sudah selesai di load)
  $("#kategori").change(function(){ // Ketika user mengganti atau memilih data provinsi
    $("#menu").hide();
    $("#jumlah").hide();

    $.ajax({
      type: "POST", // Method pengiriman data bisa dengan GET atau POST
      url: "<?php echo base_url();?>admin/listMenu", // Isi dengan url/path file php yang dituju
      data: {id_kategori : $("#kategori").val()}, // data yang akan dikirim ke file yang dituju
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        $("#menu").html(response.list_menu).show();
        $("#jumlah").show();
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
        alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); // Munculkan alert error
      }
    });
  });
});
</script>

мой контроллер admin.php

function listMenu() {
    $id_kategori = $this->input->post('id_kategori');
    $menu = $this->m_transaksi->get_menuByKategori($id_kategori);
    $lists = "<option value=''>- Pilih Menu -</option>";

    foreach($menu as $data){
      $lists .= "<option value='".$data->id_menu."'>".$data->nama_menu."</option>";
    }

    $callback = array('list_menu'=>$lists);
    echo json_encode($callback);
}

Моя проблема в том, что всякий раз, когда я нажимаю кнопку «Добавить еще», которая сделает мой элемент формы клонированным, функция связанного выпадающего меню не работает, работает только для первых элементов. я хочу, чтобы эта функция работала в цепочке независимо от того, насколько я клонировал элементы формы.

так как я могу это сделать? любая помощь будет высоко ценится

Answer 1

Считаете ли вы, что вы извлекаете данные со страницы php асинхронно и хотите клонировать результат запроса ajax на текущую страницу?

если да, я думаю, что есть одна причина, по которой вы можете использовать элемент html iframe, поэтому, когда вы добавите новые данные, это будет как перезагрузка страницы, но не совсем