将记录添加到下拉菜单而不刷新表单

时间:2015-01-20 07:46:36

标签: ajax twitter-bootstrap codeigniter

我想在没有表单刷新的情况下将记录添加到下拉菜单中。我正在使用codeigniter和bootstrap

以下是Bootstrap模式:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            <h4 id="myLargeModalLabel" class="modal-title">Add Record</h4>
        </div>
        <div class="modal-body">

            <form class="sky-form" id="sky-inchidere" method="post" accept-charset="utf-8" action="">
                    <dl class="dl-horizontal">

                        <dt>Name<span class="color-red">*</span></dt>
                        <dd>
                            <section>
                                <label class="input">
                                    <i class="icon-append fa fa-inbox"></i>
                                    <input type="text" value="" name="name" required>
                                    <b class="tooltip tooltip-bottom-right">Add New Record</b>
                                </label>
                            </section>
                        </dd>

                    </dl>
                <hr>
                <button type="submit" class="btn-u" style="float:right; margin-top:-5px;">Submit</button>
            </form>
        </div>
    </div>
</div>

Ajax脚本:

$(document).ready(function(){

$("#sky-inchidere").submit(function(e){     
    e.preventDefault();
    var tdata= $("#sky-inchidere").serializeArray();
    $.ajax({
        type: "POST",
        url: 'http://localhost/new/oportunitati/add',
        data: tdata, 

        success:function(tdata)
        {
            alert('SUCCESS!!');
        },
        error: function (XHR, status, response) {
           alert('fail');
        }
    });
});
});

CI控制器(我在此处添加了模态代码以供测试)

public function add()   {
    $tdata = array( name=>  $this->input->post(name),
                   );
    $this->db->insert('table',$tdata); 
}

当我使用此代码时,我收到“失败”错误消息。

感谢您的时间。

4 个答案:

答案 0 :(得分:0)

如何调试: 1.打印你的数字&#39;看看会发生什么; 2.这里有问题:$ this-&gt; input-&gt; post(&#39; name&#39;);

答案 1 :(得分:0)

尝试使用:

$tdata = array( 
    'name' =>  $this->input->post('name')
);

答案 2 :(得分:0)

我设法找到问题并予以纠正。 (表名上的拼写错误) 现在我遇到了一个不同的问题。在ajax的成功中,我无法刷新我尝试过的所选下拉记录:

       success:function(tdata)
       {
           // close the modal
           $('#myModal').modal('hide');

           // update dropdown ??
           $('.chosen-select').trigger('liszt:updated');
           $('#field-beneficiar_p').trigger('chosen:updated');
           $('#field-beneficiar_p').trigger('liszt:updated');
       },

如何刷新记录以查看最后添加的项目的任何帮助将不胜感激。我正在使用选择的插件。

答案 3 :(得分:0)

来自控制器的

发送json_encode中的数据 然后在js函数

$.ajax({
                    type: "POST",
                    url: "<?php echo base_url('login/get_time'); ?>",
                    data: {"consltant_name": consltant_name, "time": time},
                    success: function(data) {
                        var data = JSON.parse(data);
                        var options = '';
                        options = options + '<option value="">Please Select One</option>'
                        $.each(data, function(i, item) {
                            options = options + '<option value="' + item + '">' + item + '</option>'
                        });
                        selectbox.html(options);
                    }});