public function editsal($id)
{
$sal=Salary::find(decrypt($id));
return view('editsal',compact('sal'));
}
public function updatesal()
{
$uid=request('u_id');
$emp=Salary::find($uid);
return $emp;
$emp->update([
'date'=>request('da'),
'salary'=>request('sa'),
]);
return redirect()->route('viewsaladmin');
}
Route::get('/editsal/{id}','HomeController#editsal')->name('editsal');
Route::post('/updatesal','HomeController#updatesal')->name('updatesal');
<!DOCTYPE html>
<html>
<head>
<title>Edit Salary</title>
<link rel="stylesheet" href="styleform.css">
</head>
<body>
<h3>Salary sheet</h3>
<div align="center">
<form action="{{route('updatesal')}}" method="POST">
#csrf
<input type="hidden" name="u_id" value="{{$sal->salary_id}}">
<label>Enter date</label>
<input type="date" name="da" placeholder="date" value="{{$sal->date}}" required ><br>
<label>Enter salary</label>
<input type="number" name="sa" placeholder="amount here"value="{{$sal->salary}}" required><br>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Employee Salary</title>
<link rel="stylesheet" href="styletable.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<table class="table table-striped">
<tr>
<th>salary_id</th>
<th>emp_id</th>
<th>date</th>
<th>salary amount</th>
<th>Action</th>
</tr>
#foreach($sal as $sals)
<tr>
<td>{{$sals->salary_id}}</td>
<td>{{$sals->emp_id}}</td>
<td>{{$sals->date}}</td>
<td>{{$sals->salary}}</td>
<td><a href="{{route('editsal',encrypt($sals->id))}}" class="btn btn-primary"
role="button">Edit</a></td>
<td><a href="{{route('deletesal',encrypt($sals->salary_id))}}" class="btn btn-danger"
role="button">Delete</td>
</tr>
#endforeach
</table>
</div>
</body>
</html>
Related
I'm new in web development and in Laravel 8 and I'm having trouble when using the DataTable plugin
I had read the documentation that is in this link https://datatables.net/examples/styling/bootstrap4.html
Going to show the code I have and I think I'm not doing anything wrong so dunno why it isnt working.
This is from the app.blade in the scripts
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ asset('css/mdDateTimePicker.css') }}">
#yield('css_extra')
</head>
As you can see I'm importing Jquery
This is the code of my view
#extends('layouts.app')
#section('content')
<div class="container my-5">
<h1>Gestión Médicos</h1>
</div>
<div class="container my-5">
<a class="btn btn-primary btn-lg text-body" href="{{route('medico.create')}}">Registrar Médico</a>
</div>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover bg-white" id="medicos">
<tr class="info">
<th>Nombre</th>
<th>Apellido</th>
<th>Cedula</th>
<th>Usuario</th>
<th>Email</th>
<th>Especialidades</th>
<th>Teléfono</th>
<th>Género</th>
<th colspan="2">Opciones</th>
</tr>
#foreach ($medicos as $key=>$medico)
<tr>
<td>{{$medico->nombre}}</td>
<td>{{$medico->apellido}}</td>
<td>{{$medico->cedula}}</td>
<td>{{$medico->Users->name}}</td>
<td>{{$medico->email}}</td>
<td>
#foreach ($medico->Persona_especialidad as $especialidad)
{{$medico->Persona_especiaidad}}
{{$especialidad->nombre}}
#endforeach
</td>
<td>{{$medico->telefono}}</td>
<td>{{$medico->genero}}</td>
<td>Editar</td>
<td>Borrar</td>
</tr>
#endforeach
</table>
</div>
</div>
#if (request()->get('mensaje'))
<script>
alert('{{request()->get('mensaje')}}')
</script>
#endif
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<script>
$('#medicos').DataTable();
</script>
#endsection
What am I getting this console error?
I don't have a clue what is wrong.
It doesn't work because the columns doesn't match. One solution is to have both links for Editar and Borrar in only one <td>.
Code the <tr> that has the <th> like this
<tr class="info">
<th>Nombre</th>
<th>Apellido</th>
<th>Cédula</th>
<th>Usuario</th>
<th>Email</th>
<th>Especialidades</th>
<th>Teléfono</th>
<th>Género</th>
<th style="width: 20%">Opciones</th>
</tr>
And also code the <td> that has the links like this
<td>Editar
Borrar</td>
That would make the two links appear in the same <td> and solve the issue because now the <td> match in the body and in the head of the table.
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
I'm created a simple CSS with YUI Skin Builder, but, when I try to use it in my MVC project the color system is not correct
My skin is that: Skin, the spected button color is red, but, I just get a gray or blue button:
My cshtml code:
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-min.css")" rel="stylesheet" />
</head>
<body>
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/logo.png")">
</div>
<div style="width:500px; margin-right:auto; margin-left:auto;">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Usuario:</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Senha:</label>
<input id="password" type="password" placeholder="Password">
</div>
<button class="pure-button pure-button-primary">A Pure Button</button>
</fieldset>
</form>
</div>
</body>
</html>
What is wrong ?
Ok, I forgot to put the css name in body
<body class="pure-skin-mine">
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex - Bradesco</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-mine.css")" rel="stylesheet" />
</head>
<body class="pure-skin-mine">
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/bradesco-logo.png")">
</div>
...
Now it's work very well!
I have a SearchGoogle html page which opens a google map.I want to load this html file into a modal dialog on the click of a button.
Defined a modal on my main index.jsp page and href the SearchGoogle.html. The content doesnt load up.Any help?
The below page is the remote page i want to load in an Modal Dialog.Have tried remote content loading.It is not working
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
If you look up the load method in the jQuery API doc, it says that the load method uses innerHTML to parse the page to be loaded and that:
During this process, browsers often filter elements from the document such as <html>,
<title>, or <head> elements.
I suggest putting the googleMap.css on the modal page and moving your scripts in the page above to the body tag like this:
HTML for the page to be loaded (which I'm calling remote.html):
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Google Map Modal Title</h4>
</div>
<div class="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>
HTML for the page with the modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Add the googleMap.css on this page -->
<link rel="stylesheet" type="text/css" href="css/googleMap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- The contents of remote.html will be injected here. Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I am new to knockout.js and I'm getting an error with a simple test page, using MVC4 and Breez.js. I want to bind data to a table.
#{Layout = null;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Breeze Test</title>
<link rel="stylesheet" href="/Content/breezesample.css" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
Breeze Test
</p>
</div>
</div>
</header>
<div id="body">
<section id="content" class="content-wrapper main-content">
<script type="text/x-jquery-tmpl" id="BookTableTemplate">
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Price</th>
<th>Read?</th>
</tr>
</thead>
<tbody data-bind="template: {name:'bookRowTemplate', foreach:books}">
</tbody>
</table>
</script>
<script type="text/x-jquery-tmpl" id="bookRowTemplate">
<tr>
<td>${Title}</td>
<td>${Author}</td>
<td>${ISBN}</td>
<td>${Price}</td>
<td>${IsRead}</td>
</tr>
</script>
<div data-bind="visible: show" style="display: none">
Save
<input type="checkbox" data-bind="checked: IncludeRead" />
include read
<div data-bind="template: 'BookTableTemplate'"></div>
</div>
<div id="logmessages"></div>
</section>
</div>
<!--3rd party library scripts -->
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/knockout-2.1.0.js"></script>
<script src="/Scripts/q.js"></script>
<script src="/Scripts/breeze.debug.js"></script>
<!-- Application scripts -->
<script src="/Scripts/app/logger.js"></script>
<script src="/Scripts/app/bookViewModel.js"></script>
</body>
</html>
Instead of getting the data output I get:
${Title} ${Author} ${ISBN} ${Price} ${IsRead}
Look at this example: http://knockoutjs.com/documentation/template-binding.html
In your template use <td data-bind="text: Title">/>