модальная проблема jquery ajax запускает проверку и отправку обработчика

ProgramBox

модальная проблема jquery ajax запускает проверку и отправку обработчика

Post author:admin
Запись опубликована:16 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #ajax

Вопрос:

Думаю, я заблудился в своем коде… не могу разобраться в проблеме. У меня есть модал, который открывает различные формы, соответственно устанавливая имя и идентификатор в форме и кнопку отправки, но при нажатии кнопки отправки ничего не происходит. Мои знания javascript ограничены и основаны на попытках и неудачах, попытках и неудачах, попытках и иногда достижении результатов 🙂

Вернемся к этому вопросу здесь… Модальный открывается нормально, но при нажатии «Отправить» ничего не происходит… По крайней мере, мне ничего не видно…

Надеюсь, я хорошо объяснил свои проблемы.

Это вызывает модальный

 <span class="stedModal" data-type="sted" title="Legg til sted" style="cursor: pointer"> <i class="fas fa-plus"></i></span>

Модальный:

     <!-- Modal - Legg til sted -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">

        <!-- Modal content-->
        
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Legg til sted</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
<!-- name and id is set to sendStedForm in the script that calls the modal -->
                <form action="javascript: void(0)" name="none" id="none" class="modalForm">
                    <div class="main"></div>
<!-- addSted.php is inserted here -->
                    <div class="text-end"> 
<!-- button name and id is set by the script that calls the modal to submitSted -->
                        <button type="submit" name="none1" id="none1" class="btn btn-sm btn-info submitButton" ><i class="far fa-trash-alt"></i> Lagre</button>
                        <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" aria-label="Close"><i class="fas fa-times"></i> Lukk</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

звонки addSted.php

  <input type="hidden" name="lag_id" id="slag_id" value="<?= session()->get('lag_id'); ?>">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="sted">Sted<span class="text-danger fw-bold">*</span></label>
                    <input type="text" name="sted" id="ssted" class="form-control required" placeholder="Sted">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="oppmote">Oppmøte<span class="text-danger fw-bold">*</span></label>
                    <input type="text" name="oppmote" id="soppmote" class="form-control" placeholder="Oppmøtested">
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <div class="form-group">
                    <label for="sted">Oppmøte tid<span class="text-danger fw-bold">*</span><small class="text-muted">Timer før oppdrag starter</small></label>
                    <input type="text" name="oppmote_tid" id="soppmote_tid" class="form-control" placeholder="Oppmøte tid">
                </div>
            </div>
        </div>
    </div>

Сценарии

 <script>

function goBack() {
  window.history.back();
}

$('#alert').hide();

$('.stedModal').click(function() {
    var typet = $(this).data('type');

    if (typet == 'type') {
        var url = '/vakter/ajaxAddType';
        $('.modalForm').attr('id', 'sendTypeForm');
        $('.modalForm').attr('name', 'sendTypeForm');
        $('.submitButton').attr('id', 'submitType');
        $('.submitButton').attr('name', 'submitType');
        $('.modal-title').html('Legg til Type');


    } else if (typet == 'sted') {
        var url = '/vakter/ajaxAddSted';
        $('.modalForm').attr('id', 'sendStedForm');
        $('.modalForm').attr('name', 'sendStedForm');
        $('.submitButton').attr('id', 'submitSted');
        $('.submitButton').attr('name', 'submitSted');
        $('.modal-title').html('Legg til Sted');
    }

    // AJAX request
    $.ajax({
        url: url,
        type: 'post',
        success: function(response){ 
            // Add response in Modal body
            $('#alert').hide();

            $('.main').html(response);
            
            // Display Modal
            $('#Modal').modal('show'); 
        }
    });
});


