Откройте только один модал от разных кнопок - PullRequest
Новая
       8

Откройте только один модал от разных кнопок

0 голосов
/ 09 октября 2018

Я пытаюсь получить отчет из моих созданных таблиц.Дело в том, что у меня есть 3 разные кнопки для запуска 3 различных модальных прямо сейчас.Этот подход работает, но я думаю, что нет необходимости создавать их отдельно.Я хочу только один модальный с автоматическим перенаправлением на связанный "Действие".Я думаю, что это будет решено с помощью jquery, но я не могу понять.

Кнопки, которые запускают модалы ниже. 

 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>             
                        <a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
                        <a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
                    </div>

Мои модалы ниже. 

<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>


<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>


<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

Единственная изменяющаяся часть - это модальные, 

<form action="/Export/ExportGeneral" role="form" method="post">

В зависимости от запущенного модального маршрута он направляется к другому действию, например,

ExportGeneral ExportWarranty ExportVehicle

Я спрашиваю, есть ли вещь, которая помогает мне нажимать различные кнопки, но открывать ихтолько в одном моде, который 

<form action="/Export/ExportGeneral" role="form" method="post">

Изменяется автоматически в зависимости от нажатой кнопки.(Может быть, идентификатор для кнопок?)

Спасибо за ваше время!

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

В вашем теге привязки вам просто нужно заменить свой код на мой: 

<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>

Теперь в нижней части вашей страницы добавьте этот код jQuery, и все будет работать нормально. 

<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
    e.preventDefault();
    var form = $("#multpurpose-form");
    form.prop("action", $(this).data("url"));
});

Теперь я объясню, что происходит в моем коде.Все якорные теги связаны с одним модальным.Метод действия формы в связанном модале изменяется по отношению к «URL-адресу тега привязки» через код jQuery.

0 голосов
/ 09 октября 2018

измените ваш html как 

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>             
       <a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
       <a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>

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

<form action="" id="modalForm" role="form" method="post">

, затем в сценарии 

function openModal(modalName){
    if(modalName == 'GeneralModal'){
        $("#modalForm").attr("action",'/Export/ExportGeneral');
        $("#modalId").modal('show');
    }
    else if(modalName == 'VehicleModal'){
        $("#modalForm").attr("action",'/Export/ExportVehicle');
        $("#modalId").modal('show');
    }
    else if(modalName == 'WarrantylModal'){
        $("#modalForm").attr("action",'/Export/ExportWarranty');
        $("#modalId").modal('show');
    }
}

Я думаю, что это может решить вашу проблему и оптимизировать ваш код.:)

...