Задать вопрос

Mark116

Комментарии

  • Ошибка - Invalid JSON response Как исправить?

    @Mark116 Автор вопроса
    Александр Нестеров, как мне его спрятать? Я не знаю
    Написано

  • Ошибка - Invalid JSON response Как исправить?

    @Mark116 Автор вопроса
    Все функции я переименовал в name и date и выглядит уже так function editModal(id){
    $('#editModal').modal('show');
    $('#serial').attr("count",id);
    $('#editModal [name=name]').name("");
    $('#editModal [name=date]').date('disabled', true);
    $('#editModal [name=date]').date("");
    $('#editModal [name=date]').prop('disabled', true);
    Написано

  • Ошибка - Invalid JSON response Как исправить?

    @Mark116 Автор вопроса
    Код HTML+PHP
    <!DOCTYPE html>
<html>
<head>
<title>Testing the API With jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="container">
<div class="row">
    <div class="col col-md-12">
        <center class="m-3">
            <button class="btn btn-success" onclick="addModal();">Мероприятие <i class="fa fa-plus"></i></button>
        </center>
    </div>
</div>
<table id="dataTable" class="table table-hover">
    <thead>
        <td>id</td>
        <td>Название мероприятия</td><td>Дата</td>        <td>Описание</td> <td>Категория</td> <td>Цена</td> <td>Цена льготного билета</td> 
    </thead>
</table>
<script>
$(document).ready(function(){
    $('#dataTable').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "http:///wp-content/themes/betheme/api.php",
            dataSrc : ''
        },
        "columns" : [
        {"data" : "id"},
                {"data" : "val_1"},
                {"data" : "val_2"},
                {"render": function (data, type, row, meta) {
                return '<button class="m-1 btn btn-secondary" onclick="editModal(' + row.id + ')">Отредактировать <i class="fa fa-edit"></i></button>'
                + '<button class="m-1 btn btn-danger" onclick="deleteModal(' + row.id + ')">Delete <i class="fa fa-trash"></i></button>';
            }
        }
        ]
    });
});

function editModal(id){
    $('#editModal').modal('show');
    $('#serial').attr("count",id);
        $('#editModal [name=val_1]').val("");
    $('#editModal [name=val_1]').prop('disabled', true);
        $('#editModal [name=val_2]').val("");
    $('#editModal [name=val_2]').prop('disabled', true);
        $.ajax({
        type: 'GET',
        url: "http:///wp-content/themes/betheme/api.php", 
        data: {id: id},
        success: function(response){
            data = response[0];
                        $('#editModal [name=val_1]').val(data.val_1);
            $('#editModal [name=val_1]').prop('disabled', false);
                        $('#editModal [name=val_2]').val(data.val_2);
            $('#editModal [name=val_2]').prop('disabled', false);
                    }
    });
}

function deleteModal(id){
    $('#deleteModal').modal('show');
    $('#deleteSerial').attr("count",id);
}

function deleteField(id){
    $.ajax({
        type: 'DELETE',
        url: "http:///wp-content/themes/betheme/api.php",
        data: {id: id},
        success: function(response){
            $('#dataTable').DataTable().ajax.reload();
                toast(response);
            }
    });
    $('#deleteModal').modal('hide');
}

function addModal(){
    $('#addModal').modal('show');
        type = $('#addModal [name=val_1]').attr('type');
    if(type != 'checkbox' && type != 'radio'){
    $('#addModal [name=name]').val("");
    }
        type = $('#addModal [name=name]').attr('type');
    if(type != 'checkbox' && type != 'radio'){
    $('#addModal [name=name]').name("");
    }
    }

function addNew(){
    formData = $("#addModal form").serializeArray();
    $.ajax({
        type: 'POST',
        url: "http:///wp-content/themes/betheme/api.php",
        data: formData,
        success: function(response){
            $('#dataTable').DataTable().ajax.reload();
                toast(response);
            }
    });
    $('#addModal').modal('hide');
}

