SweetAlert2 с HTML и Select

Я создал всплывающее окно sweetAlert2, которое включает в себя как HTML, так и функции выбора. Проблема в том, что поле «Выбор» загружается внизу всплывающего окна под HTML.

            var array = '[{"teachName" : "Pending Account", "teachNum" : "99999999"},{"teachName" : "test, test", "teachNum" : "101-temp"}]';
            var options = {};
            $.map(array,
            function(o){
                options[o.teachNum] = o.teachName;
            });
            swal({
                title: date.format("MM/DD/YYYY"),
                type: 'info',
                input: 'select',
                inputOptions: options ,
                html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' +
                    'Hours: ' +
                    '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' +
                    '<br />Notes: ' +
                    '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' +
                    '<button type="' + btn + '" id="btnD" value="' + date.format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' +
                    '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',

                showConfirmButton: false
            });

Я хотел бы, чтобы поле выбора было над кодом HTML. Посоветуйте, как мне исправить эту проблему. Вот мой код.


html jquery sweetalert2 sweetalert
person user3163084    schedule 06.04.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Прежде всего: ваше определение массива неверно: удалите разделители строк.

Вы можете использовать событие sweetalert2 onOpen, чтобы переместить поле выбора над HTML-кодом. .

Для этого вы можете использовать .insertBefore().

onOpen: function(ele) {
   $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div'));
}

Фрагмент:

var array = [{"teachName": "Pending Account", "teachNum": "99999999"}, {"teachName": "test, test", "teachNum": "101-temp"}];
var options = {};
$.map(array, function (o) {
    options[o.teachNum] = o.teachName;
});
var btn = 'button';
swal({
    title: moment().format("MM/DD/YYYY"),
    type: 'info',
    input: 'select',
    inputOptions: options,
    html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' +
    'Hours: ' +
    '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' +
    '<br />Notes: ' +
    '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' +
    '<button type="' + btn + '" id="btnD" value="' + moment().format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' +
    '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',

    showConfirmButton: false,
    onOpen: function(ele) {
        $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div'));
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.js"></script>

person gaetanoM    schedule 06.04.2017
comment
Отлично... Спасибо за помощь. Кроме того, да, я знаю, что массив неверен. Это было просто скопировано из JSON до того, как оно было помещено в массив. - person user3163084; 10.04.2017
comment
Сделанный. Еще раз Спасибо. - person user3163084; 10.04.2017