Question

我有两个选择列表。我正在进行一个ajax调用，用.append（）填充它们，并尝试了$ .ajax和$ .getJson来评估同步和异步选项。使用任何一种呼叫类型，我可以在同一个会话中使用和不使用浏览器刷新：

两人都填充
一个但不是另一个
既不

服务器响应将返回有效的JSON。

下面是带循环的ajax调用。我没有控制台错误，踩到服务器端是好的。我不确定如何进一步调试并寻找一些指导。

$.ajax({
    url: "/Programs/GetAll",
    contentType: "json",
    method: "GET",
    success: function (data) {
        //iterate over the data and append a select option
        $.each(data, function (key, val) {
            $('#programId').append('<option id="' + val.id + '">' + val.name + '</option>');
        })
    }
});

如果在ajax电话或更好的练习中出现问题，我也会热衷于了解这一点。

谢谢大家。

修改

在$（selector）.length中包装了ajax调用，尽管在UI中可见，它返回 false ，所以我的假设是它们不能被jQuery追加。

选择列表在Bootstrap模式中，如下所示。

BootstrapDialog.show({
                        type: BootstrapDialog.TYPE_DANGER,
                        title: '<i class="fa fa-calendar"></i> Create Event',
                        message: '<p><i class="fa fa-clock-o"></i> ' + _when_ + '</p>' +

                                        '<select required id="programId" class="calendar_event_input_add form-control"></select>' +
                                        '<select required id="taskId" class="calendar_event_input_add form-control"></select>' +
                                        '<input required type="text" id="apptEventTitle" class="form-control" placeholder="Short Name" />' +
                                        '<textarea required type="text" id="apptEventDescription" class="calendar_event_textarea_add form-control" placeholder="Good Description" rows="3"/></textarea>' +
                                        '<input type="text" class="calendar_event_input_add form-control" id="apptEventUrl" placeholder="Reference Link" />' +
                                        '<input type="hidden" id="apptStartTime" value="' + start + '" />' + /** start date hidden **/
                                        '<input type="hidden" id="apptEndTime" value="' + end + '" />' + /** end date hidden **/
                                        '<input type="hidden" id="apptAllDay" value="' + allDay + '" />' + /** allday hidden **/

                                        '',
                        buttons: [
                            {
                                label: '<i class="fa fa-check"></i> Create Event',
                                cssClass: 'btn-success',
                                hotkey: 13, // Enter.
                                action: function (dialogItself) {
                                    _calendarEventAdd();
                                    dialogItself.close();
                                    _calendarInstance.fullCalendar('unselect');
                                }
                            },
                            {
                                label: '<i class="fa fa-times"></i> Cancel',
                                cssClass: 'btn-default',
                                action: function (dialogItself) {
                                    dialogItself.close();
                                    _calendarInstance.fullCalendar('unselect');
                                }
                            }
                        ]
                    });

Answer 1

因此。事件委派是关键，但结合使用bootstrap模态事件。非常感谢here撰写的答案canon。

最后是这样的：

$(document).on("shown.bs.modal", "#detailedevent", function (e) {
        $.getJSON('/Programs/GetAll', function (data) {
            var $select = $('#programId');
            //clear the current content of the select
            $select.empty();

            //iterate over the data and append a select option
            $.each(data, function (key, val) {
                $select.append('<option id="' + val.id + '">' + val.name + '</option>');
            })
        })

        $.getJSON('/Tasks/GetAll', function (data) {
            var $select = $('#taskId')
            //clear the current content of the select
            $select.empty();

            //iterate over the data and append a select option
            $.each(data, function (key, val) {
                $select.append('<option id="' + val.id + '">' + val.name + '</option>');
            })
        });
    });

使用$ .ajax和$ .getJSON的间歇性jQuery.append（）

1 个答案: