找到你要的答案

Q:How do I dynamically change a bootstrap modal

Q:如何动态改变引导模式

I have a little peace of javascript code that allows a user to click on a meeting and change the values in a modal that pops up. The first time somebody clicks all works fine, but if I try to change a second meeting, the modal keeps on showing the data from the first modal. Does anybody know what i do wrong ? (The data including the HTML is stored in content which is added to the div #modalwindow in the page)...

$(document).delegate('button[wijzigattr="send"]', 'click', function() {
    // Check welke button is geclicked
    var id = $(this).attr("value")  ;
    alert(id)
    var content;
    var n = 0; 
    var id ={'ID' : id};
    $.post('http://www.openheidvanzaken.com/cardio/controller/getonderwijs2.php', id).done(function (data){
    $.each(data, function(key, value){
        $.each(value, function(key2, value2) {
            n++;
            switch (n){
                case 1:
                content = "<div class=\"modal fade\" id=\"wijzigonderwijs\" role=\"dialog\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button><h4 class=\"modal-title\">Wijzig onderwijsmoment</h4></div><div class=\"modal-body\"><form action=\"controller/regonderwijs.php\" method=\"post\" role=\"form\" class=\"form-horizontal\"><div class=\"form-group\">"
                    break;
                case 2:
                content = content + "<label for=\"onderwijsnaam\" class=\"col-sm-2 control-label\">Naam</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijsnaam\" name=\"Naam\"></div></div>"
                break;
                case 3:
                content = content + "<div class=\"form-group\"><label for=\"onderwijstitel\" class=\"col-sm-2 control-label\">Titel</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijstitel\" name=\"Titel\"></div></div>"
                break;
                case 4:
                content = content + "<div class=\"form-group\"><label for=\"onderwijscategorie\" class=\"col-sm-2 control-label\">Categorie</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijscategorie\" name=\"Categorie\"></div></div>"
                break;
                case 5:
                content = content + "<div class=\"form-group\"><label for=\"onderwijsdate\" class=\"col-sm-2 control-label\">Datum</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" name=\"Datum\" id=\"onderwijsdatum\"></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\" id=\"wijzigonderwijs\">Wijzig</button></div></div></div></div>"
                alert (content);
                n = 0;
                break;
            }

    });
    });

    // Laad modal om wijziging in te voeren
    $('#modalwindow').empty();
    $('#modalwindow').replaceWith(content);
    $('#wijzigonderwijs').modal('show');
    });
})
})();

我有一点和平的JavaScript代码,允许用户点击一个会议和值在一个模态弹出变化。第一次有人点击所有的作品罚款,但如果我试图改变第二次会议,模态不断显示数据从第一模态。有人知道我做错了什么吗?(数据包括HTML存储在内容添加到页面中的div # modalwindow)…

$(document).delegate('button[wijzigattr="send"]', 'click', function() {
    // Check welke button is geclicked
    var id = $(this).attr("value")  ;
    alert(id)
    var content;
    var n = 0; 
    var id ={'ID' : id};
    $.post('http://www.openheidvanzaken.com/cardio/controller/getonderwijs2.php', id).done(function (data){
    $.each(data, function(key, value){
        $.each(value, function(key2, value2) {
            n++;
            switch (n){
                case 1:
                content = "<div class=\"modal fade\" id=\"wijzigonderwijs\" role=\"dialog\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button><h4 class=\"modal-title\">Wijzig onderwijsmoment</h4></div><div class=\"modal-body\"><form action=\"controller/regonderwijs.php\" method=\"post\" role=\"form\" class=\"form-horizontal\"><div class=\"form-group\">"
                    break;
                case 2:
                content = content + "<label for=\"onderwijsnaam\" class=\"col-sm-2 control-label\">Naam</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijsnaam\" name=\"Naam\"></div></div>"
                break;
                case 3:
                content = content + "<div class=\"form-group\"><label for=\"onderwijstitel\" class=\"col-sm-2 control-label\">Titel</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijstitel\" name=\"Titel\"></div></div>"
                break;
                case 4:
                content = content + "<div class=\"form-group\"><label for=\"onderwijscategorie\" class=\"col-sm-2 control-label\">Categorie</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" id=\"onderwijscategorie\" name=\"Categorie\"></div></div>"
                break;
                case 5:
                content = content + "<div class=\"form-group\"><label for=\"onderwijsdate\" class=\"col-sm-2 control-label\">Datum</label><div class=\"col-sm-10\"><input type=\"text\" value=\"" + value2 + "\" name=\"Datum\" id=\"onderwijsdatum\"></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\" id=\"wijzigonderwijs\">Wijzig</button></div></div></div></div>"
                alert (content);
                n = 0;
                break;
            }

    });
    });

    // Laad modal om wijziging in te voeren
    $('#modalwindow').empty();
    $('#modalwindow').replaceWith(content);
    $('#wijzigonderwijs').modal('show');
    });
})
})();
answer1: 回答1:

Because of the loop, there are multiple modals with the same id. When you open a modal by id, it will always look for the first modal with this id. A workaround would be to assign a unique id to each modal.

由于环,有相同的ID,多个模式,当你打开一个模态的ID,它总是寻找第一模态这个ID的一个解决方案将被分配一个唯一的ID每个模态。

jquery  bootstrap-modal