Question

我正在尝试通过ajax创建类似于Facebook的创建和编辑。 ajax scripts已经为我准备好了，html如下所示...但是我不知道make的功能如何。

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">myaddress@googlemail.com</span>
                    <a href="#" class="editlink">Edit</a>
                    <button type="button" class="savebtn btn btn-primary btn-xs">Save</button>

                </div>

            </div>
        </section>
    </div>

输出：

控制器：

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

Answer 1

无需使用vue.js。只需使用以下简单的jQuery代码即可。希望是帮助。

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.log( '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]);
    }
}

在Laravel中使用Ajax进行实时更新

1 个答案: