我有一個用戶發送的內容串列，比如推特，他們發布了一段文字，下面的內容也會顯示出來。輸入我放了一個ID，在Ajax中更新這個ID，但是因為帖子在下面，編輯是模式化的，只能編輯其中一個表單，因為輸入ID是固定的 能否請您幫忙？
($consult as $item)
<div id="card" class="card data-id-{{$item-> id}}">
<div class="card-header"> >。
<h5 class="card-title"/span>> 你的咨詢</h5>
<div class="card-tools"/span>>
< button type="button" class="btn btn-tool" data-card-widget="crapse">
<i class="fas fa-minus"/span>> </i>>
</button>
<div class="btn-group">
< button type="button" class="btn btn- 工具" data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3. org/2000/svg" viewBox="0 0 24 24" data-supported dps="24x24" fill="currentColor" class="mercado-match" width="24" 高度="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 0 012 2zM4 10a2 2 0 102 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 0 00-2-2z"/span>> </path>>
</svg>
</button>/span>
< div class="dropdown-menu dropdown-menu-right" role="menu" style=">
< button data-toggle="modal" data-target="#modal-lg-{{$item-> id}" class="dropdown-item" > <i class="fas fa-edit"/span>> </i> 編輯</按鈕>
< button class="dropdown-item deleteskill" data-id="{$item-> id}}" data-token="{{ csrf_token() }}" > <i class="fas fa-trash"/span>> </i> Delete</button>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<div class="card-body"/span> >
<div class="post">/span>
<div class="user-block all-posts-body"/span>>
@if(Auth::user()->照片)
< img alt="On Demand Consults" class="img-circle img-bored-sm" src="/photo/avatar/{{Auth: :user()->photo}}"/span>>
否則
< img alt="On Demand Consults" class="img-circle img-bored-sm" src="/img/avatar. png" >
@endif
<span class="用戶名">
<a href="#">/span>{{Auth: :user()->name}}{{Auth::user()->family}}</a>
</span>/span>
<span class="description">共享公開 - {{CarbonCarbon: :parse($item->created_at)->diffForhumans()}}</span>
<p>/span>
{{$item->detail}}}
</p> {{$item->description}}
</div>/span>
</div>/span>
</div>/span>
</div>/span>
@endforeach
我的模式
@foreach($consult as $item)
< div class="modal fade"/span> id="modal-lg-{{$item-> id}}">
<div class="modal-dialog modal-lg"/span>>
<div class="modal-content"/span>>
<div class="modal-header"/span>>
<h4 class="modal-title"/span>> 更新您的咨詢</h4>。
< button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"/span>> ×</span>
</button>
</div>
<form data-id="{{$item-> id}" method="post" action="{{ route("Consult. update", $item->id) }}" enctype="multipart/form-data" >
@csrf
@method('PUT')
<div class="modal-body"/span>>
< textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about? " >{{$item->description}}</textarea>
< div class="alert-message" id="descriptiError"> </div>>
</div>/span>
<div class="modal-footer justify-content-between"/span>>
< button type="button" class="btn btn-default" data-dismiss="modal"> 關閉</按鈕>
< button type="button" class="btn btn-primary updateInfo" data-id="{{$item-> id}" data-token="{{ csrf_token() }}">保存更改</button>
</div>/span>
</form>
</div>/span>
<!-- /.modal-content -->
</div>/span>
<!-- /.modal-dialog -->
</div>
@endforeach
我的ajax代碼
$(".updateInfo") 。 on（'click',function（e） {
e.preventDefault（）。
let description = $（'#description'）.val（）。
const ConsultId = $（this）.attr（'data-id'）。
var confirmation = confirm("Are you sure you want to update this Consult ？")。
if（確認） {
$.ajax（{
type:"PUT"/span>,
data:{
"_token"。"{{ csrf_token() }}}"。
description:描述。
},
url:'/ConsultantsCp/Consult/' ConsultId,
success: function(data){
swal({title: "好作業", text: "咨詢已成功更新！", type:
"成功", 計時器: 1500, buttons: false,}).then（function(){
location.reload（）。
}
);
},
error。function(response) {
$('#descriptiError').text(response.responseJSON.errors.description) 。
}
});
}
});
uj5u.com熱心網友回復：
試試這個例子，這是一個簡單的例子，假設你有提供帖子資訊的顯示路由和提交編輯的編輯路由，在這個例子中，我們沒有提交表單，只是用名為axios的ajax客戶端發送一個請求，
刀片檔案：
<!!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
<meta name="viewport" content="width=device width, initial-scale=1. 0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>/span>Document</title>/span>
<link rel="styleheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384- Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/span>>
</head>
<body>
@foreach($consult as $item)
< div id="card" class="card">
<div class="card-header"/span>>
<h5 class="card-title"/span>> 你的咨詢</h5>
<div class="card-tools"/span>>
< button type="button" class="btn btn-tool" data-card-widget="crapse">
<i class="fas fa-minus"/span>> </i>>
</button>
<button data-id={{$item['id']}}. type="button" class="btn btn-primary" data-toggle="modal"/span> data-target="#exampleModal"/span>>
編輯
</button>
</div>
</div>/span>
<div class="card-body">
<div class="post">
<p>/span>
{{$item['description']}}}
</p> {{$item['description']}}.
</div>/span>
</div>/span>
</div>/span>
@endforeach
< div class="modal fade"/span> id="exampleModal"/span> tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">>
< div class="modal-dialog" role="document">
<div class="modal-content"/span>>
<div class="modal-header">/span>
< h5 class="modal-title"/span> id="exampleModalLabel"/span>> 編輯帖子</h5>
< button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"/span>> ×</span>
</button>
</div>
<div class="modal-body">
<form>/span>
< input type="hidden" name="id">
<div class="form-group"/span>>
<label>Description</label>
< input name="description" class="form-control">
</div>/span>
</form>
</div>/span>
<div class="modal-footer">
< button type="button" class="btn btn-secondary" data-dismiss="modal"> 關閉</按鈕>
< button name="save-button" type="button" class="btn btn-primary"> 保存更改</按鈕>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"/span>
integrity="sha384- KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"/span>>
</script>/span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"/span>
integrity="sha384- ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"/span>>
</script>/span>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"/span>
integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"/span>>
</script>/span>
<script src="https://cdnjs. cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js"></script>/span>
</body>
<script>
const modal = $('#exampleModal'/span>)
const descriptionInput = $('input[name="description"] ')
const idInput = $('input[name="id"]'/span>)
const saveButton = $('button[name="save-button"]')
modal.on('show.bs.modal', (e) => /span> {
//從被點擊的按鈕中獲取id。
const postId = e.relatedTarget.getAttribute（'data-id'）。
//呈現所需的帖子資訊。
axios.get('/posts/' postId).then(res => {
descriptionInput.val(res.data.description)
idInput.val(res.data.id)
})
})
saveButton.on('click', () => {
//你的例子中的編輯請求是/ConsultantsCp/Consult/' ConsultId。
axios.put('/posts/' idInput.val(), {
_token。"{{ csrf_token() }}"。
description: descriptionInput.val()。
}).then(res => {
console.log（res）。
modal.modal('toggle'/span>)
})
})
</script>>
</html>/span>
uj5u.com熱心網友回復：
與Rateb的答案相似，但有點不同
首先，我們必須宣告一個javascript函式來初始化我們需要在模態表單中顯示的東西其次，我們必須用必要的內容呼叫該函式。在你的案例中，當我們點擊編輯按鈕時，它必須呼叫js函式第三是邏輯。
第三是你用來發布資料的邏輯
。注意到我是如何對description進行編碼以保留格式，并且我洗掉了模態表單中的其他引數，并宣告一個隱藏欄位以包含item-id。
@foreach($consult as $item)
< div id="card" class="card data-id-{{$item-> id}}">
<div class="card-header">
<h5 class="card-title">您的咨詢</h5>。
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"> </i>
</button>
<div class="btn-group">
< button type="button" class="btn btn-tool " data- toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false" >
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 0 00-2-2z"/span>></path>
</svg>
</button>
< div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data- toggle="modal" data-target="#edit-modal" onclick="initModal({{$item->id}}, {{json_encode($item-> description)}}。)" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item-> id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete< /button>。
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
@if(Auth::user()->照片)
<img alt="按需咨詢" class="img-circle img-bored-sm" src="/photo/avatar/{{Auth::user()-> photo}}">
否則
<img alt="按需咨詢" class="img-circle img-borered-sm" src="/img/avatar.png" >
@endif
<span class="username">
<a href="#">{{Auth::user()->name}}{{Auth::user()->family}}</a>
</span>
<span class="description">Shared publicly - /span>{{ CarbonCarbon: :parse($item-> created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}}
</p>
</div>
</div>
</div>
</div>
@endforeach
modal
<div class="modal fade" id="edit-modal">。
< div class="modal- dialog modal-lg" >
<div class="modal-content">
<div class="modal-header" >
<h4 class="modal-title" > update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true" > ×</span>
</button>。
</div>
<form id="edit-modal-form" >
<div class="modal-body">
<textarea id="description" name="description" class="form-control title">control form-control-sm" type="text" placeholder="What do 你 想要 談 關于? " ></textarea>
<div class="alert-message" id="descriptiError"></div>。
<input type="hidden" id="item-id-field" >
</div>
< div class="modal-footer justify-content-between" >
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
<button type="submit" class="btn btn-primary updateInfo" > 保存 改變</按鈕>
</div>
</form>
</div>
<!--/.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scripts
function initModal（id, description)
{
// Inialize the modal hidden field with the id value using Jquery.
$("#item-id-field").val（id）。
//對json進行解碼并在modal的desciption欄位中顯示。
var description_decoded = JSON. parse(JSON.stringify(description)) 。
$("#description").html（description_decoded）。
}
$(".updateInfo").on（'click',function（e） {
e.preventDefault（）。
let description = $（'#description'）.val（）。
const ConsultId = $("#item-id-field").val() 。
var confirmation = confirm("Are you sure you want to update this Consult ？")。
if（確認） {
$.ajax（{
type:"PUT"/span>,
data:{
"_token"。"{{ csrf_token() }}}"。
description:描述。
},
url:'/ConsultantsCp/Consult/' ConsultId,
success: function(data){
swal({title: "好作業", text: "咨詢已成功更新！", type:
"成功", 計時器: 1500, buttons: false,}).then（function(){
location.reload（）。
}
);
},
error。function(response) {
$('#descriptiError').text(response.responseJSON.errors.description) 。
}
});
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/324226.html
標籤：