Intermittent jQuery.append() with $.ajax and $.getJSON

Question

I have two select lists. I am making an ajax call to populate them with .append() and have tried both $.ajax and $.getJson to assess synchronous and asynchronous options. Using either call type I can get, in the same session with and withouth browser refresh:

Both populated
One but not the other
Neither

The server response is coming back with valid JSON.

Below is the ajax call with loop. I have no console errors, stepping through server-side is fine. I am not sure how to debug this further and looking for some guidance.

$.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>');
        })
    }
});

If there is something wrong in the ajax call or better practice I would be keen to learn that as well.

Thanks all.

EDIT

Having wrapped the ajax calls in $(selector).length, despite being visible in the UI, it is returning false so my assumption is that they are not available to jQuery to append.

The select lists are in a Bootstrap modal, as below.

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');
                                }
                            }
                        ]
                    });

The JS code you've shown is fine. We need more information though. If not data is being populated in some cases then either the AJAX is not being triggered, or it responds with an error. You've not given us enough information to help in those cases. — Rory McCrossan, Dec 14 '16 at 12:38
Also note that only the single `#programId` element will be populated in your code. If you have given the same `id` attribute to multiple elements, that may be the source of your problem. Try using common classes instead, if so. — Rory McCrossan, Dec 14 '16 at 12:39
Apologies. It was just an example of one of the calls. There is an exact copy, just calling another controller. Before I edit the post, what information would help at this point, the call stack, network or global scope? — K7Buoy, Dec 14 '16 at 13:41

score 1 · Answer 1 · edited May 23 '17 at 10:30

So. Event Delegation was the key but combined with use of bootstrap modal events. Huge thanks to the answer here written by canon.

In the end it was this:

$(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>');
            })
        });
    });

Intermittent jQuery.append() with $.ajax and $.getJSON

1 Answers1