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();
});
};
Related
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();
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
The application is running on sails.js as backend and Angular as frontend,
It is CRUD application and there two pages, one is the main Dashboard and other is Search.html that have advanced search functionalities.
here the thing two pages, use identical ng-repeat that inject same html page which contain same function with same controller that use same service.
Here how it goes, I click on the delete button which fire showCancelQuoteModal(quote), then I click on the confirmation and fire ng-click=cancelQoute which pass decisionFrom without any problems.
now in cancelQouteModalCtrl both qoute and decisionForm are passed without a problem to qouteLogService, where qoute still there and qoutelog contain cancellationReason.
and qoute.post should return createdQouteLog but it doesn't in search .html and does in Dashboard.html
when I started tracking and watching the var, everything disappear when the code get in Angular.js and the following stack
$scope.apply() / $scope.digest() /$scope.eval() /processQueue()
here the table of Dashboard.html and search.html
<table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
data-page-size="{{pageControl.pageSize}}">
<thead>
<tr>
<th data-type="date">Last Update</th>
<th>Client</th>
<th>Phone</th>
<th>Dealer</th>
<th>Assigned To</th>
<th data-type="numeric">Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
<td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
{{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
</td>
<td>{{quote.client.name}}</td>
<td>{{quote.client.phone | tel}}</td>
<td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
<td ng-if="!quote.dealershipCompany">Online</td>
<td>{{username(latestQuoteLog.assignedTo)}}</td>
<td data-value="{{latestQuoteLog.status}}">
<span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
{{quoteStatusPrettyNames[latestQuoteLog.status]}}
</span>
</td>
<td>
<div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
aria-valuemax="100" ng-
style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
</div>
</td>
<td>
<div class=" btn-group">
<button class="btn btn-sm btn-icon btn-default"
ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
ng-click="showCancelQuoteModal(quote)">
<i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="editQuote(quote)">
<i class="glyphicon glyphicon-edit" tooltip="Edit Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="viewQuote(quote)">
<i class="glyphicon glyphicon-eye-open" tooltip="View Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Broker"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Processor"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="9" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
here cancelModal
<script type="text/ng-template" id="cancelQuoteModal.html">
<div class="modal-header">
<form name="decisionForm" class="form-horizontal wrapper input-set">
<div class="col-md-10">
<label>
<h4 class="font-thin">Why it is not sold ?</h4>
</label>
<select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
<option ng-repeat="reason in rejectionReasons" value="{{reason}}">
{{reason}}
</option>
</select>
<small
ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
class="b-light m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
<button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
</div>
</script>
Here CancelModalController
.controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
$scope.rejectionReasons = rejectionReasons;
$scope.reasonForRejection;
$scope.cancelQuote = function (decisionForm) {
if (decisionForm.$invalid) {
$scope.showErrors = true;
} else {
quoteLogService.create(quote, {
'status': 'quoteCancelled',
'cancellationReason': $scope.reasonForRejection
}, function (createdQuoteLog) {
$modalInstance.close('Quote cancelled successfully!');
}, function (err) {
$modalInstance.dismiss('Error creating new quoteLog');
console.log('Error creating new quoteLog', err);
});
}
};
$scope.cancelBox = function () {
$modalInstance.close();
};
}]);
And here QouteLogService.js
QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
return {
create: function(quote, quotelog, success, error) {
quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
success(createdQuoteLog);
}, function(err) {
error(err);
});
},
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.
I'm trying to pass a variable from my link to ajax, but I cannot do so.
This is the code I'm working on:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
var id = $(this).attr('data-id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$("#dialog-example").modal('hide');
}
});
});
});
</script>
<table class="table table-bordered">
<tr>
<td>Project Code</td>
<td>Description</td>
</tr>
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];?>
<tr class="record" id="record-">
<td>
<?php echo $project; ?>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#" data-id="<?php echo $project; ?>" id="<?php echo $project; ?>" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a data-id="<?php echo $project; ?>" class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
I have a table where it has a delete column, if it is clicked a confirmation modal will appear that has 2 options yes or no. If yes is clicked, I need to delete that record and dismiss the modal, display the result without refreshing the page. How can I do that? I tried using ajax, I don't know if I am using it correctly. Your help will greatly appreciated. Thanks.
IDs must be unique in your DOM.
You have multiple links with id="btn-delete". That is the reason your code is not working
Change it to class, as below
In your markup:
<a data-id="<?php echo $project; ?>" class="btn btn-danger btn-delete">Yes<a>
And in your jQuery:
$(".btn-delete").click(...);
IDs must be unique Change to class instead and use $(this).data("id")
You also likely want to hide the deleted data from the page too
<a data-id="<?php echo $project; ?>"
class="btn btn-danger btn-delete">Yes<a>
$(".btn-delete").on("click",function(e) {
e.preventDefault(); // cancel the link
var id = $(this).data('id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$(this).closest("tr").remove(); // remove the row from view
$("#dialog-example").modal('hide');
}
});
});
Lastly I suggest you have only ONE dialog on the page and pass the ID to delete and ID or the row to it
Passing data to a jQuery UI Dialog
You're just hiding the modal when the delete success event is executed. You have to remove the line from the table too.
You can remove it like this :
$(this).parents('tr').remove();
UPDATE :
The following code was tested and is working. If you still have error, you should open firebug and report the error message. You have some basic syntax problem or errors in your code, I corrected some in this solution, but you should look at tutorials or documentations to learn basic and good practice to provide a good structured code.
Just replace the html table lines (tr) below with your php loop to generate the lines.
<!-- place your modal out of a table. In a table you have tr and td, no div.
By the way you just need 1 modal for all rows -->
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
No
Yes
</div>
</div>
<table class="table table-bordered">
<tr>
<th>Project Code</th>
<th>Description</th>
<th>Actions</th>
</tr>
<tr class="record" id="record-1">
<td>
project1
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj1" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj1" id="proj1" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
<tr class="record" id="record-2">
<td>
project2
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj2" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj2" id="proj2" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
</table>
<script>
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var btnDelete = $("#btn-delete");
//show the modal
$("#dialog-example").modal('show');
//save the id to delete if confirmed
var id=$(this).attr('data-id');
btnDelete.data('toRemove', id);
return false;
});
//action when clicking YES
$("#btn-delete").click(function(e) {
var id = $("#btn-delete").data('toRemove');
alert(id);
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
//hide the modal
var modal = $("#dialog-example");
modal.modal('hide');
var btnDelete = $("#btn-delete");
//remove the saved id
var id= btnDelete.data('toRemove');
//remove the row dynamically
$("#"+id).closest('tr').remove();
},
error:function( jqXHR, textStatus ) {
alert( "Request has failed! ; " + jqXHR.status + " / "+textStatus);
}
});
});
});
</script>