8
●174
<script type="text/javascript">
const element = document.getElementById("myBtn");
element.addEventListener("click", setTitle);
function setTitle( text ) {
document.title = '<?php echo $resimcek['resim_ad'] ?>';
}
</script><a id="myBtn" onclick="change('/seo/<?php echo $cekresim['resim_seo'] ?>')"<title id="demo"></title>
<a id="id1" onclick="change('/seo/<?php echo $cekresim['resim_seo'] ?>')"
<a id="id2" onclick="change('/seo/<?php echo $cekresim['resim_seo'] ?>')"
<a id="id3" onclick="change('/seo/<?php echo $cekresim['resim_seo'] ?>')"veyafor ($i = 1; $i <= 3; $i++) {
echo '<a id="id'.$i.'" onclick="change(/seo/'.$cekresim['resim_seo'].')">deneme</a>';
}$('#id1,#id2,#id3').addEventListener("click", setTitle); 
<html>
<title>TITLE</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a id="myBtn" data-title="Title1">Link1</a> <br><br>
<a id="myBtn" data-title="Title2">Link2</a>
<br><br>
<a id="myBtn" data-title="Title3">Link3</a>
<br><br>
<a id="myBtn" data-title="Title4">Link4</a>
<script>
$("body").on("click","#myBtn",function(){
var title = $(this).data("title");
$(document).prop("title", title);
});
</script>
</body>
</html> 
function fetchApi(url, data = {}, response) {
axios.post(url, data)
.then(function (resp) {
if (!resp.data.success && Array.isArray(resp.data.msg)){
resp.data.msg.map(function (val) {
toastr.error(val);
})
} else if (!resp.data.success && resp.data.msg){
toastr.error(resp.data.msg);
}
if (resp.data.success && resp.data.msg){
toastr.success(resp.data.msg);
}
response(resp.data);
});
}Projede twig template kullanıldı, app.html.twig ve diğer addCategoryModal.html.twig dosyalarını include edilmiş gibi düşünebilirsin.{% extends 'root/app.html.twig' %}
{% block content %}
<div class="button-custom">
<button class="btn btn-primary btn-fill btn-wd float-right" data-toggle="modal" data-target="#categoryModal">Kategori Ekle</button>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title pb-2">Kategoriler</h4>
<div class="table-responsive">
<table class="table table-striped" id="catList">
<thead>
<tr>
<th>#</th>
<th>Kategori Ad</th>
<th>Durum</th>
<th>Duzenle</th>
<th>Sil</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
{% include 'admin/category/addCategoryModal.html.twig' %}
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
function tableRow(id, order, name, situation, situationName){
return $('<tr id="'+id+'" situation='+situation+' name="'+name+'" order="'+order+'">' +
'<th>'+order+'</th>' +
'<td>'+name+'</td>' +
'<td>'+situationName+'</td>' +
'<td><button class="btn btn-success btn-sm edit text-white" data-toggle="modal" data-target="#updateCategoryModal">Düzenle</button></td>' +
'<td><button class="btn btn-danger btn-sm delete" data-toggle="modal" data-target="#deleteCategoryModal">Sil</button></td>' +
'</tr>')
}
fetchApi('/api/admin/category/list', {}, function (res) {
res.data.map(function (val) {
let situationName = val.situation ? 'Aktif' : 'Pasif';
let row = tableRow(val.id, val.order, val.name, val.situation, situationName);
$('#catList > tbody').append(row);
});
});
$('#createCategory').on('click', function () {
var data = {
catName: $('#catName').val(),
order: $('#order').val(),
situation: $('#situation').find('option:selected').val(),
};
if (data.catName.length > 0 && data.order.length > 0){
fetchApi('/api/admin/category/create', data, function (res) {
if (res.success){
window.location.reload();
}
})
} else {
toastr.warning('Alanlari kontrol ediniz.');
}
});
$('#catList').on('click', '.delete', function() {
var id = $(this).closest('tr').attr('id');
$('#catList').data('deleteId', id);
});
$('#catList').on('click', '.edit', function() {
var id = $(this).closest('tr').attr('id');
var name = $(this).closest('tr').attr('name');
var situation = $(this).closest('tr').attr('situation');
var order = $(this).closest('tr').attr('order');
$('#catList').data('editId', id);
$('#uCatName').val(name);
$('#uOrder').val(order);
$('#uSituation').val(situation);
});
});
</script>
{% endblock %}Kategori table tablosuna catList adında ID verilmiş ve kategori içeriği JS ile doldurulmuş. function tableRow(id, order, name, situation, situationName){
return $('<tr id="'+id+'" situation='+situation+' name="'+name+'" order="'+order+'">' +
'<th>'+order+'</th>' +
'<td>'+name+'</td>' +
'<td>'+situationName+'</td>' +
'<td><button class="btn btn-success btn-sm edit text-white" data-toggle="modal" data-target="#updateCategoryModal">Düzenle</button></td>' +
'<td><button class="btn btn-danger btn-sm delete" data-toggle="modal" data-target="#deleteCategoryModal">Sil</button></td>' +
'</tr>')
}
fetchApi('/api/admin/category/list', {}, function (res) {
res.data.map(function (val) {
let situationName = val.situation ? 'Aktif' : 'Pasif';
let row = tableRow(val.id, val.order, val.name, val.situation, situationName);
$('#catList > tbody').append(row);
});
});api/admin/category/list bölümüne istek atılıyor ve liste çekiliyor. let row = tableRow(val.id, val.order, val.name, val.situation, situationName); ile tableRow fonksiyonundan satır oluşturuluyor, $('#catList > tbody').append(row); şeklinde tabloya ekleniyor. $('#catList').on('click', '.edit', function() {
var id = $(this).closest('tr').attr('id');
var name = $(this).closest('tr').attr('name');
var situation = $(this).closest('tr').attr('situation');
var order = $(this).closest('tr').attr('order');
$('#catList').data('editId', id);
$('#uCatName').val(name);
$('#uOrder').val(order);
$('#uSituation').val(situation);
})catList ID'sine sahip tablonun altındaki .edit (class) elementine tıklandı ise $(this).closest('tr').attr('id'); şeklinde verisine ulaşıyoruz. public function getCategories($request, $response){
$validation = $this->validator->validate($request, [
]);
if ($validation->failed())
{
return $response->withJson([
'success' => false,
'msg' => $_SESSION['errors'],
]);
}
$categories = Category::orderBy('order')
->where('situation', 1)
->get();
return $response->withJson($this->getResponseData(
['categories' => $categories]
));
}