if ($("#sendStedForm").length > 0) {

    $("#sendStedForm").validate({
        rules: {
            sted: {
                required: true,
                maxlength: 100,
            },
            oppmote: {
                required: true,
                maxlength: 100,
            }, 
            oppmote_tid: {
                pattern: /^[0-9,] $/,
                maxlength: 4,
            }
        },
        messages: {
            sted: {
                required: "<small class="text-danger">Legg inn sted</small>",
                maxlength: "<small class="text-danger">Sted bør ikke være så langt. 100 tegn er maks</small>",
            },
            oppmote: {
                required: "<small class="text-danger">Legg inn en kort beskrivelse</small>",
                maxlength: "Beskrivelsen bær ikke være så lang. Maks 100 tegn</small>",
            },  
            oppmote_tid:  {
                pattern: "<small class="text-danger">Skriv inn ett gyldig nr</small>",
                maxlength: "<small class="text-danger">Oppmøte tid er for langt. Maks 3 tegn</small>",
            },
        },
        submitHandler: function(form) {
            alert('hi');
            $('#submitSted').html('lagrer..');
            // var lag_id = $("#slag_id").val();  
            // var sted = $("#ssted").val();  
            // var oppmote = $("#soppmote").val();  
            // var oppmote_tid = $("#soppmote_tid").val(); 
            // if (!oppmote_tid) { oppmote_tid = '0';}
            // oppmote_tid = oppmote_tid.replace(/,/g, '.');
            $.ajax({
                url: "<?php echo base_url('/vakter/ajaxAddSted/post') ?>",
                type: "POST",
                // data: $('#ajax_form').serialize(),
                dataType: "json",
                // data: { lag_id : lag_id, sted : sted, oppmote : oppmote, oppmote_tid : oppmote_tid },
                data: $('#sendStedForm').serialize(),
                success: function( response ) {
                    console.log(response);
                    console.log(response.success);
                    $('#submitSted').html('Submit');
                    $('#alert').html(response.msg);
                    $('#alert').addClass(response.typemsg);
                    $('#alert').show();
                    // $('#res_message').removeClass('d-none');
                    // document.getElementById("ajax_form").reset(); 
                    // alert("User record updated successfully with ID: " response.id);  
                    $("#sted").append('<option value="'  response.id  '">'  sted   ' - '   oppmote   ' - '   oppmote_tid   ' timer</option>')
                    $('#stedModal').modal('hide'); 
                    
                    $('#submitSted').html('<i class="far fa-trash-alt"></i> Lagre');
                    setTimeout(function(){
                        $('#alert').hide();
                        $('#alert').html('');
                    },10000);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }
    });
}

1. Там много чего происходит. Для устранения неполадок используйте веб-инспектор, поставляемый вместе с вашим браузером. В этой console области вы увидите любые ошибки, которые могут произойти, в этой network области нажмите xhr , и там вы увидите все ajax-запросы, что они отправляют и что вы получаете обратно. Как только вы откроете веб-инспектор и перейдете к network обновлению своей страницы, она начнет работать

2. При нажатии кнопки отправить в сети/xhr ничего не происходит. У меня это работало раньше, но только с одним способом. Попытался вернуться к этому и начал делать это шаг за шагом. И мне кажется, что jquery не распознает форму или кнопку отправки, когда идентификатор и имя заданы самим jquery с помощью $('.modalForm').attr('id', 'sendStedForm'); . Возможно, мне придется искать другие решения, использующие несколько форм в одном режиме. @Королевский

3. Привет, ваш код, то есть : $("#sendStedForm").validate({. загружается страница . Итак , когда вы инициализируете свою форму, эта форма не существует внутри вашего dom, потому что по щелчку мыши вы меняете идентификаторы форм и т. Д. Вот почему ничего не происходит, когда вы нажимаете на кнопку отправить . Вместо этого переместите этот код в функцию успеха ajax и повторите попытку.

4. Спасибо тебе, @свати. Звучит очень логично 🙂 выбрал другое решение с несколькими модальностями. 🙂

Ответ №1:

Попробуйте обернуть форму sendsted внутри функции и вызвать ее после того, как у dom действительно будет идентификатор формы sendsted для работы, то есть после загрузки данных ajax и размещения внутри html. Хотя я не проверял это, но я надеюсь, что это должно сработать.

 function goBack() {
    window.history.back();
}

$('#alert').hide();

$('.stedModal').click(function() {
    var typet = $(this).data('type');

    if (typet == 'type') {
        var url = '/vakter/ajaxAddType';
        $('.modalForm').attr('id', 'sendTypeForm');
        $('.modalForm').attr('name', 'sendTypeForm');
        $('.submitButton').attr('id', 'submitType');
        $('.submitButton').attr('name', 'submitType');
        $('.modal-title').html('Legg til Type');


    } else if (typet == 'sted') {
        var url = '/vakter/ajaxAddSted';
        $('.modalForm').attr('id', 'sendStedForm');
        $('.modalForm').attr('name', 'sendStedForm');
        $('.submitButton').attr('id', 'submitSted');
        $('.submitButton').attr('name', 'submitSted');
        $('.modal-title').html('Legg til Sted');
    }

    // AJAX request
    $.ajax({
        url: url,
        type: 'post',
        success: function(response){
            // Add response in Modal body
            $('#alert').hide();

            $('.main').html(response);

            // Display Modal
            $('#Modal').modal('show');

            process_sendStedForm();
        }
    });
});


function process_sendStedForm(){
    if ($("#sendStedForm").length > 0) {

        $("#sendStedForm").validate({
            rules: {
                sted: {
                    required: true,
                    maxlength: 100,
                },
                oppmote: {
                    required: true,
                    maxlength: 100,
                },
                oppmote_tid: {
                    pattern: /^[0-9,] $/,
                    maxlength: 4,
                }
            },
            messages: {
                sted: {
                    required: "<small class="text-danger">Legg inn sted</small>",
                    maxlength: "<small class="text-danger">Sted bør ikke være så langt. 100 tegn er maks</small>",
                },
                oppmote: {
                    required: "<small class="text-danger">Legg inn en kort beskrivelse</small>",
                    maxlength: "Beskrivelsen bær ikke være så lang. Maks 100 tegn</small>",
                },
                oppmote_tid:  {
                    pattern: "<small class="text-danger">Skriv inn ett gyldig nr</small>",
                    maxlength: "<small class="text-danger">Oppmøte tid er for langt. Maks 3 tegn</small>",
                },
            },
            submitHandler: function(form) {
                alert('hi');
                $('#submitSted').html('lagrer..');
                // var lag_id = $("#slag_id").val();
                // var sted = $("#ssted").val();
                // var oppmote = $("#soppmote").val();
                // var oppmote_tid = $("#soppmote_tid").val();
                // if (!oppmote_tid) { oppmote_tid = '0';}
                // oppmote_tid = oppmote_tid.replace(/,/g, '.');
                $.ajax({
                    url: "<?php echo base_url('/vakter/ajaxAddSted/post') ?>",
                    type: "POST",
                    // data: $('#ajax_form').serialize(),
                    dataType: "json",
                    // data: { lag_id : lag_id, sted : sted, oppmote : oppmote, oppmote_tid : oppmote_tid },
                    data: $('#sendStedForm').serialize(),
                    success: function( response ) {
                        console.log(response);
                        console.log(response.success);
                        $('#submitSted').html('Submit');
                        $('#alert').html(response.msg);
                        $('#alert').addClass(response.typemsg);
                        $('#alert').show();
                        // $('#res_message').removeClass('d-none');
                        // document.getElementById("ajax_form").reset();
                        // alert("User record updated successfully with ID: " response.id);
                        $("#sted").append('<option value="'  response.id  '">'  sted   ' - '   oppmote   ' - '   oppmote_tid   ' timer</option>')
                        $('#stedModal').modal('hide');

                        $('#submitSted').html('<i class="far fa-trash-alt"></i> Lagre');
                        setTimeout(function(){
                            $('#alert').hide();
                            $('#alert').html('');
                        },10000);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            }
        });
    }
}