CMS Laravel | Н-06 | Редактировать\Удалить категории с помощью Ajax и всплывающих окон

you can copy paste the above code, or check here for the official docs.

Now you need to include the modal.blade.php in the main app.blade.php for using it later from JS.

Showing Popups

Now we need to trigger the popups (Show and Hide) by clicking the edit or remove category buttons, make sure to give each popup modal an ID for referencing it, also we need to add to the OK button in the footer area of the modal and attribute for checking if the button has been clicked or no, add data-js-type=”modal-submit” only for the remove Modal. For Now!

CODE HERE FOR ATTRIBUTES

Also Make Sure to add two attributes for our Category Buttons data-js=”open-remove” and data-js=”open-edit” each one correspond to it element’s function. for checking the click event on the buttons.

We need a JavaScript File for doing our Logic, So go ahead and create a main.js file under Resources/js, and make sure to require it on the app.js file on the same directory for telling laravel that we want to include the JS File to Compilation Process (The Same Process For the CSS SASS)

//app.js file Under resources/js 
...
main = require("./main/main.js"); ///< we also put main.js file under a folder called main 
...

Итак, для запуска всплывающего окна при нажатии кнопки удаления

откройте файл JS и, используя JQuery Selector Magic, мы захватим элемент, привяжем событие щелчка для кнопки и откроем модальное окно, этот фрагмент кода должен продемонстрировать КАК?

$(function() { ///< On Document Ready!

  $('data-js=open-remove').on('click', function(e) {
       $('#removeModal').modal(); ///< Modal is a bootstrap func for Showing the Popup
  });

  //We Also do the same thing for the Edit Modal, only changing the event button and the modal 
  $('data-js=open-edit').on('click', function(e) {
       $('#editModal').modal(); ///< Modal is a bootstrap func for Showing the Popup
  });
});
//NOTICE: You have to Know the Basic Things about JQUERY First!

Вы можете нажать кнопку «Удалить» под категорией, и вы должны увидеть красивое всплывающее окно, медленно приземляющееся вверху вашей страницы.

Как вы могли заметить, мы также сделали такую ​​же привязку события для кнопки «Редактировать».

Отправка с помощью AJAX

Таким образом, AJAX позволит нам вызывать бэкенд (серверный скрипт) и общаться с базой данных, не перезагружая дырявую страницу, а только ее часть. Вы все еще можете использовать обычный метод отправки формы, но я думаю, что пришло время попробовать что-то более мощное.

в основном JS-файле мы должны проверить отправку формы или нажатие кнопки «ОК» в нашем всплывающем модальном окне. В этом случае мы собираемся использовать различные методы для получения события клика в всплывающих окнах «Удалить и изменить».

Для удаления мы будем проверять событие нажатия кнопки OK.

Для Edit мы собираемся проверить событие отправки формы. Возможно, вы этого не заметили, но под нашим нижним колонтитулом во всплывающем окне «Редактировать» есть форма, содержащая кнопки «Закрыть» и «ОК». , проверьте модальные фрагменты кода выше.

Удаление категории

мы проверяем нажатие кнопки отправки всплывающего окна

$('[data-js-type=modal-submit]').on('click', function(e) {
 //AJAX Call Goes here 
});

Теперь с помощью Ajax мы собираемся отправить идентификатор категории, который мы можем получить с первой нажатой кнопки в категории под элементом span, проверьте последний учебник для получения дополнительной информации.

$('[data-js-type=modal-submit]').on('click', function(e) {
    $.ajax({
        url: "deleteCategory",
        method: "POST",
        dataType: "json",
        data: { id: $("[data-js=open-remove]").find('span').attr('id') },
        success: function(result) {
            console.log("Success : ", result);
        },
        error: function(error) {
            console.log("AJAX ERROR: ", error);
        }
    });

});

Это может показаться немного разочаровывающим, но на самом деле это очень просто, давайте пройдемся по этому фрагменту кода.

