In my laravel work admin assign roles to users.Assigning is done using checkbox.But when taking already assigned user,checkboxes are not ticked.Tick the checkboxes which are already assigned.
//controller
<?php
namespace App\Http\Controllers\admin;
use Illuminate\Http\Request;
use Session;
use Redirect;
use Response;
use App\Http\Controllers\AdminController;
use App\User;
use App\Area;
use App\Http\Requests\ShopUpdateRequest;
use DB;
use App\Customer;
use App\MyRoles;
use App\Roles;
use Assets;
use Auth;
use Datatables;
class EmployeeController extends AdminController
{
public function assignrole(){
$title = "Prizes";
$post = 0;
$count = 0;
$employees = User::where('employee','yes')->get();
$roles = Roles::select('roles.role_name','roles.id')->get();
return view('app.admin.roles.assignrole', compact('title','post','count','roles','employees'));
}
public function postassignrole(Request $request){
$title = "Prizes";
$post = 0;
$count = 0;
$employee = User::where('id',$request->employee)->pluck('username');//current employee name
$emp_id = $request->employee;//current employee id
$roles = Roles::select('roles.role_name','roles.id')->get();//all links
return view('app.admin.roles.postassignrole',compact('title','post','count','roles','employee','emp_id'));
}
public function saverole(Request $request){
$array = $request->all();//employee id
$emp_id = $array['emp_id'];//after assigning roles gives employee id
$i = 0;
MyRoles::where('user_id',$emp_id)->delete();
foreach($array as $data){
if($i == 0){
}else{
MyRoles::create(
[
'user_id' => $emp_id,
'role_id' => $data
]
);
}
$i++;
}
Session::flash('flash_notification', array('level' => 'success', 'message' => 'customer created successfully'));
return Redirect::action('Admin\EmployeeController#assignrole');
}
}
//view
#extends('app.admin.layouts.default')
{{-- Web site Title --}}
#section('title') {{{ $title }}} :: #parent #stop
#section("styles") #parent
<style>
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
</style>
#stop
{{-- Content --}}
#section('main')
<div class="page-header">
<h3>
Assign roles
</h3>
</div>
<div class="form-group">
<div class="container">
<div class="row">
<label>Assign Roles of <b>{{$employee}} </b></label>
</div>
<div class="row">
<form action="{{url('admin/save-role')}}" method="post">
<input type="hidden" name="emp_id" id="emp_id" value="{{$emp_id}}">
<br/><br/><br/><br/>
<div class="col-sm-12 col-md-10">
<div class="panel panel-default">
<div class="panel-heading">Select Roles</div>
<ul class="list-group">
#foreach($roles as $data)
<li class="list-group-item">
<label><input type="checkbox" id="checkbox{{$data->id}}" name="{{$data->id}}" value="{{$data->id}}">{{$data->role_name}}</label>
</li>
#endforeach
</ul>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-primary">
Assign Roles
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
#section("scripts") #parent
<script src="/js/color.js"></script>
#stop
Use query to fetch the already assigned roles for an employee selected in the previous screen. Then pass it to the view. And in assigning roles, if the role id gets matched mark it as checked.
Related
In my app, I have the right slide bar that contains Vue components that represent system notifications. By default, the right bar is hidden (out of the screen) and when the user opens it the bar is blank(meaning no components displayed). In DevTools, I can see that Vue components weren't rendered
However, if I put the same code from right.blade.php to any normal view then every notification will be displayed.
My assumption so far, the Vue cannot render components in hidden HTML. Am I correct?
Here is the screenshot that demonstrates the presents of PHP code and the absence of Vue component, and the code itself:
right bar screenshot
rightbar.blade.php
<div id="rightbar" class="rightbar">
<div class="mt-2">
<ul class="nav nav-tabs2">
<li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#notifications">Notifications</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#channels">Channels</a></li>
</ul>
<hr>
<div class="tab-content">
<div class="tab-pane show active" id="notifications">
#foreach(auth()->user()->unreadNotifications as $key => $notification)
<p>here</p> //<---------------------------this works
<notification props_id="{{$notification->id}}"
props_route="{{route('item.show',$notification['data']['item']).'#documents'}}"
props_title="New item uploaded"
props_body="User {{$notification['data']['name']}} uploaded {{$notification['data']['item']}}"
props_date="{{$notification->created_at}}">
</notification> //<------------------------- this doesn't works
#endforeach
</div>
<div class="tab-pane" id="channels">
<p>channel 1</p>
<p>channel 2</p>
<p>channel 3</p>
</div>
</div>
</div>
</div>
Notification.vue
<template>
<transition name="slide-fade">
<div class="card" v-show="showNotification" >
<div class="header">
<h2 v-text="title"></h2>
<ul class="header-dropdown dropdown">
<li><i class="fa fa-close"></i></li>
</ul>
</div>
<div style="cursor:pointer" #click="openSubject()">
<div class="card-body">
<p class="card-text" v-text="body"></p>
</div>
<div class="card-footer">
<small class="text-muted" v-text="date"></small>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
props_id: String,
props_route: String,
props_title: String,
props_body: String,
props_date: String,
},
name: "Notification",
data(){
return{
id: this.props_id,
route: this.props_route,
title: this.props_title,
body: this.props_body,
date: this.props_body,
showNotification: true,
}
},
methods:{
openSubject(){
location.href = this.route;
this.markAsRead()
},
markAsRead(){
axios
.put("/notifications/"+this.id)
.then(response => {
this.deleteNotification()
})
.catch(error => console.log(error))
},
deleteNotification(){
this.showNotification = false;
},
},
mounted() {
console.log('Vue notification')
}
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(1000px);
opacity: 0;
}
</style>
app.js
Vue.component('notification', require('./components/Notification.vue').default);
rightbar.scss
.rightbar{
#include box-shadow(0 5px 10px 0px rgba($dark,.3));
#include transition(all .3s ease-in-out);
background: $body-color;
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100vh;
overflow-y: scroll;
z-index: 13;
padding: 8px 20px;
&.open{
right: 0;
}
#include max-screen($break-medium) {
width: 450px;
}
#include max-screen($break-small - 1px) {
width: 340px;
}
.chat_detail{
display: block;
position: relative;
.chat-widget{
height: calc(100vh - 200px);
overflow-y: auto;
}
.input-group{
position: fixed;
bottom: 10px;
width: 460px;
#include max-screen($break-medium) {
width: 410px;
}
#include max-screen($break-small - 1px) {
width: 300px;
}
}
}
}
Your DevTools screenshot shows <notification> instead of the component's rendered elements, indicating that the component is not actually registered.
I would check the component registration in your view.
So the difficulty I have, is that I cannot get an addEventListener for each day in my calender.
I want to add an event listener, so that when the user clicks on it, it displays the plans they have for that day.
Whenever I try to run it, it sometimes gives me an error, and then other times nothing happens. I am aware this has something to do with closures, but I am relatively new to javascript.
I tried querySelectorAll, but that did not work either
window.addEventListener("load", function() {
/*****************************
1. When confirm button clicked, gather information and put it in a data base
2. Reset the planifier
3. Put info in the corresponding date
4. When hovering over a date with a plan, show the plans
5. When the next/previous month button clicked, change the month
7. Reset the plan
6. Update the month UI
7. Add correspond dates and remove last plans from the UI
*****************************/
// UI CONTROLLER
var UIController = (function() {
// Sets all inputs
var DOMStrings = {
calenderMonth: ".calender-month",
confirmButton: ".confirm",
inputDate: ".ask-date",
inputItem1: ".ask-item1",
inputItem2: ".ask-item2",
inputItem3: ".ask-item3",
inputItem4: ".ask-item4",
warningText: ".warning"
}
return {
calenderDefault: function() {
//
var now, currentDay, weekDays, currentWeekDay, calenderRow, months, currentMonth, currentYear, firstDayThisMonth, prevMonth, lastDayOfMonth, lastWeekDayLastMonth;
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
now = new Date();
currentYear = now.getFullYear(); //2020
currentDay = now.getDate();
currentWeekDay = weekDays[now.getDay()];
currentMonth = months[now.getMonth()];
firstDayThisMonth = new Date(now.getFullYear(), now.getMonth(), 1).getDay();
prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
lastWeekDayLastMonth = prevMonth.getDay();
lastDayOfMonth = (new Date(now.getFullYear(), now.getMonth() + 1, 0)).getDate();
// Clears out boxes in the first row that don't belong to the current month as well as adding the correct numbers to the date
function replace(a) {
var i;
for (i = 0; i < 7; i++) {
if (counter > lastDayOfMonth) {
counter++;
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
} else if (counter <= lastDayOfMonth) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
}
}
for (var a = 1; a <= 6; a++) {
var counter;
if (a === 1) {
counter = 1;
for (i = lastWeekDayLastMonth; i >= 0; i--) {
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
}
for (i = lastWeekDayLastMonth + 1; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
} else if (a === 2) {
replace(a);
} else if (a === 3) {
replace(a);
} else if (a === 4) {
replace(a);
} else if (a === 5) {
replace(a);
} else if (a === 6) {
replace(a);
}
}
// This sets the title of the calender AKA the h2
document.querySelector(DOMStrings.calenderMonth).textContent = currentMonth + ", " + currentYear;
// This makes the border of the current day black (or another color if I change it)
if (currentDay < (7 - firstDayThisMonth)) {
calenderRow = 1;
} else if (currentDay < (14 - firstDayThisMonth)) {
calenderRow = 2;
} else if (currentDay < (21 - firstDayThisMonth)) {
calenderRow = 3;
} else if (currentDay < (28 - firstDayThisMonth)) {
calenderRow = 4;
} else if (currentDay < (35 - firstDayThisMonth)) {
calenderRow = 5;
} else {
calenderRow = 6;
}
document.getElementById(calenderRow + "-" + currentWeekDay).style.borderColor = "black";
},
resetValues: function() {
//reset values
document.querySelector(DOMStrings.inputDate).value = "";
document.querySelector(DOMStrings.inputItem1).value = "";
document.querySelector(DOMStrings.inputItem2).value = "";
document.querySelector(DOMStrings.inputItem3).value = "";
document.querySelector(DOMStrings.inputItem4).value = "";
//clear the warning
document.querySelector(DOMStrings.warningText).textContent = "";
},
getValues: function() {
return {
date: document.querySelector(DOMStrings.inputDate).value,
item1: document.querySelector(DOMStrings.inputItem1).value,
item2: document.querySelector(DOMStrings.inputItem2).value,
item3: document.querySelector(DOMStrings.inputItem3).value,
item4: document.querySelector(DOMStrings.inputItem4).value,
}
},
getDOMStrings: function() {
return DOMStrings;
}
};
})();
// DATA CONTROLLER
var dataController = (function() {
return {
data: {
plans: [],
}
};
})();
// APP CONTROLLER
var appController = (function(UICtrl, DATACtrl) {
var DOM;
var setUpEventListeners = function() {
var weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
DOM = UICtrl.getDOMStrings();
// If confirm button clicked, do this
document.querySelector(DOM.confirmButton).addEventListener("click", planify);
document.getElementById("1-Monday").addEventListener("click", showPlans);
// STACK OVERFLOW USERS HERE
for (var a = 1; a < 7; a++) {
for (var i = 0; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).addEventListener("click", showPlans);
}
}
};
var checkInput = function(input) {
if (input.date === "") {
document.querySelector(DOM.warningText).textContent = "Please put a date";
} else if (input.item1 === "" && input.item2 === "" && input.item3 === "" && input.item4 === "") {
document.querySelector(DOM.warningText).textContent = "Please put atleast one, ONE ITEM. thank you :)";
} else if (input.item1 == false) {
document.querySelector(DOM.warningText).textContent = "You couldn't be normal and just put it in the first slot ey?";
} else {
// store values in data
DATACtrl.data.plans.push(input);
console.log(DATACtrl.data.plans);
// reset the values
UICtrl.resetValues();
}
};
var planify = function(event) {
var input;
//get values
input = UICtrl.getValues();
// check if values are in the input
checkInput(input);
//put values on UI
// 1. put icon to show it is there
// 2. when clicked, it shows the box with the values
};
var showPlans = function() {
DATACtrl.data.plans.push("asdadasda");
console.log(DATACtrl.data.plans);
}
return {
init: function() {
// 1. Set calender month and year to current time
UIController.calenderDefault();
// 2. Set up event listeners
setUpEventListeners();
}
};
})(UIController, dataController);
appController.init();
});
* {
font-family: "Helvetica", "arial";
}
body {
margin: 0;
background-color: #1f1f60;
}
div {
margin: 0;
}
/* Top panel with mountains image*/
.panel {
background: url(mountains.jpg);
box-shadow: 0px 0px 10px 1px black;
height: 400px;
width: 100%;
background-position: 10% 40%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: center;
margin: 10
}
.boxes {
display: inline-block;
position: relative;
top: 100px;
}
.container {
text-align: center;
}
/* Left box in .panel */
.left-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background-color: white;
width: auto;
padding: 26px 25px 26px 25px;
border-radius: 15px;
vertical-align: bottom;
margin: 0 5px 0 5px;
}
.statisticsTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.information-plans {
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
color: white;
}
.totalPlans {
padding: 5px;
}
.totalPlans-title {
display: inline-block;
}
.totalPlans-output {
display: inline-block;
}
.completedPlans {
padding: 5px;
}
.completedPlans-title {
display: inline-block;
}
.completedPlans-output {
display: inline-block;
}
/* Right box in .panel */
.right-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background: white;
width: auto;
padding: 25px;
border-radius: 15px;
margin: 0 5px 0 5px;
}
.information-all {
z-index: 5;
}
.planifierTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.inputFields {}
.ask {
color: white;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
display: inline-block;
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
vertical-align: top;
}
input {
padding: 3px 2px 3px 2px;
display: block;
width: 125px;
border: 1px solid white;
border-radius: 7px;
height: 20px;
margin-top: 10px;
}
.btn-confirm {
display: inline-block;
border: 1px solid #00ff99;
border-radius: 11.5px;
}
.confirm {
color: white;
height: 88px;
width: 153px;
border: 1px solid #00ff99;
border-radius: 10px;
font-size: 25px;
background-color: #00ff99;
}
button:hover {
cursor: pointer;
}
.warning {
position: absolute;
color: red;
font-size: 14px;
}
.planPresenter {
position: relative;
display: inline-block;
vertical-align: center;
box-shadow: 0px 0px 10px 1px black;
padding: 0 0 50px 0;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
top: -30px;
width: 1010px;
height: auto;
text-align: center;
border: 1px solid #ff3333;
border-radius: 10px;
margin: 10px;
z-index: -1;
}
.calender-box {
display: inline-block;
margin: 30px 20px 20px 20px;
}
.calender-row {
margin: 0;
padding: ;
}
.calender-day {
vertical-align: top;
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid white;
background: white;
margin: 2px 0 2px 0;
padding: 8px;
border-radius: 2px;
}
.calender-week {
height: 20px;
text-align: center;
vertical-align: center;
}
.pastMonth {
position: absolute;
top: 440px;
left: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0);
border: 0px;
}
.nextMonth {
position: absolute;
display: inline-block;
background-color: rgba(255, 255, 255, 0);
border: 0px;
top: 440px;
right: 10px;
}
.current-day {
background: #ff4d4d;
}
.planList-box {
width: 400px;
margin: 10px;
vertical-align: top;
border: 0px;
border-radius: 10px;
background: white;
display: inline-block;
position: relative;
top: -70px;
padding: 20px;
padding-top: 60px;
z-index: -1;
height: 904.31px;
box-shadow: 0px 0px 10px 1px black;
}
.planList-title {}
.planList-items {}
.planList-item {
border: 0px solid white;
border-radius: 4px;
text-align: left;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 5px 10px 5px 10px;
margin: 10px;
max-width: 100%;
}
.planList-box::-webkit-scrollbar {
width: 10px;
margin-right: 10px;
}
.planList-box::-webkit-scrollbar-track {
margin: 20px 10px 20px 0px;
padding: 10px;
}
.planList-box::-webkit-scrollbar-thumb {
background: #1f1f60;
border: 0px;
border-radius: 5px;
width: 12px;
}
.planList-box::-webkit-scrollbar-thumb:hover {
background: #13133a;
}
<!doctype html>
<html lang="en">
<head>
<title>Daily Planning Tool</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
<div class="panel">
<div class="boxes">
<div class="left-box">
<div class="information-all">
<div class="statisticsTitle">Statistics</div>
<div class="information-plans">
<div class="totalPlans">
<div class="totalPlans-output">%12%</div>
<div class="totalPlans-title">total plans</div>
</div>
<div class="completedPlans">
<div class="completedPlans-output">%22%</div>
<div class="completedPlans-title">completed plans</div>
</div>
</div>
</div>
</div>
<div class="right-box">
<div class="information-all">
<div class="planifierTitle">Planifier</div>
<div class="inputFields">
<div class="ask">Select Date<input class="ask-date" type="date"></div>
<div class="ask">Item 1<input class="ask-item1" type="text" placeholder="e.g. Math"></div>
<div class="ask">Item 2<input class="ask-item2" type="text" placeholder="e.g. Science"></div>
<div class="ask">Item 3<input class="ask-item3" type="text" placeholder="e.g. English"></div>
<div class="ask">Item 4<input class="ask-item4" type="text" placeholder="e.g. Art"></div>
<div class="btn-confirm"><button class="confirm">confirm</button></div>
<div class="warning"></div>
</div>
</div>
</div>
</div>
</div>
<div class="planPresenter">
<button class="pastMonth"><i class="fa fa-chevron-left" style="font-size: 50px; color: white;"></i></button>
<div class="calenderID" id="calender-0">
<div class="calender-box">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
<div class="calender-row">
<div class="calender-day" id="6-Sunday">29</div>
<div class="calender-day" id="6-Monday">30</div>
<div class="calender-day" id="6-Tuesday">31</div>
<div class="calender-day" id="6-Wednesday">NaN</div>
<div class="calender-day" id="6-Thursday">NaN</div>
<div class="calender-day" id="6-Friday">NaN</div>
<div class="calender-day" id="6-Saturday">NaN</div>
</div>
</div>
</div>
<!--
<div class="calender-box" id="calender-2">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
</div>
-->
<button class="nextMonth"><i class="fa fa-chevron-right" style="font-size: 50px; color: white;"></i></button>
</div>
<div class="planList-box">
<div class="planID" id="plan-0">
<h3 class="planList-title">%month% %day%</h3>
<div class="planList-items">
<div class="planList-item1 planList-item">• Do this and that</div>
<div class="planList-item2 planList-item">• do this and that plus it and at</div>
<div class="planList-item3 planList-item">• so you're a hacker ey?, add discord</div>
<div class="planList-item4 planList-item">• my discord is JinXz#1643 I wanna have a talk, because this is not right, and you know that</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</body>
</html>
answer: I just figured out that this is not working, because I set the z-index of the element to -1, making it go under the .container layer.
I want to load this login page as shown below on the front page of my website when a login button is clicked and I don't want to use wp_login_form() because I want to load the social login icons that the plugin loads on the wp-login.php page.
I know it can be done using Ajax and I'm not able to achieve it because of my unfamiliarity with the language. Any help on how WordPress loads the wp-login.php page as shown in the image below?
This is not trivial, and you are right, you'll need to use AJAX for this.
I'll first add the files and code in them and then try to explain as I go.
header.php
This can obviously be different for you, but you'll need to see the structure. You can remove the registration part if you want.
<header id="main_header" class="clearfix">
<div class="top_bar">
<div class="container">
<div class="ajax_login">
<form id="login" action="login" method="post">
<h1><?php esc_attr_e('User login','yourtheme') ?></h1>
<p class="status"></p>
<input id="username" type="text" name="username" placeholder="<?php esc_attr_e('Username','yourtheme') ?>">
<input id="password" type="password" name="password" placeholder="<?php esc_attr_e('Password','yourtheme') ?>">
<div class="forgotten_box">
<a class="lost" href="<?php echo esc_url(wp_lostpassword_url()); ?>"><?php esc_attr_e('Lost your password?','yourtheme') ?></a>
</div>
<input class="submit_button" type="submit" value="Login" name="submit">
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
<div class="ajax_login_overlay"></div>
<?php if (is_user_logged_in()):?>
<a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>"><?php esc_attr_e('Logout','yourtheme') ?></a>
<?php else: ?>
<a class="login_button" id="show_login" href=""><?php esc_attr_e('Login','yourtheme') ?></a>
<?php endif; ?>
</div>
<?php if (!is_user_logged_in()):?>
<div class="register">
<a class="lost" href="<?php echo esc_url(wp_registration_url()); ?>" id="show_register"><?php esc_attr_e('Register','yourtheme') ?></a>
<form method="post" name="st-register-form" id="register_form">
<h2 class="register-heading"><?php esc_html_e( 'Register', 'yourtheme' ); ?></h2>
<div id="registration-error-message">
</div>
<div class="field">
<input type="text" autocomplete="off" name="username" id="yourtheme_register-username" placeholder="<?php esc_html_e( 'Username', 'yourtheme' ); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="mail" id="yourtheme_register-email" placeholder="<?php esc_html_e( 'Email', 'yourtheme' ); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="fname" id="yourtheme_register-fname" placeholder="<?php esc_html_e( 'First Name', 'yourtheme' ); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="lname" id="yourtheme_register-lname" placeholder="<?php esc_html_e( 'Last Name', 'yourtheme' ); ?>" />
</div>
<div class="frm-button">
<input type="button" id="register-me" value="Register" />
</div>
</form>
</div>
<?php endif; ?>
</div>
</div>
</header>
Basically a form that you'll submit with AJAX. Nothing special there.
css to go with that (unfinished, and you'll want to change it to something that suits you)
/*------------------------ AJAX login -------------------------*/
.top_bar{
text-align: right;
}
.top_bar .ajax_login{
display: inline-block;
margin-right: 10px;
}
.top_bar .ajax_login_overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.5);
display: none;
cursor: default;
z-index: 101;
transform: translateZ(1px);
}
.top_bar .ajax_login form#login{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .ajax_login form#login h1{
color: #656565;
background: #eee;
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
padding: 2px 20px;
text-align: left;
}
.top_bar .ajax_login form#login p.status{
display: none;
padding: 0 20px;
margin-bottom: 12px;
}
.top_bar .ajax_login form#login input#username,
.top_bar .ajax_login form#login input#password{
margin: 10px 20px;
width: 400px;
display: block;
}
.top_bar .ajax_login form#login .forgotten_box{
display: inline-block;
padding: 3px 20px 0 20px;
}
.top_bar .ajax_login form#login .forgotten_box .lost{
display: block;
padding: 5px;
padding-left: 0;
margin-bottom: 0;
}
.top_bar .ajax_login form#login input.submit_button{
padding: 15px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
margin-right: 20px;
float: right;
cursor: pointer;
-webkit-transition: all 180ms ease-in;
-moz-transition: all 180ms ease-in;
-o-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
.top_bar .ajax_login .login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}
.top_bar .ajax_login .login_button,
.top_bar .register a{
display: inline-block;
color: #0c0f0b;
font-size: 12px;
font-weight: 700;
line-height: 30px;
}
.top_bar .ajax_login .login_button:hover{
color: #d84949;
}
.top_bar .register{
display: inline-block;
}
/*------------------------ AJAX register -------------------------*/
.top_bar .register #register_form{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .register #register_form input[type="text"]{
margin: 10px 20px;
width: 400px;
display: block;
background: #f2f2f2;
border: 0;
font-family: 'Roboto', sans-serif;
color: rgb(115, 115, 115);
color: rgba(115, 115, 115, 0.5);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
font-style: italic;
}
.top_bar .register #register_form .register-heading{
background: #be0017;
font-family: Arial;
color: #ffffff;
font-size: 16px;
line-height: 12px;
font-weight: 700;
letter-spacing: 0.64px;
text-align: left;
padding:15px 20px;
text-transform:uppercase;
}
functions.php
You can add this in functions.php or in a separate file you include in your functions.php file. It's the AJAX callback functions, localization for your admin-ajax.php etc.
<?php
/********* AJAX Login ***********/
function yourtheme_ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery') );
wp_enqueue_script('ajax-login-script');
wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url(),
'loadingmessage' => esc_html__('Sending user info, please wait...', 'yourtheme')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'yourtheme_ajax_login_init');
}
if (!function_exists('ajax_login')) {
function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Nonce is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signon = wp_signon( $info, false );
if ( is_wp_error($user_signon) ){
echo json_encode(array('loggedin'=>false, 'message'=> esc_html__('Wrong username or password.', 'yourtheme')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=> esc_html__('Login successful, redirecting...', 'yourtheme')));
}
die();
}
}
/********* AJAX Registration ***********/
add_action( 'wp_ajax_register_action', 'yourtheme_handle_registration' );
add_action( 'wp_ajax_nopriv_register_action', 'yourtheme_handle_registration' );
if (!function_exists('yourtheme_handle_registration')) {
function yourtheme_handle_registration(){
if( $_POST['action'] == 'register_action' ) {
$error = '';
$uname = trim( $_POST['username'] );
$email = trim( $_POST['mail_id'] );
$fname = trim( $_POST['firname'] );
$lname = trim( $_POST['lasname'] );
if( empty( $_POST['username'] ) )
$error .= '<p class="error">'.esc_html__('Enter username', 'yourtheme').'</p>';
if( empty( $_POST['mail_id'] ) )
$error .= '<p class="error">'.esc_html_('Enter email', 'yourtheme').'</p>';
elseif( !filter_var($email, FILTER_VALIDATE_EMAIL) )
$error .= '<p class="error">'.esc_html__('Enter valid email', 'yourtheme').'</p>';
if( empty( $_POST['firname'] ) )
$error .= '<p class="error">'.esc_html__('Enter first name', 'yourtheme').'</p>';
elseif( !preg_match("/^[a-zA-Z'-]+$/",$fname) )
$error .= '<p class="error">'.esc_html__('Enter valid first name', 'yourtheme').'</p>';
if( empty( $_POST['lasname'] ) )
$error .= '<p class="error">'.esc_html__('Enter last name', 'yourtheme').'</p>';
elseif( !preg_match("/^[a-zA-Z'-]+$/",$lname) )
$error .= '<p class="error">'.esc_html__('Enter valid last name', 'yourtheme').'</p>';
if( empty( $error ) ){
$status = wp_create_user( $uname, $email );
if( is_wp_error($status) ){
$msg = '';
foreach( $status->errors as $key=>$val ){
foreach( $val as $k=>$v ){
$msg = '<p class="error">'.$v.'</p>';
}
}
echo $msg;
} else{
$msg = '<p class="success">'.esc_html__('Registration successful!', 'yourtheme').'</p>';
echo $msg;
}
} else{
echo $error;
}
die(1);
}
}
}
add_action( 'user_register', 'yourtheme_register_user_metadata' );
add_action( 'profile_update', 'yourtheme_register_user_metadata' );
if (!function_exists('yourtheme_register_user_metadata')) {
function yourtheme_register_user_metadata( $user_id ){
if( !empty( $_POST['firname'] ) && !empty( $_POST['lasname'] ) && !empty( $_POST['username'] ) && !empty( $_POST['mail_id'] ) ){
update_user_meta( $user_id, 'first_name', trim($_POST['firname']) );
update_user_meta( $user_id, 'last_name', trim($_POST['lasname']) );
update_user_meta( $user_id, 'username', trim($_POST['username']) );
update_user_meta( $user_id, 'mail_id', trim($_POST['mail_id']) );
}
update_user_meta( $user_id, 'show_admin_bar_front', false );
}
}
ajax-login-script.js
Actual AJAX call and showing and hiding login box on click.
jQuery(document).ready(function($) {
"use strict";
// Show the login dialog box on click
$('a#show_login').on('click', function(e){
$('.ajax_login_overlay').fadeIn(500);
$('form#login').fadeIn(500);
e.preventDefault();
});
$('.ajax_login_overlay').on('click', function(e){
$('form#login').fadeOut(500);
$('.ajax_login_overlay').fadeOut(500);
$('form#register_form').hide();
$('.ajax_login .status').html('');
$('#registration-error-message').html('');
$('form#login').hide();
$('form#register_form .field input').val('');
});
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin === true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
//Register
$('a#show_register').on('click', function(e){
$('.ajax_login_overlay').fadeIn(500);
$('form#register_form').fadeIn(500);
e.preventDefault();
});
$(document).on('click', '#register-me', function(){
var action = 'register_action';
var username = $("#yourtheme_register-username").val();
var mail_id = $("#yourtheme_register-email").val();
var firname = $("#yourtheme_register-fname").val();
var lasname = $("#yourtheme_register-lname").val();
var ajaxdata = {
action: 'register_action',
username: username,
mail_id: mail_id,
firname: firname,
lasname: lasname,
};
$.post( ajax_login_object.ajaxurl, ajaxdata, function(res){
$("#registration-error-message").html(res);
});
});
});
Now, I tested this, and it works, but it needs some more tests/validation checks and especially security when you are creating a user and logging in (sanitization etc.). It's not 100% my code, I found bunch of it on line, and mashed it up into one. Still needs refinement imo.
Hope this helps, I plan on writing a complete tutorial regarding this once I find the time :)
The validation is currently happening correctly.The only issue is that I would like to show the error message in the tooltip only and not through a span next to the input element. How do I hide the default display?
My CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 710px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
My HTML:
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required style="width: 200px;" />
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
My JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
var validator = $("#tickets").kendoValidator({
rules: {
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
$("form").submit(function (event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
Why not use css? Just add this rule to your styles
.k-widget.k-tooltip-validation {
display: none !important;
}
I m trying to view my template but not showing my view, if i set the action blank then it show the view if i set controller/function in action it hide the view, it hides the text boxes and button from view, controller and function which i m using in action is exists. what can be the problem with it, can any body help me out.
my controller:
<?php
class post_job extends CI_Controller {
function __construct() {
parent::__construct();
// Post New Job
function create_new_job() {
$this->data['page_heading'] = 'Post New Job';
$this->data['heading'] = 'Post New Job';
$this->load->model('post_job');
$this->form_validation->set_rules('job_title', 'Job Title', 'trim|required|xss_clean');
$this->form_validation->set_rules('job_desc', 'Job Description', 'trim|required|xss_clean');
$this->form_validation->set_rules('job_type', 'Job Type', 'trim|required|xss_clean');
$this->form_validation->set_rules('salary', 'Salary', 'trim|required|xss_clean');
$this->form_validation->set_rules('location', 'Location', 'trim|required|xss_clean');
if ($this->form_validation->run() == FALSE) {
$this->data['content'] = 'post_job';
$this->load->view('post_job', $this->data);
} else {
$this->post_job->create_new_account();
}
}
}
}
?>
my model :
class post_job extends CI_Model {
public $job_table = 'job_post';
function create_new_account() {
$data = array(
"job_title" => $this->input->post("job_title"),
"job_description" => $this->input->post("job_desc"),
"job_type" => $this->input->post("job_type"),
"salary" => $this->input->post("salary"),
"location" => $this->input->post("location"),
);
$this->db->insert("job_post", $data);
}
function get_userType($user_id) {
$this->db->select("id, type ")->from("user_type");
return $this->db->get();
}
}
?>
my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Post Job</title>
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#body{
margin: 0 15px 0 15px;
}
p.footer{
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container{
margin: 10px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: 0 0 8px #D0D0D0;
}
</style>
</head>
<body>
<div id="container">
<h1>Post Job</h1>
<div id="body">
<form method="post" action="<?php echo base_url('post_job/create_new_job'); ?>" id="JobForm">
<label >Job Category </label>
<input id="jobcat" name="job_cat" type="text" />
<br>
<label>Job Description </label>
<input id="jobdesc" name="job_desc" type="text" />
<br>
<label >Job Type </label>
<input id="jobtype" name="job_type" type="text" />
<br>
<label>Salary </label>
<input id="salary" name="salary" type="text" />
<br>
<label>Location </label>
<input id="location" name="location" type="text" />
<br>
<label>Start Date </label>
<input id="startdate" name="start_date" type="text" />
<br>
<label>End Date </label>
<input id="enddate" name="end_date" type="text" />
<br>
<input type="button" name="save" value="Post Job" />
<br>
</form>
</div>
</div>
</div>
</body>
</html>
Your controller,
<?php
class post_job extends CI_Controller {
// Post New Job
function create_new_job()
{
$data['page_heading'] = 'Post New Job';
$data['heading'] = 'Post New Job';
$this->load->model('post_job');
$this->form_validation->set_rules('job_title', 'Job Title', 'trim|required|xss_clean');
$this->form_validation->set_rules('job_desc', 'Job Description', 'trim|required|xss_clean');
$this->form_validation->set_rules('job_type', 'Job Type', 'trim|required|xss_clean');
$this->form_validation->set_rules('salary', 'Salary', 'trim|required|xss_clean');
$this->form_validation->set_rules('location', 'Location', 'trim|required|xss_clean');
if ($this->form_validation->run() == FALSE) {
$data['content'] = 'post_job';
$this->load->view('post_job', $data);
} else {
$this->post_job->create_new_account();
}
}
}
?>