从模态(引导)的引用链接中解析URL ID,以便显示右侧页面

时间:2018-11-22 13:23:05

标签: javascript bootstrap-4

我正在尝试使用javascript创建联系人列表,并希望在使用引导程序单击“新联系人”或“编辑联系人”按钮时弹出模式对话框。根据网址的ID,应该在模式中显示“新联系人”或“编辑联系人”。这些都是基于相同的html网站,但不同之处在于,单击“编辑联系人”时,字段将填充联系人。

但这不能正常工作。仅在不使用模态时有效。分离的方法低于

着陆页
Landing page

模态应该看起来像这样
enter image description here

这是我的模态

  <div id="modal-show-page" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

                <div>
                <a class="btn btn-primary" data-toggle="modal" data-target="#modal-show-page" href="KontaktBearbeiten.html?ID=-1"></a>


            <a  href="KontaktBearbeiten.html?ID=-1"><button class="button" type="button" data-toggle="modal" data-target="#modal-show-page" >

            <img class="button-image" src="images/plus.png">
        </button></a>

    </div>

分隔ID和显示正确页面的方法

function kontaktBearbeitenInit() {
var url = decodeURI(window.location.href);
var urlParts = url.split("?");
var idParts = urlParts[1].split("=");
var id = idParts[1];
var newText = "Kontakt anlegen";
var bearbeitenText = "Kontakt bearbeiten";

document.getElementById('idSaver').value = id;

if (id === '-1') {
    // Kontakt anlegen
    document.getElementById("titleID").innerHTML = newText;
    document.getElementById("legendID").innerHTML = newText;
    document.getElementById("nameID").disabled = false;
} else {
    // gültige ID gegeben, Kontakt bearbeiten
    document.getElementById("titleID").innerHTML = bearbeitenText;
    document.getElementById("legendID").innerHTML = bearbeitenText;

    let kontakt = kontakteSpeicher.findeKontaktZuId(id);

    document.getElementById("nameID").disabled = true;
    document.getElementById("nameID").value = kontakt.name;
    document.getElementById("emailID").value = kontakt.email;
    document.getElementById("ortID").value = kontakt.ort;
    document.getElementById("plzID").value = kontakt.plz;
    document.getElementById("strasseID").value = kontakt.strasse;
}

0 个答案:

没有答案