function save(id){
    formData = $("#editModal form").serializeArray();
    formData.push({name: "id", value: id});
    $.ajax({
        type: 'PUT',
        url: "http:///wp-content/themes/betheme/api.php",
        data: formData,
        success: function(response){
            $('#dataTable').DataTable().ajax.reload();
                toast(response);
            }
    });
    $('#editModal').modal('hide');
}

function toast(message){
    $('#toastMessage').text(message);
    $('#toast').toast('show');
}

</script>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Edit Field</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="" method="POST" enctype="multipart/form-data">

<!-- val_1 -->
<div class="form-group">
<label>Название мероприятия</label>
<input class="form-control" type="text" name="name" placeholder="">
</div>


<!-- val_2 -->
<div class="form-group">
<label>Дата</label>
<input class="form-control" type="date" name="date" placeholder="">
</div>


<!-- val_3 -->
<div class="form-group">
<label>Время</label>
<input class="form-control" type="time" name="time" placeholder="">
</div>


<!-- val_4 -->
<div class="form-group">
<label>Описание</label>
<input class="form-control" type="text" name="Description" placeholder="">
</div>



<!-- val_5 -->
<div class="form-group">
<label>Категория</label>
<input class="form-control" type="text" name="	kategorya" placeholder="">
</div>



<!-- val_6 -->
<div class="form-group">
<label>Цена</label>
<input class="form-control" type="text" name="Price" placeholder="">
</div>



<!-- val_7 -->
<div class="form-group">
<label>Цена льготного билета</label>
<input class="form-control" type="text" name="Price1" placeholder="">
</div>



</form>      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="serial" type="button" class="btn btn-primary" onclick="save(this.getAttribute('count'));">Сохранить</button>
      </div>
    </div>
  </div>
</div>

<!-- Insert Modal -->
<div class="modal fade" id="addModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Добавить мероприятия </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="" method="POST" enctype="multipart/form-data">

<!-- val_1 -->
<div class="form-group">
<label>Название мероприятия</label>
<input class="form-control" type="text" name="name" placeholder="">
</div>


<!-- val_2 -->
<div class="form-group">
<label>Дата</label>
<input class="form-control" type="date" name="date" placeholder="">
</div>


<!-- val_3 -->
<div class="form-group">
<label>Время</label>
<input class="form-control" type="time" name="time" placeholder="">
</div>


<!-- val_4 -->
<div class="form-group">
<label>Описание</label>
<input class="form-control" type="text" name="Description" placeholder="">
</div>



<!-- val_5 -->
<div class="form-group">
<label>Категория</label>
<input class="form-control" type="text" name="	kategorya" placeholder="">
</div>



<!-- val_6 -->
<div class="form-group">
<label>Цена</label>
<input class="form-control" type="text" name="Price" placeholder="">
</div>



<!-- val_7 -->
<div class="form-group">
<label>Цена льготного билета</label>
<input class="form-control" type="text" name="Price1" placeholder="">
</div>

</form>      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"> Отмена</button>
        <button type="button" class="btn btn-primary" onclick="addNew();">Добавить</button>
      </div>
    </div>
  </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Delete Field</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure that you want to delete this field?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Нет, вернуться назад</button>
        <button id="deleteSerial" type="button" class="btn btn-primary" onclick="deleteField(this.getAttribute('count'));">Да,удалить</button>
      </div>
    </div>
  </div>
</div>

<div id="toast" class="toast" role="toast" aria-live="assertive" aria-atomic="true" data-delay="5000" style="display: block; position: fixed; top: 10px; right: 10px; min-width: 200px;">
  <div class="toast-header">
    <i class="fa fa-paper-plane"></i> 
    <strong class="mr-auto">Response</strong>
    <small class="text-muted">Just Now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body" id="toastMessage">
  </div>
</div>

</body>
</html>
    Написано