Question

我正在尝试使用按钮单击时的数据更新引导模式。这就是我所做的，我为很多用户调用了一组用户数据，我希望在同一模态中使用模式一个接一个地显示它。

当用户点击此按钮时

<button type="submit" data-toggle="modal" data-target="#adminModal">View Admin</button>

弹出这个模态。

<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"> &times; </button>
                        <br />
                        <div class="Imodalcont">
                            <div class="form-group">
                                <div class="thumbnail Iwidth">
                                    <img id="adminImg" src="" alt="passport"><!-- user's passport goes here -->
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="Iwidth"><label id="adname" class="control-label"></label></div><!--user's name goes here -->
                                <div class="Iwidth"><label id="adqual" class="control-label"></label></div><!-- user data goes here-->
                                <div class="Iwidth"><label id="adpos" class="control-label"></label></div><!-- user data goes here -->
                            </div>
                        </div>
                        <div class="Imodalcont">
                            <div class="form-group">
                                <div class="control-label">Profile</div>
                            </div>
                            <div class="form-group">
                                <label id="adprofile" class="control-label label-font-weight"></label>
                            </div><!-- user data here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="nxt" type="button" class="btn mybtn-link" onclick="next()">next >></button><!-- when this button is clicked, i want a new user's data to replace the existing user's data -->
                    </div>
                </div>
            </div>
        </div>

我的挑战是：当点击上面的下一个按钮时，我希望其他用户的数据替换模态中的数据。这是我的JavaScript代码：

function getschlBasic() {
var schnm = $('#schls option:selected').text();

alert(schnm);
if (schnm != "") {

    $.ajax({
        type: "POST",
        url: "/Controller/action",
        data: { "data": schnm},
        success: function (custs) { 
            //When admin modal button is clicked
            $('[data-toggle="modal"]').click(function(e) {
                //adding first admin info
                e.preventDefault();
                    var admin1 = custs[1];
                    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');//this shows the first admin info
            }, function () {//truthfully, i get stuck here, really don't know how to implement the next functionality
                    //adding second user info
                    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 (){
                    //adding the third user info
                    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) {
            hideloading(); alert(error);
        }
    });
}
else {
    alert("Please select a Value");
}
}

Answer 1

好吧，经过几个小时的搜索后我解决了。当点击初始按钮时，我做了这个

var count = 1;

$('[data-target="#adminModal"]').click(function (e) {

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

如何在按钮单击时更新Bootstrap模型按钮？

1 个答案: