Question

我创建了一个包含任务表的页面。对于每个任务，都有一个按钮，允许用户通过启动模态来完成任务。模态内的表单是通过ajax调用动态生成的。一旦提交了模态中的表单并隐藏了模态，我就试图让任务表更新。我遇到的问题是，一旦模态被隐藏，事件就不会被触发。如果我把代码捕获到隐藏在表单中的模态事件，它确实有效。但我需要将代码放在带有任务表的页面上。

任务表（隐藏模态时应该更新）

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.js"></script>
<script>
    $(document).ready(function() {

    })
</script>
<style>
    table {
        height:70%;
        width:70%;
        padding:50px;
        margin:20px;

    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
    }
    table#t01 tr:nth-child(even) {
        background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {

        background-color:#fff;
    }
    table#t01 th    {

        background-color: black;
        color: white;
    }
</style>

</head>
<body>
<form>
<input id="_token" name="_token" type="hidden" value="{{ csrf_token() }}">
<input type="hidden" name="jobId" id="jobId" value="{{$jobs->id}}">
</form>
<h1>Job #{{ $jobs->id }}</h1><p>
Defendant: {{$jobs->defendant}}<br>
            {{$jobs->street}} @if(!empty($jobs->street2)),&nbsp;{{$jobs->street2}}@endif<br>
            {{$jobs->city}}, &nbsp; {{$jobs->state}}&nbsp; {{$jobs->zipcode}}<p>

{{ link_to("/documents/view/?jobId={$jobs->id}&_token={$token}", 'View Documents') }}&nbsp;  {{link_to("/tasks/service_documents/{$jobs->id}","Download Service Documents",["target"=>"_blank"])}}<p>
<br>

<div id="taskTable"></div>
<div id="dataModal" class="modal fade">
<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">Complete Task</h4>
        </div>
        <div class="modal-body" id="complete_task">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>


<script>
$(document).ready(function() {

    function task_table() {
        var id = $("#jobId").val();

        $.get("{{ url('api/jobsTable')}}",{id:id},
                function (data) {
                    $('#taskTable').html(data);
                });
    }

    task_table();

    $('.view_data').click(function () {
        var task_id = $(this).attr("id");
        $.get("{{ url('tasks/test')}}", { id: task_id },
                function(data) {
                    console.log(data);
                    $('#complete_task').html(data);
                    $('#dataModal').modal("show");
                });
    });
    //Should fire but doesn't
    $('#dataModal').on('hidden.bs.modal', function (e) {
        task_table();
    });


});
  </script>
  </body>
  </html>

表单已加载到模式中

   <html>
   <head>

   </head>
   <body>

   <div>

   Defendant: {{$job->defendant}}<br>
   Address: {{$job->street}}, &nbsp; {{$job->city}}, &nbsp;{{$job-
   >county}},&nbsp; {{$job->state}} &nbsp; {{$job->zipcode}}<br>


   <form id="assign-task">
    {{ Form::label('Assign', 'Assign Server: ') }}
    {{ Form::select('Assign', $vendors, null, ['id' => 'Server']) }}<br>
    <input type="submit">
    <input id="serveeId" name="serveeId" type="hidden" value="{{ $servee->id 
    }}">
    <input id="jobId" name="jobId" type="hidden" value="{{ $job->id }}">
    <input id="taskId" name="taskId" type="hidden" value="{{ $taskId }}">
    <input id="_token" name="_token" type="hidden" value="{{ csrf_token() 
    }}">

    </form>


    </div>

    <script>
    $(document).ready(function () {


    $("#assign-task").submit(function (e) {

        e.preventDefault();


        var formData = new FormData(this);


        $.ajax({
            url: '/tasks/assign',
            type: 'POST',
            data: formData,
            success: function (data) {
                console.log(data);
                $('#dataModal').modal("hide");


            },
            cache: false,
            contentType: false,
            processData: false
        });
        //This fires when the modal is hidden, I only added it here for a 
        test
        $('#dataModal').on('hidden.bs.modal', function (e) {
            alert('modal hidden from form');
        });
    });
 });
 </script>
 </body>
 </html>

Answer 1

您忘记了您还通过ajax调用加载了表，并且您正在加载jQuery两次。： - ）

莫代尔隐藏时事件不会被触发

1 个答案: