Question

我正在使用codeigniter和foodcrud。

我有一个观点，在这个视图中我有一些下拉菜单，这些下拉菜单是从控制器输入的：

public function programar_ruta()
{
    if($this->model_privilegios->validar_usuario()==true)           
    {
        $data['destinos'] = $this->model_querys_usuario->get_destinos();
        $this->load->view('usuario/dynamic_form2',$data); 
    }
}

我的模型功能代码：

  public function get_destinos ()
  {
    $this-> db ->select('*');
    $this-> db ->from('destinos');
    $this -> db -> where('empresa', $_SESSION['empresa']);
    $query = $this->db->get();
    return $query->result();
  }

在我的表单内部，我有一个下拉菜单和一个指向控制器功能的按钮，可以添加一个新的＆＃34; Destino＆＃34;：

<td width="18%" align="left">
<select name="destinos[]" id="origen0"> 
<?php foreach($destinos as $row) 
   { echo '<option value="'.$row->nombre.'">'.$row->nombre.'</option>'; } ?> 
</select>
<input type="button" value="..." onClick="window.open
 ('<?php echo base_url()?>index.php/usuario/destinos/add','Nuevo Destino','width=800,height=600')" title="Agregar nuevo destino"/></td>

代码＆＃34; index.php / usuario / destinos / add＆＃39;＆＃34;正在走向一个标准的杂货店。

我的问题是：有一种方法可以在不刷新窗口的情况下将新元素添加到下拉选项中吗？

Answer 1

是的，通过AJAX - ！

以下是我要引导你完成的事情：

1）。打开的窗口显示一个表单，该表单向数据库添加目标。

2）。计时器脚本将等待窗口关闭，并获取新的destino并将其添加到您的菜单中。

3）。您需要添加处理JS请求的服务器端脚本...

所以 - ！首先，你想要点击这个＆＃39; onClick＆＃39; out，并在一个单独的地方处理你的JS - 让我们从改变开始：

<input type="button" value="..." onClick="window.open([...]

为：

<input type="button" id="newDestino" />

现在，在你的JS中，你需要给它一个点击处理程序：

$("#newDestino").click(function(){

    var desinoMas = window.open('/index.php/usuario/destinos/add','Nuevo Destino','width=800,height=600');

    var windowCloseChecker = setInterval(function() {
            if (win.closed) {
                clearInterval(timer);
                addDestino(); 
            }
        }, 1000);


});

不需要执行<?php echo base_url() ?>的部分 - 只需使用绝对路径：＆＃39; /index.php' ---如果我遗漏了某些内容，并且真的必要 - 只需将脚本放在<script>标记的页面底部，然后使用<?php echo之类的内容正常

现在，让我们定义addDestino函数：

function addDestino(){

$.ajax({
    url : "index.php/usuario/destinos/updateClientMenu",
    method: "POST" // this is really irrelevant,
    success: function(response){
         $("#origen0").html(response); 
    }


});



}

您会看到我将脚本命名为index.php/usuario/destinos/updateClientMenu - 您可以根据需要为其命名，但该脚本需要生成一些简单的html才能添加到您的DOM中。

您可以使用下面的代码，这对您来说应该是非常熟悉的！

<?php

//[...] You'll obviously need to re-query for the destinos, here.

 foreach($destinos as $row) 
   { $response .= '<option value="'.$row->nombre.'">'.$row->nombre.'</option>'; }

echo $response;

 ?>

您注意到我在回显之前将所有$destinos存储到变量中。

现在，echo $response会反馈到success函数中的addDestinos函数中！ - 简单地采用该响应并用新的HTML替换菜单的html。

所以，为了澄清和总结，这一切都是这样的：

单击按钮，将打开一个带窗体的新窗口 - 填写表单时，它会提交创建新的目标。当窗口关闭时，脚本会注意到窗口已关闭，并要求服务器提供新的desinos菜单。服务器使用刷新的目标列表进行响应。

现在 - ！这个脚本可以改进 - ！

所以，我建议你自己尝试一下，作为练习：

而不是获取整个列表，只需获取最近添加的 destino。（在这种情况下，您需要使用$.append()而不是$.html()）
祝你好运 - ！

Answer 2

我认为ajax是去这里的最好方式，你可以试试这样的事情：

...
var addedData = $(this).closet('origen0').find('input_id').val();
$.ajax({
       url: <?php echo base_url('index.php/usuario/destinos/add');?>,
       type: 'POST',
       data: addedDate
      ...

如何将在新窗口中创建的新元素的数据恢复到下拉列表中

2 个答案: