Hello i'm having this error on my laravel 9 application:
SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails
delete from
`users`
where
`id` = 1
My code
<tbody>
#foreach ($users as $user)
<tr class="text-center">
<th>#{{$user->id}}</th>
<td>{{$user->code}}</td>
<td>{{$user->role}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->created_at}}</td>
<td>{{$user->updated_at}}</td>
<td>{{$user->updated_at}}</td>
<td class="d-flex justify-content-between">
<i class="fa-solid fa-user-pen ms-1"></i>
<i class="fa-solid fa-envelope"></i>
<div>
<button class="btn btn-outline-danger text-center userDelete"><i class="fa-solid fa-circle-xmark"></i></button>
</div>
<!-- The Modal -->
<div id="confirmDelete" class="custom-confirm">
<!-- Modal content -->
<div class="modal-content text-center">
<p>Sei sicuro di voler <span class="text-danger">cancellare</span> l'utente?</p>
<form action="{{route('admin.destroy', $user->id)}}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-success me-3">Conferma</button>
<span class="cancelDelete btn btn-warning">Annulla</span>
</form>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
Without the modal of confirm it is working with just:
<form action="{{route('admin.destroy', $user->id)}}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-success me-3">Conferma</button>
<span class="cancelDelete btn btn-warning">Annulla</span>
</form>
Why i'm getting that error?
Problem screenshot
error image
You have foreign key on table.You need to delete first related row from related table. For example, if we have posts and comments we need to remove from comments table which is contain post_id. It looks like in code that:
$post = Post::findOrFail($id);
$comments = Comment::where('post_id', $id)->delete();
$post->delete();
Related
I created one grid view to get the database table details,
here, when I click the Next Sync button it will pop up this box and I can choose the date and time,
but the problem is when I clicked any Next Sync button only change the first DateTime only,
this is the code of the table grid view
<table class="table table-striped border-bottom">
<thead>
<tr>
<th>Select to Sync.</th>
<th class="sorting">Source</th>
<th>Last Sync. Date</th>
<th>Download</th>
<th>Status</th>
<th>Next Sync Schedule</th>
<th>Schedule</th>
</tr>
</thead>
<tbody data-bind="foreach: PayrollIntegrationVM.GridDataList">
<tr>
<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
class="i-checks" name="foo"></td>
<td data-bind="text:SHTYP_NAME"></td>
<td data-bind="text: moment(SHTYP_LAST_DATE).format('L LTS')"></td>
<td>
<div data-bind="ifnot: SHTYP_SYNC_STATUS">
<a href="#" data-bind="click: PayrollIntegrationVM.ErrorLog">
<span class="mr-2">
<img src="~/Content/img/icon-excel.png"
alt="Download">
</span> Download Error Log
</a>
</div>
</td>
<td data-bind="text: SHTYP_SYNC_STATUS? 'Success' : 'Failed'"><a href="#">
<i class="fa fa-close text-danger"></i></a></td>
<td data-bind="text: moment(SHTYP_NEXT_DATE).format('L LTS')" id="SHTYP_NEXT_DATE_GET"
name="Sync_Next_Date"></td>
<td><a href="#" id="Next-Sync-Value" data-toggle="modal" data-target="#sync"
name="Next_Sync_button">Next Sync.</a></td>
</tr>
</tbody>
this is the date time picker code
<div class="modal" id="sync" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="col ml-5 d-flex flex-column justify-content-end">
<input type="date" class="form-control" id="NextSyncDate">
<input type="time" class="form-control mt-2" id="NextSyncTime">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="DoneButtonFunction()">Done</button>
</div>
</div>
</div>
</div>
this is the script part
<script language="JavaScript">
function DoneButtonFunction() {
var nextSyncDate = $('#NextSyncDate').val();
var nextSyncTime = $('#NextSyncTime').val();
var DateTime = nextSyncDate +" "+ nextSyncTime;
document.getElementById('SHTYP_NEXT_DATE_GET').innerHTML = DateTime;
}
}
</script>
it looks like in your js function, you find the element with the ID 'SHTYP_NEXT_DATE_GET', and js looks for the first one, try to save the row in the table, or find another way to Identify which 'SHTYP_NEXT_DATE_GET' element you want to edit
I am using JavaScript to load a file into a div. Which contains a table that I want to activate as DataTable
panel.js:
document.getElementById('navBtnApps').addEventListener('click', loadApps);
function loadApps(){
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
};
apps.php:
<div class="container pt-4">
<div class="col-12 border-bottom mb-5 pl-0">
<h3 class="display-4">
Your Apps
<button type="button" class="btn btn-success ml-2" data-toggle="modal" data-target="#new">
<i class="fas fa-plus mr-1"></i>
New
</button>
</h3>
</div>
<table id="tblApps" class="table table-striped">
<thead>
<tr>
<th>Application</th>
<th style="width:250px;">Action</th>
</tr>
</thead>
<tbody>
<?php foreach(scandir(dirname(__FILE__,3) . '/apps/') as $app){ ?>
<?php if(("$app" != "..") and ("$app" != ".") and ("$app" != ".htaccess")){ ?>
<tr>
<td><?=$app?></td>
<td>
<form method="post">
<a href="?p=apps&name=<?=$app?>" class="btn btn-sm btn-primary">
<i class="fas fa-eye mr-1"></i>
Details
</a>
<button type="submit" name="DeleteApp" value="<?=$app?>" class="btn btn-sm btn-danger">
<i class="fas fa-trash-alt mr-1"></i>
Delete
</button>
</form>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
</div>
When I press the navBtnApps button in my index very quickly, I can see that datatables is being activated. But as soon as the page stops loading, datatables gets deactivated. Any ideas why?
With your code:
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
$().load is asynchronous, so your #tblApps doesn't exist when you immediately (before it's finished loading) call .DataTable() on it.
Add the call into the $.load callback:
$('#mainCTN').load("/src/view/apps.php", function() {
$('#tblApps').DataTable();
});
jUqery.load() Load data from the server and place the returned HTML into the matched elements.
The data loaded will be available only after they are loaded, hence you need to run datatable in the callback.
Change :
function loadApps(){
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
};
To:
function loadApps(){
$('#mainCTN').load("http://localhost:63342/StackOverflow/1.html", ftion() {
$('#tblApps').DataTable();
});
};
Here is my problem. My columns are overflowed and I can't see it.
I know that some columns have a lot of data.
How can I edit HTML or CSS for that? This web I'm writing by Laravel framework.
Here is my source code, please view it. I'm using bootstrap for this.
<div class="box" ng-controller="TinTucNewController">
<div class="box-header">
{{csrf_field()}}
<h3 class="box-title">Danh Sách Tin Tức</h3> <br>
<button class="btn btn-new btn-xs btn-create">
<span class="glyphicon glyphicon-plus"></span>" Bấm vào đây để thêm dữ liệu"</button>
</div>
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead><tr>
<th>Mã Tin Tức</th>
<th>Thể Loại</th>
<th>Tiêu Đề</th>
<th>Tóm Tắt</th>
<th>Nội Dung</th>
<th>Hình Ảnh</th>
<th>Nổi Bật</th>
<th>Lượt Xem</th>
<th>Tạo mới</th>
<th>Cập nhật</th>
<th>Trạng thái</th>
<th>Công Cụ</th>
</tr>
</thead>
#foreach($ds_tt as $tt)
<tbody><tr>
<td>{{$tt->tt_ma}}</td>
<td>{{$tt->tt_theLoai}}</td>
<td>{{$tt->tt_tieuDe}}</td>
<td>{{$tt->tt_tomTat}}</td>
<td>{{$tt->tt_noiDung}}</td>
<td>
<img width="80" height="50" src="{{asset('upload/tintucnew/'.$tt->tt_hinh)}}"/>
</td>
<td>
#if($tt->tt_noiBat == 0){{'Tin Thường'}}
#else
{{'Tin Hot'}}
#endif
</td>
<td>{{$tt->tt_luotXem}}</td>
<td>{{$tt->tt_taoMoi}}</td>
<td>{{$tt->tt_capNhat}}</td>
<td><?php echo ($tt->tt_trangThai==2)?'Khóa':'Khả dụng' ?></td>
<td>
<button class="btn btn-warning btn-xs btn-edit">
<span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs btn-delete"
ng-click="confirmDelete({{$tt->tt_ma}})">{{ method_field("DELETE")}}
{{csrf_field()}}
<span class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
</div>
I am looping out forum entries and next to each one i have placed a button to show or hide the reply to comment form, i got this to work using a simple JS script. However because the script is looped out it only works for the top one. presumably because it cannot identify each element using an id because id won't be unique (and class would cause all of them to show/hide). I did think of adding something like {{$comment->id}} to the id so it would be unique but i cannot then use the JS script? can i?
Below is the relevant code:
#extends('layout')
#section('head')
<script>
$(document).ready(function(){
$("#showhidereply").click(function(){
$("#replycomment").toggle();
});
});
</script>
#stop
#section('content')
...
<!-- Comments -->
#foreach ($post->comments as $comment)
<span class="pull-right">
<div class=" btn-group">
<button class="btn btn">
<span class="glyphicon glyphicon-picture"></span> Owner's Name Here
</button>
<button class="btn btn btn-primary" id="showhidereply">
<span class="fa fa-reply"></span>
</button>
</div>
</span>
<p>{{ $comment->body }}</p>
</div>
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="input-group" style="padding-top: 5px;">
<input type="text" name="body" class="form-control"></input>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Reply to Comment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#stop
I did have someone make a suggestion of changing to:
Button
<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
<span class="fa fa-reply"></span>
</button>
Form
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">
Script
<script>
$(document).ready(function(){
// change the selector to use a class
$(".showhidereply").click(function(){
// this will query for the clicked toggle
var $toggle = $(this);
// build the target form id
var id = "#replycomment-" + $toggle.data('id');
$( id ).toggle();
});
});
</script>
But that still doesn't work but the elements are all now unique.
Many Thanks!
Try using this,
<button class="btn btn btn-primary" data-id="{{ $comment->id }}" onclick="showHide('replycomment-{{ $comment->id }}');">
<span class="fa fa-reply"></span>
</button>
//javascript code
<script>
function showHide(id){
$("#"+id).toggle();
}
</script>
I have a dashboard with multiple panels to display different information and I would like to be able to add a button to display the panel in a modal.
I am using bootstrap and all I can find is modals already written. I would like to copy the content of a div tag which is a panel and then display that in the model, but I am unsure as how to go about it. The html for the panel can be seen below. The panel does contain a table but I have cut the code down. I have looked around but I can't seem to find a solution for what I need. I understand that I need to use jQuery, copy the panel and add it to the contents of the modal dialog. I have tried to do this but had no luck. I have included a fiddle to show the approach I have taken Here this does launch the modal but the content is not displayed nor the button to close it.
Any help would be greatly appreciated.
HTML code for the panel:
<div class="panel sample panel-yellow message">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-flask fa-fw"></i>Sample Updates
<i class="fa fa-spinner fa-spin sample "></i>
<a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
<a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
<a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
</h3>
</div>
<div class="panel-body">
<center>
<h5 class="text-warning">Table shows samples created or modified in the last ten minutes</h5>
</center>
</div>
</div>
Screenshot of the panel I want to display:
Please Try this
<div class="panel sample panel-yellow message">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-flask fa-fw"></i>Sample Updates <i class="fa fa-spinner fa-spin sample ">
</i>
<a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
<a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
<a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-hover table-bordered table-responsive">
<thead>
<tr>
<th>
New Samples
</th>
<th>
Modified Samples
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="sampleCount"></span>
</td>
<td>
<span class="sampleCount2"></span>
</td>
</tr>
</tbody>
</table>
</div>
<center>
<h5 class="text-warning">
Table shows samples created or modified in the last ten minutes</h5>
</center>
</div>
</div>
<div id="SampleModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
</div>
Only Change in Mark Up is I removed the class hide
$('.focusButton').click(function(){
var newRow = $(this).parent().parent().parent('.sample').clone();
$('#SampleModal .modal-body').html(newRow);
$('#SampleModal').modal();
});
Check This Fiddle: http://jsfiddle.net/hoja/qsbkqc9m/12/
You can achieve this by using the following code
Using JQuery:
var html = $(id).html();
Using Javascript:
var html = document.getElementById(id).innerHTML;
Hope this helps.