This is my view file and my controller file
View file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register page</title>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:45px">
<div class="col-md-4 col-md-offset-4">
<h4>Register | Custom Auth</h4><hr>
<form action="{{ route('auth.save') }}" method="post">
#if(Session::get('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
#endif
#if(Session::get('fail'))
<div class="alert alert-danger">
{{ Session::get('fail') }}
</div>
#endif
#csrf
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username here" value="{{ old('username') }}">
<span class="text-danger">#error('username'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter password here">
<span class="text-danger">#error('password'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Phonenumber</label>
<input type="tel" class="form-control" name="phonenumber" placeholder="Enter phonenumber here" value="{{ old('phonenumber') }}">
<span class="text-danger">#error('phonenumber'){{ $message }} #enderror</span>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign up</button>
<br>
I already have an account, sign in
</form>
</div>
</div>
</div>
</body>
</html>
Api file
Route::post('/auth/save', [MainController::class, 'save'])->name('auth.save');
Route::post('/auth/check', [MainController::class, 'check'])->name('auth.check');
Route::get('/auth/logout', [MainController::class, 'logout'])->name('auth.logout');
Route::group(['middleware'=>['AuthCheck']], function(){
Route::get('/auth/login', [MainController::class, 'login'])->name('auth.login');
Route::get('/auth/register', [MainController::class, 'register'])->name('auth.register');
Route::get('/client/dashboard', [MainController::class, 'dashboard']);
});
This is my Rest API and blade file.I have the error Undefined variable: errors, but i cant find where is the problem. Can anyone help me ? I search maybe there is a problem in kernel config, but i everything is fine.*
Related
I am learning VueJS following a course in Udemy, and I have this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/968b5b8bf4.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Nuevo Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name" >Nombre Completo</label>
<input v-model="name" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input v-model="email" type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input v-model="password" type="password" class="form-control" />
</div>
<button #click.prevent="addUser" class="btn btn-primary btn-block">Ingresar Usuario</button>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Actualizar Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Nombre Completo</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<inputt type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" class="form-control" />
</div>
<button #click.prevent="modifyUser" class="btn btn-primary btn-block">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3">
<table class="table table-bordered table-striped">
<thead class="text-center">
<th>#</th>
<th>Nombre Completo</th>
<th>Correo Electrónico</th>
<th>Acciones</th>
</thead>
<tbody>
<tr class="text-center" v-for="(user, index) in users">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<button class="btn btn-success btn-sm">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-danger btn-sm">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and then, my VueJS code:
new Vue({
el: '#app',
data: {
newUser: {
name: '',
email: '',
password: '',
},
users: [],
},
methods: {
addUser () {
var nuevo = {}
nuevo.name = this.newUser.name
nuevo.email = this.newUser.email
nuevo.password = this.newUser.password
this.users.push(nuevo)
this.newUser.name = ''
this.newUser.email = ''
this.newUser.password = ''
},
},
})
As you can see, I am creating a variable to save the data obtained by a form and send it to an array. Then use the v-for to iterate on each of them and have them displayed in a table. But I am getting this error:
vue.js:634 [Vue warn]: Property or method "name" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.
<input v-model="name" type="text" class="form-control" />
should be
<input v-model="newUser.name" type="text" class="form-control" />
as you defined the data as {newUser: {name: ""}}.
do same to your other fields such as email
enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here
'code'
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').formSelect();
$('.datepicker').datepicker();
});
</script>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
#section scripts{
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
}
You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.
I'm playing around with ejs and want to know how to have some todos appear in the html?
This is what i have to work with:
app.get("/", (req, res) => {
db.collection("todoejs")
.find()
.toArray((err, todoejs) => {
res.render("todo");
});
});
app.post("/create-item", (req, res) => {
console.log(req.body);
db.collection("todoejs").insertOne({todo: req.body.item});
res.redirect("/");
});
I have a todo.ejs in my views folder and would like to know how to get the todos to show.
This is what's in the ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 text-center py-1">To-Do App</h1>
<div class="jumbotron p-3 shadow-sm">
<form action="create-item" method="POST">
<div class="d-flex align-items-center">
<input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
<button class="btn btn-primary">Add New Item</button>
</div>
</form>
</div>
<ul class="list-group pb-5">
<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
<span class="item-text"><%= todoejs %></span>
<div>
<button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
<button class="delete-me btn btn-danger btn-sm">Delete</button>
</div>
</li>
</ul>
</div>
</body>
</html>
The second parameter of res.render takes in the variables you want to pass to the template.
In this example, you might want to do res.render("todo", { todoejs: todoejs });
Then todoejs is defined in the template and you can use it however you wish.
I'm trying to display radio buttons horizontally using Bootstrap-CSS and Flask-WTForms. As far as I understand, I need to use the Bootstrap class class_="radio-inline" to accomplish that. I've tried it and all I get is this:
where radio buttons are, discouragingly, organized vertically.
Flask WTForm code:
from flask.ext.wtf import Form
import csv
import os
import buildHome as bh
from wtforms import TextField, RadioField, TextAreaField, SubmitField, validators, BooleanField
class ContactForm(Form):
firstName = TextField("First name", [validators.Required("Please enter your first name.")])
lastName = TextField("Last name", [validators.Required("Please enter your last name.")])
#name = TextField("Name", [validators.Required("Please enter your name.")])
email = TextField("Email", [validators.Required("Please enter your email address."), validators.Email("Please enter your email address.")])
node_1 = BooleanField("Joan Johnson (Buckridge Inc)")
direction_1 = RadioField('', choices=[('Choice1','Choice1'),('Choice2','Choice2'),('Choice3','Choice3')])
freq_1 = RadioField('', choices=[(1,'Daily'),(7,'Weekly'),(30,'Monthly'),(183,'Yearly'),(365,'More')])
submit = SubmitField("Send")
Html template for Flask to create the html code
{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('home') }}" method=post>
{{ form.hidden_tag() }}
<h3>Part I</h3>
<div class="well span6">
<div>
{{ form.firstName.label }} {{ form.firstName }}
</div>
<div>
{{ form.lastName.label }} {{ form.lastName }}
</div>
<div>
{{ form.email.label }} {{ form.email }}
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
{{ form.node_1 (class_="checkbox style-2 pull-left") }} {{ form.node_1.label(class_="col-sm-3 control-label") }}
{{ form.direction_1.label }} {{ form.direction_1 (class_="radio-inline") }}
{{ form.freq_1.label }} {{ form.freq_1 (class_="radio-inline") }}
</div>
{{ form.submit }}{% endblock %}
Html script, produced by the Flask WTForm script above
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">LOGO</h1>
<nav>
<ul class="menu">
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<form action="/" method=post>
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1454454094##65db3f398f17785503e4bf13dfe76ad4879eb792"></div>
<h3>
Part I</h3>
<div class="well span6">
<div>
<label for="firstName">First name</label> <input id="firstName" name="firstName" type="text" value="">
</div>
<div>
<label for="lastName">Last name</label> <input id="lastName" name="lastName" type="text" value="">
</div>
<div>
<label for="email">Email</label> <input id="email" name="email" type="text" value="">
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
<input class="checkbox style-2 pull-left" id="node_1" name="node_1" type="checkbox" value="y"> <label class="col-sm-3 control-label" for="node_1">Joan Johnson (Buckridge Inc)</label>
<label for="direction_1"></label> <ul class="radio-inline" id="direction_1"><li><input id="direction_1-0" name="direction_1" type="radio" value="Choice1"> <label for="direction_1-0">Choice1</label></li><li><input id="direction_1-1" name="direction_1" type="radio" value="Choice2"> <label for="direction_1-1">Choice2</label></li><li><input id="direction_1-2" name="direction_1" type="radio" value="Choice3"> <label for="direction_1-2">Choice3</label></li></ul>
<label for="freq_1"></label> <ul class="radio-inline" id="freq_1"><li><input id="freq_1-0" name="freq_1" type="radio" value="1"> <label for="freq_1-0">Daily</label></li><li><input id="freq_1-1" name="freq_1" type="radio" value="7"> <label for="freq_1-1">Weekly</label></li><li><input id="freq_1-2" name="freq_1" type="radio" value="30"> <label for="freq_1-2">Monthly</label></li><li><input id="freq_1-3" name="freq_1" type="radio" value="183"> <label for="freq_1-3">Yearly</label></li><li><input id="freq_1-4" name="freq_1" type="radio" value="365"> <label for="freq_1-4">More</label></li></ul>
</div>
<input id="submit" name="submit" type="submit" value="Send">
</div>
</body>
</html>
</body>
</html>
I'm probably missing something rather obvious, but can't get my finger on it. Also, it's my first time using Bootstrap or any CSS styling for that matter. So that might be it
In short, What am I doing wrong?
I found a solution!
All I needed to do was to iterate through my radio buttons field while building the html template, like so:
{% for subfield in form.freq_1 %}
<tr>
<td>{{ subfield }}</td>
<td>{{ subfield.label }}</td>
</tr>
{% endfor %}
i have a nested buttons and im trying to add click events on it but it seems not to be working.
this is my object
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
im trying to add click event on id="rpc-eor" button using
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
alert("yay!");
});
but the event wont fire. what is the matter? please help! thanks in advance
I am seeing the console.log output as expected in this demo I ran in Chrome, using jQuery.mobile 1.0b1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div:jqmData(role='page')").live('pageshow',function(){
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
console.log("yay!");
});
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
</div>
</div>
</body>
</html>
Note: there is no document.ready() for jQuery.mobile so if you have wrapped the jQuery in just document.ready() then it might be causing your problem. It is better to bind on $("div:jqmData(role='page')").live('pageshow',...); to guarantee that the page is ready. That said, in this simple case it still works without the .live bind.
Try only the id
$("#rpc-eor").click(function(){
alert("yay!");
});