I have created an angularjs application using ng-table with customized pagination template. The application is working fine but the issue is that I want the pagination to be appeared after a <div id="test1">.
My code is as given below, can anyone please tell me some solution for this
Working JSFiddle
html
<div ng-app="main" ng-controller="DemoCtrl">
<table class="table" ng-table="tableParams" template-pagination="custom/pager" border="1">
<thead>
<tr>
<th sortable="'name'">NUMBER</th>
<th sortable="'age'">STATUS</th>
<th sortable="'role'">LOB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in $data| filter:searchPolicies">
<td><span ng-bind="user.name"></span>
</td>
<td><span ng-bind="user.age"></span>
</td>
<td><span ng-bind="user.role"></span>
</td>
</tr>
</tbody>
</table>
<div id="test1">some data</div>
<script type="text/ng-template" id="custom/pager">
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
</div>
script
$scope.tableParams = new ngTableParams({
page: 1,
count: 5, // count per page
sorting: {
name: "asc"
}
}, {
counts: [],
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
params.total(data.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
Assuming the div you want between the table and pagination isn't too large, you could just add it to the beginning of the pagination script.
i.e.
<script type="text/ng-template" id="custom/pager">
<div id="test1">some data</div>
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
Updated JSFiddle
Related
I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach.Can please help me with the correct way to achieve this.
<tfoot>
<tr class="footable-paging">
<td colspan="5">
<div class="footable-pagination-wrapper">
<ul class="pagination" id="demo">
<li class="footable-page-nav disabled" data-page="first" aria-label="first page">
<a class="footable-page-link" href="${request.requestURL.toString}">«</a>
</li>
<li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
<a class="footable-page-link" href="${request.requestURL.toString}">‹</a>
</li>
<li class="footable-page visible active" data-page="1" aria-label="page 1">
<a class="footable-page-link" href="${request.requestURL.toString}">1</a>
</li>
<li class="footable-page visible" data-page="2" aria-label="page 2">
<a class="footable-page-link" href="${request.requestURL.toString}">2</a>
</li>
<li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
<a class="footable-page-link" href="${request.requestURL.toString}">›</a>
</li>
<li class="footable-page-nav" data-page="last" aria-label="last page">
<a class="footable-page-link" href="${request.requestURL.toString}">»</a>
</li>
</ul>
<div class="divider"></div>
<span class="label label-default"></span>
</div>
</td>
</tr>
</tfoot>
<tbody id="body">
<tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
<td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
<a href="${child.getProperties['path']}.html">
<img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
</a>
</td>
<td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
${child.getProperties['company']}
</td>
<td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
<td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
<td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
</tr>
</tbody>
HTL/Sightly has iteration control for some time already, see the data-sly-repeat spec:
<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection # begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>
You can use that in conjunction with URL parameters to set the begin and end of your list page.
Any help massively appreciated as I am stuck!
In short, I have a filterable table on a Cordova build for Android. Works fine when testing on PC, but when build by Cordova into Android app, the filterable table does not work.
When a search input is entered, nothing happens.
The code is below, as you can see I think I have the correct META tags in place... really unsure why this isnt working within the build when other Javascript works no problme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<title>Officerr</title>
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="fonts/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link data-pwa-version="set_in_manifest_and_pwa_js" href="_manifest.json" rel="manifest">
<link href="app/icons/icon-192x192.png" rel="apple-touch-icon" sizes="180x180">
</head>
<body class="theme-light" data-gradient="body-default" data-highlight="highlight-red">
<div id="preloader">
<div class="spinner-border color-highlight" role="status">
</div>
</div>
<div id="page">
<div class="header header-fixed header-logo-center">
<a class="header-title" href="#">Categories</a> <a class="header-icon header-icon-1" data-back-button="" href="#"><i class="fas fa-arrow-left"></i></a>
</div>
<div id="footer-bar" class="footer-bar-1">
<i class="fa fa-search"></i><span>Search</span>
<i class="fa fa-gavel"></i><span>Categories</span>
<i class="fa fa-briefcase"></i><span>A-Z</span>
<i class="fa fa-user"></i><span>Directory</span>
<i class="fa fa-info"></i><span>Info</span>
</div>
<div class="page-content header-clear-medium">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
<table id="myTable">
<tr class="header1"><td>A</td></tr>
<tr>
<td><b>Aide Memoires</b>
</td>
</tr>
<tr>
<td><b>Animals</b>
</td>
</tr>
<tr>
<td><b>Armed Forces</b>
</td>
</tr>
<tr>
<td><b>Assault</b>
</td>
</tr>
<tr class="header1"><td>B</td></tr>
<tr class="header1"><td>C</td></tr>
<tr>
<td><b>Children</b>
</td>
</tr>
<tr>
<td><b>Criminal Damage</b>
</td>
</tr>
<tr class="header1"><td>D</td></tr>
<tr>
<td><b>Drugs</b>
</td>
</tr>
<tr class="header1"><td>E</td></tr>
<tr>
<td><b>Environment</b>
</td>
</tr>
<tr class="header1"><td>F</td></tr>
<tr>
<td><b>Firearms</b>
</td>
</tr>
<tr>
<td><b>Fireworks</b>
</td>
</tr>
<tr>
<td><b>Fraud</b>
</td>
</tr>
<tr class="header1"><td>G</td></tr>
<tr class="header1"><td>H</td></tr>
<tr>
<td><b>Harassment</b>
</td>
</tr>
<tr>
<td><b>Human Rights</b>
</td>
<tr class="header1"><td>I</td></tr>
<tr>
<td><b>Immigration</b>
</td>
</tr>
<tr class="header1"><td>J</td></tr>
<tr class="header1"><td>K</td></tr>
<tr class="header1"><td>L</td></tr>
<tr class="header1"><td>M</td></tr>
<tr>
<td><b>Mental Health</b>
</td>
</tr>
<tr class="header1"><td>N</td></tr>
<tr class="header1"><td>O</td></tr>
<tr class="header1"><td>P</td></tr>
<tr>
<td><b>PACE</b>
</td>
</tr>
<tr>
<td><b>Police & Courts</b>
</td>
</tr>
<tr>
<td><b>Public Order</b>
</td>
</tr>
<tr class="header1"><td>Q</td></tr>
<tr class="header1"><td>R</td></tr>
<tr>
<td><b>Railway Offences</b>
</td>
</tr>
<tr class="header1"><td>S</td></tr>
<tr>
<td><b>Sexual Offences</b>
</td>
</tr>
<tr>
<td><b>Sporting Offences</b>
</td>
</tr>
<tr>
<td><b>Stop & Search</b>
</td>
</tr>
<tr class="header1"><td>T</td></tr>
<tr>
<td><b>Terrorism</b>
</td>
</tr>
<tr>
<td><b>Theft</b>
</td>
</tr>
<tr>
<td><b>Traffic</b>
</td>
</tr>
<tr class="header1"><td>U</td></tr>
<tr>
<td><b>Use of Force</b>
</td>
</tr>
<tr class="header1"><td>V</td></tr>
<tr class="header1"><td>W</td></tr>
<tr>
<td><b>Weapons & Bladed Articles</b>
</td>
</tr>
<tr class="header1"><td>X</td></tr>
<tr class="header1"><td>Y</td></tr>
<tr class="header1"><td>Z</td></tr>
</table>
</div>
<!-- End of Page Content-->
<!-- All Menus, Action Sheets, Modals, Notifications, Toasts, Snackbars get Placed outside the <div class="page-content"> -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-settings">
<div class="menu-title mt-0 pt-0">
<h1>Settings</h1>
<p class="color-highlight">Flexible and Easy to Use</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="list-group list-custom-small">
<a class="pb-2 ms-n1" data-toggle-theme="" data-trigger-switch="switch-dark-mode" href="#"><i class="fa font-12 fa-moon rounded-s bg-highlight color-white me-3"></i> <span>Dark Mode</span></a>
<div class="custom-control scale-switch ios-switch">
<input class="ios-input" data-toggle-theme="" id="switch-dark-mode" type="checkbox"> <label class="custom-control-label" for="switch-dark-mode"></label>
</div>
<i class="fa fa-angle-right"></i>
</div>
<div class="list-group list-custom-large">
<a data-menu="menu-highlights" href="#"><i class="fa font-14 fa-tint bg-green-dark rounded-s"></i> <span>Page Highlight</span> <strong>16 Colors Highlights Included</strong> <span class="badge bg-highlight color-white">HOT</span> <i class="fa fa-angle-right"></i></a> <a class="border-0" data-menu="menu-backgrounds" href="#"><i class="fa font-14 fa-cog bg-blue-dark rounded-s"></i> <span>Background Color</span> <strong>10 Page Gradients Included</strong> <span class="badge bg-highlight color-white">NEW</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Menu Settings Highlights-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-highlights">
<div class="menu-title">
<h1>Highlights</h1>
<p class="color-highlight">Any Element can have a Highlight Color</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="highlight-changer">
<a data-change-highlight="blue" href="#"><i class="fa fa-circle color-blue-dark"></i><span class="color-blue-light">Default</span></a> <a data-change-highlight="red" href="#"><i class="fa fa-circle color-red-dark"></i><span class="color-red-light">Red</span></a> <a data-change-highlight="orange" href="#"><i class="fa fa-circle color-orange-dark"></i><span class="color-orange-light">Orange</span></a> <a data-change-highlight="pink2" href="#"><i class="fa fa-circle color-pink2-dark"></i><span class="color-pink-dark">Pink</span></a> <a data-change-highlight="magenta" href="#"><i class="fa fa-circle color-magenta-dark"></i><span class="color-magenta-light">Purple</span></a> <a data-change-highlight="aqua" href="#"><i class="fa fa-circle color-aqua-dark"></i><span class="color-aqua-light">Aqua</span></a> <a data-change-highlight="teal" href="#"><i class="fa fa-circle color-teal-dark"></i><span class="color-teal-light">Teal</span></a> <a data-change-highlight="mint" href="#"><i class="fa fa-circle color-mint-dark"></i><span class="color-mint-light">Mint</span></a> <a data-change-highlight="green" href="#"><i class="fa fa-circle color-green-light"></i><span class="color-green-light">Green</span></a> <a data-change-highlight="grass" href="#"><i class="fa fa-circle color-green-dark"></i><span class="color-green-dark">Grass</span></a> <a data-change-highlight="sunny" href="#"><i class="fa fa-circle color-yellow-light"></i><span class="color-yellow-light">Sunny</span></a> <a data-change-highlight="yellow" href="#"><i class="fa fa-circle color-yellow-dark"></i><span class="color-yellow-light">Goldish</span></a> <a data-change-highlight="brown" href="#"><i class="fa fa-circle color-brown-dark"></i><span class="color-brown-light">Wood</span></a> <a data-change-highlight="night" href="#"><i class="fa fa-circle color-dark-dark"></i><span class="color-dark-light">Night</span></a> <a data-change-highlight="dark" href="#"><i class="fa fa-circle color-dark-light"></i><span class="color-dark-light">Dark</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Settings Backgrounds-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-backgrounds">
<div class="menu-title">
<h1>Backgrounds</h1>
<p class="color-highlight">Change Page Color Behind Content Boxes</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="background-changer">
<a data-change-background="default" href="#"><i class="bg-theme"></i><span class="color-dark-dark">Default</span></a> <a data-change-background="plum" href="#"><i class="body-plum"></i><span class="color-plum-dark">Plum</span></a> <a data-change-background="magenta" href="#"><i class="body-magenta"></i><span class="color-dark-dark">Magenta</span></a> <a data-change-background="dark" href="#"><i class="body-dark"></i><span class="color-dark-dark">Dark</span></a> <a data-change-background="violet" href="#"><i class="body-violet"></i><span class="color-violet-dark">Violet</span></a> <a data-change-background="red" href="#"><i class="body-red"></i><span class="color-red-dark">Red</span></a> <a data-change-background="green" href="#"><i class="body-green"></i><span class="color-green-dark">Green</span></a> <a data-change-background="sky" href="#"><i class="body-sky"></i><span class="color-sky-dark">Sky</span></a> <a data-change-background="orange" href="#"><i class="body-orange"></i><span class="color-orange-dark">Orange</span></a> <a data-change-background="yellow" href="#"><i class="body-yellow"></i><span class="color-yellow-dark">Yellow</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Share -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-share">
<div class="menu-title mt-n1">
<h1>Share the Love</h1>
<p class="color-highlight">Just Tap the Social Icon. We'll add the Link</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="content mb-0">
<div class="divider mb-0">
</div>
<div class="list-group list-custom-small list-icon-0">
<a class="shareToFacebook external-link" href="auto_generated"><i class="font-18 fab fa-facebook-square color-facebook"></i> <span class="font-13">Facebook</span> <i class="fa fa-angle-right"></i></a> <a class="shareToTwitter external-link" href="auto_generated"><i class="font-18 fab fa-twitter-square color-twitter"></i> <span class="font-13">Twitter</span> <i class="fa fa-angle-right"></i></a> <a class="shareToLinkedIn external-link" href="auto_generated"><i class="font-18 fab fa-linkedin color-linkedin"></i> <span class="font-13">LinkedIn</span> <i class="fa fa-angle-right"></i></a> <a class="shareToWhatsApp external-link" href="auto_generated"><i class="font-18 fab fa-whatsapp-square color-whatsapp"></i> <span class="font-13">WhatsApp</span> <i class="fa fa-angle-right"></i></a> <a class="shareToMail external-link border-0" href="auto_generated"><i class="font-18 fa fa-envelope-square color-mail"></i> <span class="font-13">Email</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Be sure this is on your main visiting page, for example, the index.html page-->
<!-- Install Prompt for Android -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-android">
<div class="boxed-text-l mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p>Install Sticky on your home screen, and access it just like a regular app. It really is that simple!</p>
<a class="pwa-install btn btn-s rounded-s shadow-l text-uppercase font-900 bg-highlight mb-2" href="#">Add to Home Screen</a><br>
<a class="pwa-dismiss close-menu color-gray-dark text-uppercase font-900 opacity-60 font-10 pt-2" href="#">Maybe later</a>
<div class="clear">
</div>
</div>
</div>
<!-- Install instructions for iOS -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-ios">
<div class="boxed-text-xl mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p class="mb-0 pb-0">Install Sticky, and access it like a regular app. Open your Safari menu and tap "Add to Home Screen".</p>
<div class="clearfix pt-3">
</div>
<a class="pwa-dismiss close-menu color-highlight text-uppercase font-700" href="#">Maybe later</a>
</div>
</div>
</div>
<script src="cordova.js" type="text/javascript">
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script type="text/javascript">
var deviceReady = function(){
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
}
document.addEventListener('deviceready', deviceReady, false);
</script>
<script src="scripts/bootstrap.min.js">
</script>
<script src="scripts/custom.js">
</script>
</body>
</html>
Basically, I'm doing a dashboard to view the details. If the user want to edit the their details. They should click the edit button to edit it.If i click the edit button it's didn't response anything. Now the edit didn't work. I couldn't find the problem. I attach my codes over here.
index.blade.php
#extends('layouts.main')
#section('content')
<div class="justpaddingside" role="main" >
<div class="row w-100 Bfont">
<div class="col-xs-12">
<div class="havence-content">
<div class="havence-content-body">
<div class="dashboardbg">
<div class="x_title" >
<img src="https://img.icons8.com/bubbles/50/000000/important-mail.png" class="rounded float-left" >
<h2 class="p-3 font-weight-bold">Email Reminder Dashboard</h2>
<h4 class="text-right">{{date('d-m-Y')}}</h4>
<h5 class="text-right">{{date('H:i:s')}}</h5>
</div>
<div class="col-md-12 text-right">
<a href="mail" class="btn btn-danger badge-pill" > Create New Template </a>
</div>
</div>
<div class="contentbg p-5">
<div class="row w-100">
<div class="havence-content-datatable table-responsive">
<table class="table table-hover table-info" cellpadding="0" cellspacing="0" border="0">
<thead class="">
<tr>
<th scope="col">ID</th>
<th scope="col">Subject</th>
<th scope="col">Message</th>
<th scope="col">Condition</th>
<th scope="col">Module Name</th>
</tr>
</thead>
<tbody>
#foreach ($mailTemplates as $mailTemplate)
<tr>
<th>{{$mailTemplate->id}}</th>
<th>{{$mailTemplate->subject}} </th>
<th>{{$mailTemplate->message}} </th>
<th>{{$mailTemplate->condition_id}} </th>
<th>{{$mailTemplate->mod_name}}</th>
<td class="text-right">
<a href='edit/{id}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
<form action="{{ route('havence.automail.delete', $mailTemplate) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! Form::open(['method'=>'post', 'id'=> 'delete-frm']) !!}
#method('DELETE')
#csrf
{!! Form::close() !!}
</div>
#endsection
#push('stylesheets')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
#endpush
#push('scripts')
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script src="https://unpkg.com/sweetalert2#7.19.3/dist/sweetalert2.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
#endpush
#section('page-js')
<script>
</script>
#endsection
AutoMailController.php
public function edit($id)
{
$mailTemplates=AutoEmailTemplate::find($id);
return view('havence.automail.edit')->with('mailTemplates', $mailTemplates);
}
web.php
Route::get('api/email/create', ['as' => 'email.create', 'uses' => 'Havence\AutoMailController#create']);
Route::get('automail/mail', 'Havence\AutoMailController#mail');
Route::get('automail/index',['as'=>'email.index','uses' => 'Havence\AutoMailController#index']);
Route::get('automail/edit/{id}',['as'=>'email.edit','uses' => 'Havence\AutoMailController#edit']);
Route::get('automail/delete',['as'=>'email.delete','uses' => 'Havence\AutoMailController#destroy']);
Try to use :
<a href='{{ route("email.edit",["id"=>$mailTemplate->id]) }}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
You're not passing the id from your href and user laravel string interpolation '{{ $variable }}'.
<a href='edit/{{$mailTemplate->id}}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
also if you want to open the route in another tab add target="_blank" in your 'a' tag.
<a href='edit/{{$mailTemplate->id}}' target='_blank' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
what about replacing :
<a href='edit/{id}' class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
with:
<a href={{'edit/'.$mailTemplate->id}} class="btn btn-danger badge-pill" style="width:80px" >EDIT </a>
Hello I have a App i'm working on in ionic and I am trying to load a mobile calculator that I did in html in the ionic page but when I load my app it looks like it's not loading the css or js code so how do I get to do that?
here's my code:
<ion-view title="Math">
<ion-content padding="true" class="has-header">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- powerTouch -->
<script type="text/javascript" src="js/powertouch-js-1.5.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/moz.css">
<!-- font -->
<link href="css/font.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/l10n.js"></script>
<link rel="resource" type="application/l10n" href="locales.ini">
<script>
$(function(){
var powerTouch = $.powerTouch();
powerTouch.attachTouch(".ui-el");
powerTouch.attachGesture(".ui-gesture", {"acceleration":0});
});
</script>
<div class="frame">
<div class="film">
<div class="calc">
<div class="result ui-gesture">
<div class="cwrap fontlight hide">
×
</div>
<div class="exp fontlight" id="exp">
<div class="string" id="string">
<div id="string-film">
<!--<div class="text-frame">
<span id="text"></span>
</div>-->
</div>
</div>
</div>
</div>
<div class="keys">
<table class="pulsanti">
<tbody>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="(" data-long=")" data-longtap="1">
<span class="label rel">(
<span class="apice apM tohide">)</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="M" data-longtap="1" id="btn-m">
<span class="label rel">M
<span class="apice apM">×</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="Mr">
<span class="label rel">Mr</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="+">
<span class="label">+</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="7">
<span class="label">7</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="8">
<span class="label">8</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="9">
<span class="label">9</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="-">
<span class="label">—</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="4">
<span class="label">4</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="5">
<span class="label">5</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="6">
<span class="label">6</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="*">
<span class="label">×</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="1">
<span class="label">1</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="2">
<span class="label">2</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="3">
<span class="label">3</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val=":">
<span class="label">÷</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="0">
<span class="label">0</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val=".">
<span class="label">,</span>
</a>
</td>
<td colspan="2">
<a href="javascript:;" class="buttn insert ui-el uguale">
<span class="label">=</span>
</a>
</td>
</tr>
</tbody>
</table>
<table class="pulsanti extra">
<tbody>
<tr>
<td>
<a id="close-tonda" href="javascript:;" class="buttn insert ui-el par" data-val=")">
<span class="label">)</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="[" data-long="]" data-longtap="1">
<span class="label rel">[
<span class="apice apM">]</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par toshow" data-val="{" data-long="}" data-longtap="1">
<span class="label rel">{
<span class="apice apM">}</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="%">
<span class="label">%</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="sin(" data-alert="1">
<span class="label">sin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="cos(" data-alert="1">
<span class="label">cos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="tan(" data-alert="1">
<span class="label">tan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="e">
<span class="label">e</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="asin(" data-alert="1">
<span class="label">asin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="acos(" data-alert="1">
<span class="label">acos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="atan(" data-alert="1">
<span class="label">atan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="π">
<span class="label">π</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^2">
<span class="label rel">x
<span class="apice">2</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^">
<span class="label rel">y
<span class="apice">x</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini second ui-el" data-val="log(" data-alert="1">
<span class="label">log</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="!">
<span class="label">x!</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert second ui-el" data-val="sqrt(" data-alert="1">
<span class="label">√</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="root(" data-alert="1">
<span class="label rel">
<span class="apice rad">x</span>√</span>
</a>
</td>
<td colspan="2">
<button id="math-button1" ion-button="" class="buttn insert mini second ui-el" block="" href-inappbrowser="page7">
Tools
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="info-page scrollable">
<div class="page-content page">
<div class="section border">
<
<div class="clear"></div>
<h2 class="left">calculator</h2>
<div class="clear"></div>
<p class="subtitle" data-l10n-id="SubTitleApp">
Simple and powerful scientific calculator
</p>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMemory">Memory</span>
</div>
<div class="row">M
<span class="ugul">=</span>
<span data-l10n-id="M-symbol">write into memory</span>
</div>
<div class="row">Mr
<span class="ugul">=</span>
<span data-l10n-id="Mr-symbol">read from memory</span>
</div>
<div class="row">M
<span class="apice_">×</span>
<span class="ugul">=</span>
<span data-l10n-id="M-symbol-cross">Tap&Hold, clear memory</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleHistory">History</span>
</div>
<div class="row">↑ ↓
<span class="ugul">=</span>
<span data-l10n-id="History-swipe">swipe up/down on calc bar</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMath">Math</span>
</div>
<div class="row">
<span class="apice_">2</span>√
<span class="ugul">=</span> sqrt()</div>
<div class="row">
<span class="apice_">x</span>√
<span class="ugul">=</span>
<span class="pedice">x</span>root()</div>
<div class="row">x
<span class="apice_">y</span>
<span class="ugul">=</span> x^y</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleSymbols">Symbols</span>
</div>
<div class="row text">
) ] } =
<span data-l10n-id="TapAndHold">Tap&Hold</span> ( [ {
</div>
</div>
</div>
<div class="section ">
<div class="speg">
<div class="row text" data-l10n-id="DeleteAll">
Delete all = Tap&Hold delete button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thank's in advance!!! :)
The following is the code of my .vue. swapping between div worked just fine and the transition fade works well too. but mode out-in not working at all. both elements were shown at the same time while transitioning.
EDIT##
Sorry that I am not familiar with fiddle. Please find the full code of my .vue below for your best reference.
<template>
<div>
<div class="col-md-3">
<namecard :shop="shop" :owner="user"></namecard>
</div>
<div class="col-md-9">
<div>
<ul class="nav nav-tabs shop-manage-tabs">
<li class="nav-item">
<a class="nav-link" :class="isActive == 'items' ? 'active' :''" #click.prevent="activateTab('items')">Items</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'operaters' ? 'active' : ''" #click.prevent="activateTab('operaters')">Operaters</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'info' ? 'active' : ''" #click.prevent="activateTab('info')">Info</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" :class="isActive == 'statistics' ? 'active' : ''">Statistics</a>
<div class="dropdown-menu">
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Another action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Separated link</a>
</div>
</li>
</ul>
</div>
<transition-group name="fade" mode="out-in">
<div v-if="isActive == 'items'" key="items">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProduct = true">Add New Product</button>
<button type="button" class="btn btn-danger" #click="addNewProduct = true">Delete Product</button>
</div>
<add-new-product v-show="addNewProduct"></add-new-product>
<div class="card" style="padding: 1rem">
<item-card :productId="product.id" v-for="product in shop.products" :key="product"></item-card>
</div>
</div>
<div v-else-if="isActive == 'operaters'" key="operaters">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProductModal = true">Add Operator</button>
<button type="button" class="btn btn-danger" #click="addNewProductModal = true">Delete Operator</button>
</div>
<div class="card">operaters</div>
</div>
<div v-else-if="isActive == 'info'" class="card" key="info">
<div class="card">info</div>
</div>
<div v-else-if="isActive == 'statistics'" class="card" key="statistics">
<div class="card">statistics</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import itemCard from './Item-card.vue'
import nameCard from '../Namecard.vue'
import addNewProduct from './Add-new-product.vue'
export default {
components:{
'item-card':itemCard,
'namecard':nameCard,
'add-new-product':addNewProduct,
},
data(){
return{
user:{},
shop:{},
isActive:'items',
addNewProduct:false,
}
},
props:[
],
created(){
this.getUserInfo()
},
mounted(){
},
methods:{
getUserInfo(){
var vm = this
vm.$http.get('/getAuthUser').then((response)=>{
vm.user = response.data
vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
vm.shop = response.data.data.shop
})
})
},
activateTab(tab){
var vm = this
vm.isActive = tab
}
}
}
</script>
You need to give key attribute to each of the div to make the transition work smoothly. In your case I see an extra ', which might be an issue, try removing that.
Change
<div v-if="isActive == 'items'" key="'items'">
to
<div v-if="isActive == 'items'" key="items">
and similarly at other places as well.