EasyHero Ответов: 2

Как я могу привязать функции JavaScript, Bootstrap модальные


привет, у меня есть модал, который я хочу использовать для отображения информации о пользователе, и он обычно вызывается нажатием кнопки, как показано ниже

<!-- Admin Modal -->
            <div class="modal fade" id="adminModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
                            <br />
                            <div class="Imodalcont">
                                <div class="form-group">
                                    <div class="thumbnail Iwidth">
                                        <img id="adminImg" src="" alt="passport">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="Iwidth"><label id="adname" class="control-label">Israel Eruoghene Asha</label></div>
                                    <div class="Iwidth"><label id="adqual" class="control-label">B.Sc</label></div>
                                    <div class="Iwidth"><label id="adpos" class="control-label">Proprietor</label></div>
                                </div>
                            </div>
                            <div class="Imodalcont">
                                <div class="form-group">
                                    <label class="control-label">Profile</label>
                                    <label id="adprofile" class="control-label label-font-weight">sth here</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="nxt" type="button" class="btn mybtn-link" onclick="next()">next >></button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal dialog-->
            </div><!-- /.modal -->


этот модал вызывается нажатием этой кнопки

<button id="admod" class="btn btn-default" type="submit" onclick="next()">View Info</button>


Что я уже пробовал:

вот мой код javascript
эти данные получают в вызове onsuccess начального ajax запроса, как показано на рисунке

$.ajax({
            type: "POST",
            url: "/Ministry/getSchlBase",
            data: { "schlName": schnm},
            success: function (custs) { // this is where all the data i want to show on the modal is gotten


                //When next button is clicked
                ('#admod').click(function next() {//i set this function to the onclick event of the button above
                        //adding first admin info. This is the first info i want on the modal as soon as the button above is clicked
                        var admin1 = custs[1];
                        var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                },function next(){
                        //adding second admin info. this is the second admin info i want shown after a next button is clicked
                        var admin2 = custs[2];
                        var name = admin2.split('"')[1] + " " + admin2.split('"')[2] + " " + admin2.split('"')[3];
                        $('#adname').text(name);
                        $('#adprofile').text(admin2.split('"')[4]);
                        $('#adpos').text(admin2.split('"')[5]);
                        $('#adminImg').attr('src', admin2.split('"')[6]);
                        $('#adqual').text(admin2.split('"')[7]);
                },function next(){
                        //adding third admin info. this is the third info i want populated 
                        var admin3 = custs[3];
                        var name = admin3.split('"')[1] + " " + admin3.split('"')[2] + " " + admin3.split('"')[3];
                        $('#adname').text(name);
                        $('#adprofile').text(admin3.split('"')[4]);
                        $('#adpos').text(admin3.split('"')[5]);
                        $('#adminImg').attr('src', admin3.split('"')[6]);
                        $('#adqual').text(admin3.split('"')[7]);
                        count = 1;
                });
            },
            error: function (error) {
               alert(error);
            }
        });
пожалуйста, как мне это сделать?

любой ответ будет оценен по достоинству. Спасибо

2 Ответов

Рейтинг:
2

P_Z

Привет,

Что касается кода js:

$('#admod').click(function next() { //note the missing $ before ('#admod')

Кроме того, вы уверены, что синтаксис с ".click(function next() {" является правильным?

Если вы хотите нажать на кнопку автоматически
$('#admod').trigger('click');


EasyHero

я думаю, что синтаксис неправильный. даже после добавления знака $ это не сработало.

Рейтинг:
10

EasyHero

ладно, я решил ее после нескольких часов поисков. когда начальная кнопка нажата, я сделал это

$('[data-target="#adminModal"]').click(function (e) {
var count = 1;
                //adding first admin info
                e.preventDefault();
                var admin1 = custs[count];//this calls the first admin as determined by variable count above
                ++count;
                var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                $('#adminModal #adname').text(name);
                $('#adminModal #adprofile').text(admin1.split('"')[4]);
                $('#adminModal #adpos').text(admin1.split('"')[5]);
                $('#adminModal #adminImg').attr('src', admin1.split('"')[6]);
                $('#adminModal #adqual').text(admin1.split('"')[7]);
                jquery("#adminModal").modal('show');
                return count;
            });


затем при нажатии следующей кнопки,

$('#nxt').click(function (e) {
                $(this).find('label, img').trigger('reset');//this resets the admin modal
                //adding first admin info

                e.preventDefault();
                var admin1 = custs[count];
                //++count;
                var name = admin1.split('"')[1] + " " + admin1.split('"')[2] + " " + admin1.split('"')[3];
                $('#adminModal #adname').text(name);
                $('#adminModal #adprofile').text(admin1.split('"')[4]);
                $('#adminModal #adpos').text(admin1.split('"')[5]);
                $('#adminModal #adminImg').attr('src', admin1.split('"')[6]);
                $('#adminModal #adqual').text(admin1.split('"')[7]);
                if (count == 3)
                {
                    count = 1;
                    return count;
                }
                else {
                    ++count;
                    return count;
                }
                jquery("#adminModal").modal('show');
            });