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">/>
Related
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>
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.
There are some examples of doing this with Flask, so this should theoretically be possible with Pyramid too, but so far, haven't been able to. I'm trying to get a Pandas dataframe displayed using the DataTables JS library in the Pyramid web framework. Here's my folder/file structure:
repo_name/
modules/
get_df.py
static/
theme.css
templates/
layout.jinja2
mytemplate.jinja2
views/
__init__.py
default.py
routes.py
development.ini
production.ini
setup.py
Most of these files are untouched from the Pyramid cookiecutter code here. But the files I edites are pasted below.
views/default.py
from pyramid.view import view_config
from repo_name.modules.get_df import main
#view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
df = main()
html_table = df.to_html(table_id='myTable')
return dict(project='my_project', table=html_table)
mytemplate.jinja2
{% extends "layout.jinja2" %}
{% block content %}
<div class="content">
<h1><span class="font-semi-bold">Pyramid</span> <span class="smaller">Starter project</span></h1>
<!-- <p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p> -->
<p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p>
</div>
{% endblock content %}
{% block additional_scripts %}
<!-- <script type="text/javascript" src="../static/mytemplate.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
{% endblock %}
layout.jinja2 (added CDNs for DataTables)
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<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">
<meta name="description" content="pyramid web application">
<meta name="author" content="Pylons Project">
<link rel="shortcut icon" href="{{request.static_url('repo_name:static/pyramid-16x16.png')}}">
<title>Cookiecutter Starter project for the Pyramid Web Framework</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom styles for this scaffold -->
<link href="{{request.static_url('repo_name:static/theme.css')}}" rel="stylesheet">
<!-- My: DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<![endif]-->
</head>
<body>
<div class="starter-template">
<div class="container">
<div class="row">
<div class="col-md-2">
<img class="logo img-responsive" src="{{request.static_url('repo_name:static/pyramid.png') }}" alt="pyramid web framework">
</div>
<div class="col-md-10">
{% block content %}
<p>No content</p>
{% endblock content %}
</div>
</div>
<div class="row">
<div class="links">
<ul>
<li><i class="glyphicon glyphicon-cog icon-muted"></i>Github Project</li>
<li><i class="glyphicon glyphicon-globe icon-muted"></i>IRC Channel</li>
<li><i class="glyphicon glyphicon-home icon-muted"></i>Pylons Project</li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright">
Copyright © Pylons Project
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- My: DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
{% block additional_scripts %}{% endblock %}
</body>
</html>
The resulting webpage doesn't display the DataTable or the raw HTML table, it only displays the default HTML text with CSS formatting. Any help with this will be greatly appreciated!
You do not have any HTML <table> that would render the data in your Jinja template. The data that gets passed into that template should be a Python dict. The example below assumes that you pass in the dict users to the template.
views/default.py
#view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
# insert function here that returns users as a Python dict
return dict(project='my_project', users=users)
mytemplate.jinja2
{% if users %}
<div class="table-responsive">
<table id="datatable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th data-orderable="false">Edit</th>
<th data-orderable="false">Delete</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td><i class="glyphicon glyphicon-pencil"></i></td>
<td><i class="glyphicon glyphicon-remove"></i></td>
<td>{{ user['username'] }}</td>
<td>{{ user['role'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info" role="alert">No users found.</div>
{% endif %}
I'm using bootstrap. I need to move the columns as in the attached image.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EE</title>
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-3 col-sm-6 col-md-push-3">
<div class="alert alert-info" style="width:10px">2</div>
</div>
<div class="col-md-3 col-sm-6 col-md-push-6">
<div class="alert alert-info " style="width:10px">4</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="alert alert-info " style=" width:10px">3</div>
</div>
<div class="col-md-3 col-sm-6 col-md-pull-8">
<div class="alert alert-info" style="width:10px">1</div>
</div>
</div>
</body>
</html>
Did you try using .col-md-push-* and .col-md-pull-*? Example here: http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/
I am trying to set up a page with a slider control on the homepage. I designed the pages offline and they are working successfully with all the images working as expected but when I uploaded them to my MVC4 page the javascript arrow just keeps spinning and portions of the image are displaying but the ease in out functionality doesn't seem to be working.
Can someone have a look at my code and see if they can see where I am going wrong:
_Layout.cshtml
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
<title>MetaAwareness</title>
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-foundation.min.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-style.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-color.css")" title="color6" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/opensans_stylesheet.css")"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="container region1wrap">
<div class="row top_header">
<div class="eight columns">
<div class="login">
<i class="icon-signin"></i>Login
</div>
<div class="login user-control"> You are not logged in!</div>
</div>
<div class="four columns">
<div class="row collapse topheader-search">
<div class="eight mobile-three columns">
<input type="text" placeholder="Enter search terms" />
</div>
<div class="four mobile-one columns">
<i class="icon-search"></i>Search
</div>
</div>
</div>
</div>
</div>
<div class="container region2wrap">
<div class="row">
<div class="three columns">
<div id="logo">
<img src= "#Url.Content("~/Images/logo.png")" alt="MetaAwareness" title="MetaAwareness" />
</div>
</div>
<div class="nine columns">
<nav class="top-bar">
<ul>
<li class="name"><h1> Please select your page</h1></li>
<li class="toggle-topbar"></li>
</ul>
<nav>
<ul class="right">
<li><a class="active" href="#Url.Action("Index")"><i class="icon-home"></i>Home</a></li>
<li><i class="icon-laptop"></i>Media</li>
<li><i class="icon-tasks"></i>Courses</li>
<li><i class="icon-user"></i>Profile</li>
<li><i class="icon-comments"></i>Contact</li>
</ul>
</nav>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<!--Start of the footer section -->
<footer>
<div class="container region10wrap">
<div class="row footer_bottom">
<div class="six columns">
<p class="copyright">Copyright © 2013 MetaAwareness. All rights reserved.</p>
</div>
<div class="six columns">
<ul class="link-list">
<li>Home</li>
<li>Media</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="Login" class="reveal-modal login-modal">
<h2>Login</h2>
<p>Please login using your credentials recived by email when you register.</p>
<form>
<label>Username</label>
<input type="text" placeholder="" />
<label>Password</label>
<input type="text" placeholder="" />
<p class="right">I forgot my password | Resend activation e-mail</p>
<input type="submit" class="medium button" value="Login!" />
</form>
<a class="close-reveal-modal"><i class="icon-remove"></i></a>
</div>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app.js")"></script>
</footer>
</body>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="container region3wrap">
<div class="mainslider-container responsive">
<div class="mainslider">
<ul>
<li data-transition="slotfade-horizontal" data-slotamount="10" data-thumb= "#Url.Content("~/Images/thumb0.jpg")"> <img src= "#Url.Content("~/Images/thumb0.jpg")"/>
<div class="caption lft"
data-x="80" data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/pic_slider_2_1.png")" />
</div>
<div class="caption lfl"
data-x="40"
data-y="13"
data-speed="900"
data-start="1300"
data-easing="easeOutBack"> <img src= "#Url.Content("~/Images/girl.png")" />
</div>
<div class="caption lft big_white"
data-x="505"
data-y="100"
data-speed="400"
data-start="1700"
data-easing="easeOutExpo">High Value, Comprehensive
</div>
<div class="caption lft big_cyan"
data-x="505"
data-y="144"
data-speed="400"
data-start="1900"
data-easing="easeOutExpo">E-learning Solutions
</div>
<div class="caption lft blue"
data-x="505"
data-y="186"
data-speed="400"
data-start="2100"
data-easing="easeOutBack">Inventore veritatis et quasi architecto <br />
beatae dicta sed ut perspiciatis unde omnis<br />
iste natus laudantium.
</div>
</li>
<li data-transition="boxfade" data-slotamount="7" data-thumb= "#Url.Content("~/Images/thumb5.jpg")"> <img src= "#Url.Content("~/Images/thumb5.jpg")" />
<div class="caption sfb"
data-x="0"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutSine"> <img src= "#Url.Content("~/Images/course-banner2.png")" />
</div>
<div class="caption lfb small_white"
data-x="40"
data-y="90"
data-speed="600"
data-start="1800"
data-easing="easeOutExpo">Kickstart Your
</div>
<div class="caption lfb medium_white"
data-x="40"
data-y="130"
data-speed="600"
data-start="2200"
data-easing="easeOutExpo">E-learning Experience
</div>
<div class="caption lfb large_white"
data-x="40"
data-y="185"
data-speed="600"
data-start="2600"
data-easing="easeOutExpo">TODAY...
</div>
</li>
<li data-transition="curtain-3" data-slotamount="7" data-thumb="#Url.Content("~/Images/thumb2.jpg")"> <img src= "#Url.Content("~/Images/thumb2.jpg")" />
<div class="caption lfl"
data-x="35"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/course-banner4.png")" />
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="70"
data-speed="300"
data-start="1400"
data-easing="easeOutExpo">THE QUICKEST
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="120"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">PATH TO
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="170"
data-speed="300"
data-start="1800"
data-easing="easeOutExpo">E-LEARNING
</div>
<div class="caption lfb big_white"
data-x="660"
data-y="230"
data-speed="300"
data-start="2000"
data-easing="easeOutExpo">SEE MORE
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
I had forgotten to call the JqueryUI bundle and it was causing problems with IE although working with the rest of the top browsers