Использование ajax для обновления в реальном времени в laravel

Я пытаюсь создать и редактировать, как facebook, через ajax. ajax scripts готов для меня и html, как показано ниже ... но я не знаю, как это сделать.

Код HTML & .JS:

$(document).ready(function(){
	$(".editlink").on("click", function(e){
	  e.preventDefault();
		var dataset = $(this).prev(".datainfo");
		var savebtn = $(this).next(".savebtn");
		var theid   = dataset.attr("id");
		var newid   = theid+"-form";
		var currval = dataset.text();
		
		dataset.empty();
		
		$('<input type = "text" name = "'+newid+'" id = "'+newid+'" value = "'+currval+'" class = "hlite">').appendTo(dataset);
		
		$(this).css("display", "none");
		savebtn.css("display", "block");
	});
	$(".savebtn").on("click", function(e){
		e.preventDefault();
		var elink   = $(this).prev(".editlink");
		var dataset = elink.prev(".datainfo");
		var newid   = dataset.attr("id");
		
		var cinput  = "#"+newid+"-form";
		var einput  = $(cinput);
		var newval  = einput.attr("value");
		
		$(this).css("display", "none");
		einput.remove();
		dataset.html(newval);
		
		elink.css("display", "block");
	});
});
<div id = "wrapper">
        <section id = "core">
            <div class = "panel panel-default" style = "margin-top: 30px">

                <div class = "gear">
                    <label>Primary E-Mail:</label>
                    <span id = "pemail" class = "datainfo">[email protected]</span>
                    <a href = "#" class = "editlink">Edit</a>
                    <button type = "button" class = "savebtn btn btn-primary btn-xs">Save</button>

                </div>

            </div>
        </section>
    </div>

Выход:

Использование ajax для обновления в реальном времени в laravel

Контроллер:

\DB::table('users')->where('id', $id)->update([
    [
        'email'      => $request->input('pemail'),
    ]
])->where('id', $id);

Вы просто пытались этого добиться? Я имею в виду, что до сих пор, похоже, нет проблем, просто запишите простой запрос ajax на сервер (или просто отправку формы), а затем вы можете просто обновить свою таблицу, используя такую ​​модель: \App\User::find($id)->update(['fullname' => $request->input('pemail')]); В этом отношении вы необходимо добавить атрибут fullname в массив protected $fillable вашей модели, ознакомьтесь с документацией по обновлению записей и работе с моделями.

D. Petrov 21.07.2018 23:44

Я уже сделал это fullname attribute added to the protected $fillable

user9888683 22.07.2018 06:23

Но это не единственное, что можно сделать - поделиться своими успехами / усилиями по другой части задачи.

D. Petrov 22.07.2018 11:32

Я не могу понять, что мне делать в контроллере, потому что это ajax. Я не знаю, нужен ли ему json или что-нибудь в этом роде. как связать это с кодом ajax. @

user9888683 23.07.2018 11:04
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
4
483
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

No need to use vue.js. Just use simple jQuery code as below. Hope it's help.

Код jQuery:

Add event on save button On Click
onclick = "saveProfile(INPUT ID HERE, RECORD ID)"

Добавьте код jquery в нижний колонтитул или файл просмотра

function saveProfile(id, inputid) {
    var value = $(inputid).val();
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content') },
        url: "{{URL::to('admin/updateProfile')}}",
        data:{'id' : id,'value' : value,'inputid':inputid},
        method:'POST',
        success: function( resp ) {
            alert('update');                
        },
        error: function( req, status, err ) {
            console.info( 'something went wrong', status, err );
        }
    });
}

Код контроллера

public function updateProfile(REQUEST $request){
    $id = $request->id;
    $value = $request->value;
    $inputid = $request->inputid;
    //for examaple - Input textbox id is : pemail-form
    if ($inputid == 'pemail-form'){
        DB::table('table_name')->where('id', $id)->update(['email' => $value]);
    }
    if ($inputid == 'fullname-form'){
        DB::table('table_name')->where('id', $id)->update(['fullname' => $value]);
    }
}

Другие вопросы по теме