Во-первых, мы используем метод Jquery AJAX и передаем объект, URL-адрес, указывающий на маршрут /deleteCategory, который вам нужно настроить в файле web.php, направляющем почтовый запрос к контроллеру в методе, который мы собираемся создать. называется removeCategory()

мы указываем тип данных метода запроса (POST): тип возвращаемого значения будет JSON и, конечно же, данные, которые мы хотим передать PHP-скрипту под атрибутом данных, мы создаем объект, который на самом деле просто получает данные из нашей кнопки «Удалить категорию». в частности, из элемента span, чтобы найти категорию в базе данных.

успех будет вызван успешным запросом и ответом, а ошибка вызвана ошибкой (наиболее вероятная ОШИБКА HTTP)

В случае успеха, как вы можете, мы проверяем ответы об успехе или ошибке из результата, который возвращается сервером (скрипт PHP), и здесь мы выполняем нашу пользовательскую проверку (например: идентификатор недействителен, мы возвращаем Сообщение об ошибке) и, при желании, страницу, чтобы изменения вступили в силу.

//So under the Success Function we check for our Success Message 
if (result.Success) {
    //Reload the Page 
    document.location.reload(true);
} else if (result.Error) {
    console.log('Error From the Sever ', result.Error);
}

Теперь нам нужно направить URL-адрес deleteCategory в метод нашего контроллера категорий.

Route::post('/deleteCategory', 'CategoryController@removeCategory')->name('category.delete');

Затем мы удаляем категорию из базы данных.

public function removeCategory(Request $request) {
     //Find the Category 
     $category = Category::findOrFail($request->id);

     //Delete the Category 
     $category->delete();

     //Session Massage 
     session()->flash('Success', 'Category Named ' . $category->name . ' Removed Successuflly');
    
     return json_encode(['Success' => 'Category Named ' . $category->name . ' Removed 
     Successuflly']);
}

as Simple as That Попытка удалить категорию должна работать без проблем.

Теперь для редактирования категории это будет тот же процесс, что и удаление, единственное, что нам нужно изменить, это обработка на стороне сервера запроса на редактирование и отправки формы.

Таким образом, вызов Ajax будет

$('[data-js=open-edit]').on('click', function(e) {

    console.log('Clicked');
    $("#editModal").modal();
    //Opening the Modal 

});


$("#editForm").submit(function(e) {

    $.ajax({
        url: "/editCategory",
        method: "POST",
        dataType: "json",
        data: {
            id: $("[data-js=open-remove]").find("span").attr("id"),
            name: $('[data-js-type=editedText]').val()
        },
        success: function(result) {
            console.log("Success : ", result);
        },
        error: function(error) {
            console.log('AJAX ERROR: ', error);
        }
    });

    //Prevent Form Submitting
    e.preventDefault();
});

Примечание: для редактирования мы отправляем новое название категории вместе с идентификатором категории.

Также при желании вы можете перезагрузить при успехе

if (result.Success) {
    //Reload the Page 
    document.location.reload(true);
} else if (result.Error) {
    console.log('Error From the Sever ', result.Error);
}

И вам нужно обработать запрос на редактирование на стороне сервера.

public function editCategory(Request $request) {
    //Find Category 
    $category = Category::findOrFail($request->id);
    
    //Change the Name
    $category->name = $request->name;

    //Updating Category 
    $category->update();

    session()->flash('Success', 'Category Name changed Successfully to : ' . $category->name);

    return json_encode(['Success' => 'Category Name changed Successfully to : ' . $category->name]);
}

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

Так что это был довольно длинный учебник, если вы все еще чувствуете себя немного запутанным в запросах AJAX и обработке на стороне сервера, вы можете посмотреть видеоурок выше для получения дополнительных разъяснений.

Что следующее

Это все, что касается Ajax и управления категориями. В следующем уроке мы рассмотрим добавление сообщений и простой блог для получения и отображения наших сообщений.