Was verursacht diesen Fehler mit dem Laravel- und JavaScript -Artikel?
Posted: 12 Mar 2025, 09:23
Ich arbeite an einer -Blogging -Anwendung (Link zu Github Repo) in Laravel 8.
Ich habe eine Möglichkeit zusammengestellt, Tags zu Artikeln hinzuzufügen und zu bearbeiten. /> < /p>
Ich bin auf einen Fehler gestoßen, dessen Ursache und Lösung ich nicht gefunden habe: Aktualisierung der Artikelliste des Artikels schlägt fehl, nachdem ein oder mehrere (aber nicht alle) Tags gelöscht wurden. Wenn ich jedoch nur neue Tags auswähle, funktioniert der Aktualisierungsvorgang einwandfrei.
In Ansichten \ Dashboard \ edit-article.blade.php Ich habe diesen Code den Pat der Schnittstelle erhalten, das sich mit den Tags befasst:
In Ressourcen \ js \ tags.js habe ich:
Wenn ich auf die Schließung eines Tags klicke und dann den Artikel aktualisiere, verliert er alle die Tags (nicht nur die gelöschte).>
Ich habe eine Möglichkeit zusammengestellt, Tags zu Artikeln hinzuzufügen und zu bearbeiten. /> < /p>
Ich bin auf einen Fehler gestoßen, dessen Ursache und Lösung ich nicht gefunden habe: Aktualisierung der Artikelliste des Artikels schlägt fehl, nachdem ein oder mehrere (aber nicht alle) Tags gelöscht wurden. Wenn ich jedoch nur neue Tags auswähle, funktioniert der Aktualisierungsvorgang einwandfrei.
Code: Select all
public function edit($id)
{
$article = Article::find($id);
$attached_tags = $article->tags()->get()->pluck('id')->toArray();
return view(
'dashboard/edit-article',
[
'categories' => $this->categories(),
'tags' => $this->tags(),
'attached_tags' => $attached_tags,
'article' => $article
]
);
}
public function update(Request $request, $id)
{
$validator = Validator::make($request->all(), $this->rules, $this->messages);
if ($validator->fails()) {
return redirect()->back()->withErrors($validator->errors())->withInput();
}
$fields = $validator->validated();
$article = Article::find($id);
// If a new image is uploaded, set it as the article image
// Otherwise, set the old image...
if (isset($request->image)) {
$imageName = md5(time()) . Auth::user()->id . '.' . $request->image->extension();
$request->image->move(public_path('images/articles'), $imageName);
} else {
$imageName = $article->image;
}
$article->title = $request->get('title');
$article->short_description = $request->get('short_description');
$article->category_id = $request->get('category_id');
$article->featured = $request->has('featured');
$article->image = $request->get('image') == 'default.jpg' ? 'default.jpg' : $imageName;
$article->content = $request->get('content');
// Save changes to the article
$article->save();
//Attach tags to article
if ($request->has('tags')) {
$article->tags()->sync($request->tags);
} else {
$article->tags()->sync([]);
}
return redirect()->route('dashboard.articles')->with('success', 'The article titled "' . $article->title . '" was updated');
}
Code: Select all
{{ __('Tags') }}
[i][/i]
[list]
[*]
Use [Ctrl] + [Click] to select one or more tags from the list
[/list]
@php $selectedTags = old('tags', $attached_tags) @endphp
@foreach ($tags as $tag)
id, $selectedTags) ? 'selected' : '' }}>
{{ $tag->name }}
@endforeach
Code: Select all
const tagsList = document.querySelector(".tags-list")
const tagActions = document.getElementById("tagActions")
const tagSelector = document.getElementById("tags")
const tagToggler = document.getElementById("tagSelectorToggler")
if (tagSelector) {
var preSelectedTags = Array.from(tagSelector.options)
.filter((option) => option.selected)
.map((option) => option.text)
var selectedTags = new Set()
}
window.filterTags = (event) => {
var query = event.target.value
var availableTags = Array.from(tagSelector.options)
availableTags.forEach(function (option) {
if (!option.text.toLowerCase().includes(query.toLowerCase())) {
option.classList.add("d-none")
} else {
option.classList.remove("d-none")
}
})
}
window.toggleTagSelector = (event) => {
let tagActionsVisibility = tagActions.checkVisibility()
if (event.target.tagName !== "BUTTON" && event.target.tagName !== "SPAN") {
if (tagActionsVisibility) {
tagActions.style.display = "none"
tagToggler.classList.add("active")
} else {
tagActions.style.display = "block"
tagToggler.classList.remove("active")
}
}
}
window.renderTags = () => {
tagsList.innerHTML =
[...selectedTags]
.sort()
.map(
(tag) =>
`[*] >${tag}
×
`,
)
.join("") ||
`[*]Use [Ctrl] + [Click] to select one or more tags from the list`
for (const option of tagSelector.options) {
option.selected = selectedTags.has(option.textContent)
}
}
if (preSelectedTags) {
window.addPreselectedTags = () => {
preSelectedTags.forEach(selectedTags.add.bind(selectedTags))
renderTags()
}
}
if (tagsList) {
tagsList.addEventListener("click", function (event) {
if (event.target.tagName !== "BUTTON") return
let tagToRemove = event.target.closest("LI").children[0].textContent
let optionToDeselect = Array.from(tagSelector.options).find((option) => {
return option.innerText == tagToRemove
})
optionToDeselect.removeAttribute('selected')
selectedTags.delete(tagToRemove)
console.log(selectedTags);
renderTags()
})
}
if (tagSelector) {
tagSelector.addEventListener("change", function () {
selectedTags = new Set(
Array.from(tagSelector.options)
.filter((option) => option.selected)
.map((option) => option.textContent),
)
renderTags()
console.log(selectedTags);
})
}
if (tagSelector) {
window.addPreselectedTags();
}