Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2018, 11:37
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Обработка запроса с Модалки
Добрый День! Суть вопроса!
Есть Модалка в ней я нажатием на кнопку создаю несколько <input> в таблице
Одну таблицу я обрабатываю функцией addAll
Как обработать 2,3,4 такие таблицы!

-> CodePan <-

<body>
<th:block th:include="/admin/fragments/menu-body :: menu"></th:block>
<div class="container-fluid">
  
    <button class="btn btn-success" data-toggle="modal" data-target="#addAll">Добавить</button>
    
</div>
 </div>


<!-------------------------------------------------------------------------------------------------------Modal addAll-->
<div id="addAll" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="validityNameAll">Введите название:</label>
                    <input class="form-control" type="text" id="validityNameAll" required="required" name="name">
                    <button type="button" class="btn btn-success addScheduleDown" onclick="addScheduleDown()">Добавить график</button>
                </div>
              
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" onclick="addAll()">Сохранить</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>


//добавление новой таблицы в модалку
function addScheduleDown() {
    $("button.addScheduleDown").after( "" +
        "<table class=\"table\"> <thead>\n" +
        "<tr>\n" +
        "<th><label for=\"beginTimeAll\">Начало</label></th>\n" +
        "<th><label for=\"mondayAll\">Пн</label></th>\n" +
        "</tr>\n" +
        "</thead>\n" +
        "<tbody>\n" +
        "<tr>\n" +
        "<td><input type=\"time\" id=\"beginTimeAll\" name=\"beginTime\" required=\"required\"/></td>\n" +
        "<td><input type=\"checkbox\" id=\"mondayAll\" name=\"monday\"/></td>\n" +

        "</tr>\n" +
        "</tbody>" +
        "</table>");

}


//отправка значений на сервер в БД
function addAll() {
    var nameValidity = $('#validityNameAll').val();
    var beginTime = $('#beginTimeAll').val();
    var monday = $("#mondayAll").prop('checked');
    

    var validity = {
        nameValidity:nameValidity,
        validityScheduleList:[{
            beginTime: beginTime,
            monday: monday,
            tuesday: tuesday,
         }]
    };

    $.ajax({
        type: "POST",
        url: "/schedule/addAll",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(validity),
        beforeSend: function (xhr) {
            xhr.setRequestHeader(csrfHeader, csrfToken);
        },
        success: function (data) {
            window.location.replace("/validity");
        },
        error: function (e) {
            alert("error")
        }
    });
}
Изображения:
Тип файла: jpg modal1.JPG (26.5 Кб, 2 просмотров)
Тип файла: jpg modal2.JPG (41.5 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 12:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

booratina,
А зачем вы каждый раз добавляете целую таблицу? Не достаточно было бы одной строки?
И не должно быть одинаковых id. Можно и совсем без них.
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2018, 13:04
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Сообщение от Dilettante_Pro Посмотреть сообщение
booratina,
А зачем вы каждый раз добавляете целую таблицу? Не достаточно было бы одной строки?
И не должно быть одинаковых id. Можно и совсем без них.
Так как же все таки можно это сделать ?

Последний раз редактировалось booratina, 19.05.2018 в 08:14.
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2018, 14:07
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Как реализовать без id
Ответить с цитированием
  #5 (permalink)  
Старый 21.05.2018, 14:13
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
.modal {
  position:fixed;
  top:0px;
  display:none;
  background-color: gray;
  z-index:100;
}
</style>

<div class="container-fluid">
  
    <button class="btn btn-success" data-toggle="modal" data-target="#addAll" onclick = "showModal()">Добавить</button>
    
</div>
 


<!-------------------------------------------------------------------------------------------------------Modal addAll-->
<div id="addAll" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal" onclick = "hideModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="validityNameAll">Введите название:</label>
                    <input class="form-control" type="text" id="validityNameAll" required="required" name="name">
                    <button type="button" class="btn btn-success addScheduleDown" onclick="addScheduleDown()">Добавить график</button>
                </div>
              
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" onclick="addAll()">Сохранить</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick = "hideModal()">Закрыть</button>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function showModal() {
     $("#addAll").show();
}
function hideModal() {
     $("#addAll").hide();
}
//добавление новой таблицы в модалку
function addScheduleDown() {
    if($(".table").length == 0) {
    $("button.addScheduleDown").after( "" +
        "<table class=\"table\"> <thead>\n" +
        "<tr>\n" +
        "<th>Начало</th>\n" +
        "<th>Пн</th>\n" +
        "</tr>\n" +
        "</thead>\n" +
        "<tbody>\n" +
        "</tbody>" +
        "</table>"); 
    }
    $(".table tbody").append(
          "<tr>\n" +
        "<td><input type=\"time\"  name=\"beginTime\" required=\"required\"/></td>\n" +
        "<td><input type=\"checkbox\" name=\"monday\"/></td>\n" +
        "</tr>\n"
     );
}
//отправка значений на сервер в БД
function addAll() {
    var nameValidity = $('#validityNameAll').val();
    var validity = {
            nameValidity:nameValidity,
            validityScheduleList:[] };

    $(".table tbody tr").each(function() {
        var beginTime = $(this).find("input[name='beginTime']").val();
        var monday = $(this).find("input[name='monday']").prop('checked');
    
      validity.validityScheduleList.push({
            beginTime: beginTime,
            monday: monday
           });
       
   });
   alert( JSON.stringify(validity));
//    $.ajax({
//        type: "POST",
 //       url: "/schedule/addAll",
 //       contentType: "application/json; charset=utf-8",
 //       data: JSON.stringify(validity),
 //       beforeSend: function (xhr) {
 //           xhr.setRequestHeader(csrfHeader, csrfToken);
 //       },
 //       success: function (data) {
 //           window.location.replace("/validity");
 //       },
 //       error: function (e) {
 //           alert("error")
 //       }
 //   });

}
</script>

Последний раз редактировалось Dilettante_Pro, 23.05.2018 в 13:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка ответа $.post запроса - как в блоке div получить переменную массива NeilDaniels jQuery 63 31.05.2016 13:28
onload обработка get запроса 6stprod Элементы интерфейса 1 13.10.2015 01:16
Асинхронная обработка request'а запроса node.js (express) kilop AJAX и COMET 0 05.11.2013 21:18
Неверная обработка ajax запроса в chrome. Реализация анимации загрузки chiffenok AJAX и COMET 0 29.07.2013 09:02
Обработка данных во время AJAX запроса user783 AJAX и COMET 5 09.12.2011 03:24