Im having trouble making this. I've never used PHP or Jquery before. I've tried various PHP codes and jquery codes from the internet but none seem to work for me. The latest I tried looks like this:
<?php
$from = 'SC contact form <test#test.com>';
$sendTo = 'SC contact form <test#test.com>';
$subject = 'Nieuw bericht van SC'
$fields = array('name' => 'Name', 'surname' => 'Surname', 'email' => 'Email', 'message' => 'Message');
$okMessage = 'Bericht met succes verzonden! Wij nemen zo spoedig mogelijk contact met u op.'
$errorMessage = 'Iets ging fout, probeer het nog een keer.'
error_reporting(E_ALL & ~E_NOTICA);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
$emailText = "You have a new message from your contact form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['Message'];
}
And this is my Jquery:
$(function(){
$('#contact-form').validator();
$('#contact-form').on('submit', function (e){
if (!e.isDefaultPrevented()){
var url = "contact.php";
$.ajax({
type: "POST"
url: url,
data: $(this).serialize(),
succes: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText){
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
This is my html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SeetCuvers - vliegtuig stoel hoezen</title>
<link href="./style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="mail.js"></script>
<script src="spinner.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#contactbtn{
display: block;
margin: 27px auto;
}
</style>
<body>
<div class="bg-image img1" style="opacity: 0.25;"></div>
<div class="container">
<div class="row">
<div><img class="img-fluid mx-auto d-block" id="logo" src="./SC.jpg" alt="SeetCuvers logo"/></div>
</div>
</div>
<a href="#down"><svg class="bi bi-arrow-down-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z"/>
</svg></a>
<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
<a class="navbar-brand" href="#">
<img src="./SCjpg" alt="logo" style="width:40px;">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index2.html">SC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
</li>
</ul>
</nav>
<div class="container" id="down">
<div class="row">
<div class="col-sm-6">
<p><blockquote>
<dl class="lijst_1">
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text!</dd>
</dl>
</blockquote>
</div>
<div class="col-sm-3">
<img id="stoel" src="./Seet Cuvers.png">
</div>
</div>
</p>
</div>
</div>
<button id="contactbtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#contactModal"><span onclick="spinFunction()" id="spinner" class="spinner-border spinner-border-sm" style = "display: none;"></span>Contact ons</button>
<div class="modal fade" id="contactModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact formulier</h4>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<form method="post" action="mailhandler.php" id="contact-form" role="form">
<div class="form-group">
<label for="form_name">Voornaam *</label>
<input type="form_name" class="form-control" placeholder="Voornaam" id="name" required="required" data-error="Voornaam is verplicht">
<div class="help-block with-errors"></div>
</div>
<div class="from-group">
<label for="form_lastname">Achternaam *</label>
<input type="form_lastname" type="text" name="surname" class="form-control" placeholder="Achternaam" required="required" data-error="Achternaam is verplicht">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email"> Email address *</label>
<input type="form_email" class="form-control" placeholder="Email" id="email" required="required" data-error="Voer aub een geldig email-adress in">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_message">Bericht *</label>
<textarea class="form-control" rows="5" id="form_message" placeholder="Bericht" required="required" data-error="Laat aub een bericht achter"></textarea>
<div class="help-block with-errors"></div>
</div>
Sample text <br>
Sample text <br>
Sample text <br>
Sample text <br><br>
Sample text <br> <br>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-send" value="Send message">Verzend</button>
</div>
<div class="succes_msg" style="width: 100%; height: 100%; display: none;"><h3>Succes! We nemen zo spoedig mogelijk contact met u op</h3></div>
<div class="error_msg" style="width: 100%; height: 100%; display: none;"><h3>Er ging iets mis, probeer het later opnieuw.</h3></div>
</div>
</div>
</div>
However when I run this on the website I get an error. It says there is an error on line 8 of the php file. I am completely at a loss.
Also what would be a good place to learn more PHP and Jquery (and maybe some sql)
You need to include semicolons at the end of each line:
$subject = 'Nieuw bericht van SC' <--- Here
$fields = array('name' => 'Name', 'surname' => 'Surname', 'email' => 'Email', 'message' => 'Message');
$okMessage = 'Bericht met succes verzonden! Wij nemen zo spoedig mogelijk contact met u op.' <--- Here
$errorMessage = 'Iets ging fout, probeer het nog een keer.' <--- Here
Otherwise it thinks the next line is a continuation of the last.
Related
I have implemented Pagination and Search in AngularJS but its working in only on displayed page.
Html file
<div id="home" class="tab-pane fade in active">
<div class="row"><div class="col-md-10"><h1 style="font-size: 25px;margin-bottom:26px;">Jobs</h1></div></div>
<div class="row">
<div class="col-md-0"></div>
<div class="col-md-10" style="margin-top:5px">
<div class="container">
<li style="list-style-type: none;display: inline-block;width: 85%;"> <form name="myForm" action="/action_page.php" method="get" class="adjust" style="margin-left:-26px;margin-top:2px;">
<input type="text" name="Keyword" placeholder="Keyword" class="borderclr" ng-model='search.jobTitle' style="border: 1px solid #ddd;padding: 10px;width: 48%;margin-left:5px;">
<input type="text" name="Location" placeholder="Location"class="borderclr" ng-model='search.location' style="border: 1px solid #ddd;padding: 10px;width: 50%;">
</form>
</li>
<li style="list-style-type: none;display: inline-block;">
<i class="fa fa-plus" title="Add Job" ng-click="openJobModal('add')" data-toggle="modal" data-target="#jobDetails"
style="margin-top: 33px; color: rgb(237,78,110);cursor: pointer;font-size: 22px;margin-left: -140px;outline:none;"></i>
</li>
</div>
<div class= row>
<div class="col-md-10"></div>
<div class="col-md-2"></div>
</div>
<div ng-repeat="Job in JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter:search:strict">
<!-- <p style="font-size: 13px;color: #808080;padding: 18px;margin-left: 49px;">Found 395 Jobs</p> -->
<h3 style="font-size: 18px;color: #000;font-weight: 600;margin-top: 2px;margin-left: -4px;text-align:left;margin-bottom: -7px;">
Title : {{Job.jobTitle}}</h3>
<div class="row" style="margin-left:1px;">
<div class="col-md-8" style="margin-left: -16px;margin-top:6px"> <b> {{Job.location}} | {{Job.jobRate}} | {{Job.jobType}}</b></div>
<div class="col-md-1"><i class="fa fa-eye" title="View Job" ng-click="Jobview(Job.SerialNumber)" data-toggle="modal" data-target="#jobDetails" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-1"><i class="fa fa-trash" title="Delete Job" ng-click="JobDelete(Job.SerialNumber,Job.Publish)" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-2"><button style="padding: 6px 22px;" ng-click="jobPublish('true',Job.SerialNumber)" type="button" ng-hide="{{Job.Publish}}" class="btn btn-success">Publish</button>
<button type="button" ng-click="jobPublish('false',Job.SerialNumber)" ng-show="{{Job.Publish}}" class="btn btn-warning">UnPublish</button>
</div>
</div>
<p style=" text-align: justify;text-justify: inter-word;">
<b>Description :</b>{{Job.jobDescription | limitTo: 400 }}{{Job.jobDescription.length > 400 ? '...' : ''}}</p>
<hr>
</div>
</div>
</div>
<div ng-show="JobDetails !=''" style="text-align: right;">
<pagination total-items="JobDetails.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
</div>
</div>
Script
$scope.JobDetails = [];
for(var i=response.data.length-1;i>=0;i--){
$scope.JobDetails.push(response.data[i]);
}
$scope.viewby = 5;
$scope.totalItems = $scope.JobDetails.length;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = 7; //Number of pager buttons to show
When i use search box and search , the results are only for that page . If we remove the pagination the search is working fine.
Can some one please help.
your search filter is applied to currant page items only therefore you get only filtered item that exist in this page.
you can do the following to solve the problem:
<div ng-repeat="Job in currentJobDetails | filter:search:strict">
in your pageChanged() function you can add:
function pageChanged(){
currentJobDetails = JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage));
}
you may also need to add search button and call function when is clicked:
function search(){
currentJobDetails = JobDetails;
}
this will search across all your items
I'm trying to find the right syntax to push a newly added item after it has been http.posted .
The syntax below doesn't give me any error, but doesn't push properly neither. Any ideas would help
$scope.insertAppointmentReminderEntry = function() {
$scope.add_reminder_time = this.add_reminder_time;
$scope.add_reminder_timeunit = this.add_reminder_timeunit;
$scope.add_delivery_method = this.add_delivery_method;
$scope.add_delivery_contact = this.add_delivery_contact;
var data = {
group_id : $scope.groupid,
appointment_id : $scope.appointmentid,
reminder_time : $scope.add_reminder_time,
reminder_timeunit : $scope.add_reminder_timeunit,
delivery_method : $scope.add_delivery_method,
delivery_contact : $scope.add_delivery_contact
};
$http.post(urlApiAppointmentReminders + $scope.groupid, data).success(function(data, status) {
var newItemNo = $scope.appointmentreminders.length+1;
$scope.appointmentreminders.push($scope.appointmentreminders[newItemNo].data);
})
modalInstance.close();
};
html
<div ng-repeat="x in appointmentreminders" class="row" ng-style="{ 'border-top' : ( x.delivery_method != appointmentreminders[$index-1].delivery_method && $index != 0 ? '1pt solid #eee' : '0pt solid #eee' )}" style="border-top:1pt solid #eee; padding: 0.25em 0 0.25em 0" >
<div class="col-md-offset-1 col-md-4">
#{{x.time}} #{{x.timeunit}}#{{x.time > 1 ? 's' : ''}} prior to appointment
</div>
<div class="col-md-4">
Reminder: #{{x.delivery_contact}}
</div>
<div class="col-md-2">
<!-- delete this reminder -->
<a class="btn btn-xs btn-warning pull-right glyphicon glyphicon-trash" ng-click="ctrl.removeItem($index)"></a>
</div>
</div> <!-- ng-repeat -->
html (modal to add new reminder)
<script type="text/ng-template" id="addScheduleModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add a new appointment reminder</h3>
</div>
<div class="modal-body">
<div class="row" style="padding: 0.5em 0 0.5em 0.5em">
<div class="col-sm-4" >
{!! Form::text( 'reminder_time', '30', ['class' => 'form-control', 'placeholder' => '', 'ng-model' => 'add_reminder_time']) !!}
</div>
<div class="col-sm-8" >
{!! Form::select('reminder_timeunit', ['minute' => 'minutes(s)', 'hour' => 'hour(s)', 'day' => 'day(s)', 'week' => 'week(s)', 'month' => 'month(s)'], null, ['class' => 'form-control', 'ng-model' => 'add_reminder_timeunit']) !!}
</div>
</div>
<div class="row" style="padding: 0.5em 0 0.5em 0.5em">
<div class="col-sm-4" >
{!! Form::select('delivery_method', ['eml' => 'Email'], null, ['class' => 'form-control', 'ng-model' => 'add_delivery_method']) !!}
</div>
<div class="col-sm-8" >
{!! Form::text('delivery_contact', null, ['class' => 'form-control', 'placeholder' => 'Your email address', 'ng-model' => 'add_delivery_contact']) !!}
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="insertAppointmentReminderEntry()">Save</button>
<button class="btn btn-primary" ng-click="$close()">Close</button>
</div>
</script>
This should be sufficient $scope.appointmentreminders.push(data)
or if you want to put the new data in specific position in the array, then do this
$scope.appointmentreminders[newItemNo] = data
But do not combine them in one line :)
I'm trying to display a date selected by bootstrap calendar date but I don't see the value of the date selected. Date is displaying correctly when I choose edit option to update it into the item list but If I change the date though the calendar that is not being updated after tag "Vigencia Desde Updated".
I appreciate any help on that.
app.js
angular.module('mainApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('mainApp').controller('NotificacionController', function($scope) {
$(document).ready(function(){
$('.input-group.date').datetimepicker({
locale: 'es',
});
});
var self = this;
self.notificacion = {
id: null,
vigenciaDesde: null,
vigenciaHasta: null,
cuotas: "",
marca: ""
}
self.notificaciones = [
{
id: 1,
vigenciaDesde: new Date(2016, 9, 1),
vigenciaHasta: new Date(2016, 9, 8),
cuotas: "3 cuotas",
marca: "Nike"
}, {
id: 2,
vigenciaDesde: new Date(2016, 10, 1),
vigenciaHasta: new Date(2016, 10, 20),
cuotas: "6 cuotas",
marca: "Adidas"
}
]
self.edit = function(id) {
console.log('id to be edited', id);
for (var i = 0; i < self.notificaciones.length; i++) {
if (self.notificaciones[i].id == id) {
self.notificacion = angular.copy(self.notificaciones[i]);
break;
}
}
}
self.reset = function(){
self.notificacion={id:null, vigenciaDesde:null, vigenciaHasta:null, cuotas:'', marca:''};
$scope.myForm.$setPristine(); //reset Form
};
});
index.html
<!doctype html>
<html ng-app="mainApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<!--script src="https://code.angularjs.org/1.0.7/i18n/angular-locale_es-ar.js"></script-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style-->
<div ng-controller="NotificacionController as ctrl">
<!-- Row Cuotas -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Cuotas</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.cuotas" name="cuotas" class="cuotas form-control input-sm" placeholder="Cuotas" />
</div>
</div>
</div>
<!-- Row Marca -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Marca</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.marca" name="marca" class="marca form-control input-sm" placeholder="Marca" />
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Desde -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde</label>
<div class="col-md-7">
<div class='input-group date'>
<input type='text' class="form-control ctrl.notificacion.vigenciaDesde input-sm" id="vigenciaDesde" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Hasta -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Hasta</label>
<div class="col-md-7">
<div class='input-group date vigenciaHasta' name="vigenciaHasta">
<input type='text' class="form-control vigenciaHasta" id="vigenciaHastaId" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde Updated</label>
<div ng-model="ctrl.notificacion.vigenciaDesde">
<pre>Vigencia Desde Updated: <em>{{ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy' }}</em></pre>
</div>
</div>
</div>
<div class="row">
<div class="form-actions floatRight">
<button type="button" ng-click="ctrl.reset()" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset Form</button>
</div>
</div>
<br/>
<div class="panel panel-default">
<div class="panel-heading"><span class="lead">Lista de Notificaciones Existentes </span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Vigencia Desde</th>
<th>Vigencia Hasta</th>
<th>Cuotas</th>
<th>Marca</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in ctrl.notificaciones | orderBy:'id'">
<td><span ng-bind="n.id"></span></td>
<td><span ng-bind="n.vigenciaDesde | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.vigenciaHasta | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.cuotas"></span></td>
<td><span ng-bind="n.marca"></span></td>
<td>
<button type="button" ng-click="ctrl.edit(n.id)" class="btn btn-success custom-width">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
plunker link:
http://plnkr.co/edit/KFA4AsgQdItUfSWVc1Ag
You are injecting ui-bootstrap into your app by inserting 'ui.bootstrap' but you not using the uib-datepicker-popup directive.
ui-bootstrap doesn't require jquery, you were using some sort of jquery variant that isn't compatible with angular and didn't change the model.
you should remove filters from your ng-models, this
ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'"
Doesn't work, you can't apply a filter on a model value, but only when displaying it in your template.
Remove the filters
ng-model="ctrl.notificacion.vigenciaHasta"
This is how your datpicker markup should look like
<div class='input-group date'>
<input uib-datepicker-popup type='text' is-open="open" class="form-control" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open = !open"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
Noticed I've added the is-open attribute to open and close the picker from the right button.
Here is an updated plunker
I have a form set up that takes values and saves them into an object in a firebase array. I used ng-repeat to display each object in that array in a "dashboard" page. I want to be able to alter the specific object that gets created via checkboxes. I cannot figure out how to get the specific object.
var app = angular.module('app', ['ngRoute','firebase','ngMaterial']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/second', {
templateUrl: 'templates/second.html',
controller: 'homeCTRL'
})
.when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'homeCTRL'
})
.when('/vehicles', {
templateUrl: 'templates/vehicles.html',
controller: 'homeCTRL'
})
.otherwise({
redirectTo: '/dashboard'
});
}]);
//controllers
app.controller('homeCTRL', ['$scope', '$log','$firebaseArray', function($scope,$log,$firebaseArray) {
var ref = new Firebase("https://asgtodo.firebaseio.com");
$scope.newItem = '';
$scope.FBproject= $firebaseArray(ref.child('project'));
$scope.FBhistory = $firebaseArray(ref.child('history'));
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
$scope.pipeCompleted = false;
$scope.addItem = function() {
$scope.FBproject.$add({
projectName: $scope.projectName,
dateStart: $scope.dateStart,
dateEnd: $scope.dateEnd,
signChecked: $scope.signChecked,
paintChecked: $scope.paintChecked,
blastChecked: $scope.blastChecked,
labelChecked: $scope.labelChecked,
yellowMacro: $scope.yellowMacro,
redMacro: $scope.redMacro,
otherPaint: $scope.otherPaint,
pipeFootage: $scope.pipeFootage,
maxHeight: $scope.maxHeight,
liftSmall: $scope.liftSmall,
liftLarge: $scope.liftLarge,
liftBoom: $scope.liftBoom,
pipeCompleted: $scope.pipeCompleted
});
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
};
$scope.changePipe = function(x){
$scope.index = $scope.FBproject.indexOf(x);
};
$scope.rmList = function(item) {
//get index of displayHold
$scope.index = $scope.FBproject.indexOf(item);
//add it to historylist
$scope.FBhistory.$add($scope.FBproject[$scope.index]);
$scope.FBproject.$remove($scope.FBproject[$scope.index]);
};
$scope.modalItem = function(item){
return null;
};
}]);
app.controller('secondCTRL', ['$scope', function($scope) {
}]);
Here is the html
<!-- MODAL BUTTON -->
<div style="margin-top: 6em;">
<div class="row animated shake">
<div class="col s6 m5 l5">
<center>
<a class="btn-floating btn-large waves-effect waves-dark blue modal-trigger" id="modal" href="#modal1">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
</div>
<!-- MODAL -->
<div id="modal1" class="modal bottom-sheet white" style="height: 100%; opacity: 0.8">
<div class="modal-content white blue-text">
<div class="row">
<form>
<div class="row animated rollIn">
<div class="input-field col s12 m6 l6">
<input id="projName" type="text" ng-model="projectName">
<label id="projNameLabel">Project Name</label>
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">Start Date</label>
<input id="projDate" type="date" class="datepicker " ng-model="dateStart">
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">End Date</label>
<input id="projDate" type="date" class="datepicker" ng-model="dateEnd">
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<center>
<form action="#">
<p class="padBoxes">
<input type="checkbox" id="Signs" class="Materialize.showStaggeredList('#test')" ng-model="signChecked"/>
<label for="Signs">Signs</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Paint" ng-model="paintChecked"/>
<label for="Paint">Paint</label>
</p>
<p ng-show="paintChecked" style="margin-left: 15px;" class="padBoxes">
<input type="checkbox" id="Blast" ng-model="blastChecked"/>
<label for="Blast">Blast</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Labels" ng-model="labelChecked"/>
<label for="Labels">Labels</label>
</p>
</form>
</center>
</div>
<div class="col s12 m3 l3 z-depth-5" style="margin-right: 10px;" ng-show="paintChecked">
<center class="animated fadeIn">
<form action="#">
<div class="indigo z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Paint</h5>
</p>
</div>
<p class="range-field padBoxes">
<label for="Labels">Yellow 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="yellowMacro"/>
</p>
<p class="range-field padBoxes">
<label for="Labels">Red 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="redMacro"/>
</p>
<p class="input-field padBoxes">
<input id="projName" type="text" ng-model="otherPaint">
<label>Other</label>
</p>
</form>
</center>
</div>
<div class="col s12 m2 l3 z-depth-3" style="margin-right: 10px;" ng-show="signChecked">
<form action="#">
<div class="col s12 animated fadeIn">
<center>
<div class="red z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Signs</h5>
</p>
</div>
<p class="input-field">
<input id="projName padBoxes" type="text" ng-model="pipeFootage">
<label>Pipe Footage</label>
</p>
<p class="range-field padBoxes">
<label for="Labels ">Max Height</label>
<input type="range" id="test5" min="0" max="50" ng-model="maxHeight"/>
</p>
</center>
</div>
</form>
</div>
<div class="col s12 m2 l2 " style="margin-right: 10px;" ng-show="signChecked || labelChecked">
<center>
<p >
<input type="checkbox" id="liftSmall" ng-model="liftSmall"/>
<label for="liftSmall">Lift 3246</label>
</p>
<p >
<input type="checkbox" id="liftLarge" ng-model="liftLarge"/>
<label for="liftLarge">Lift 4069</label>
</p>
<p >
<input type="checkbox" id="liftBoom" ng-model="liftBoom"/>
<label for="liftBoom">Lift BOOM!</label>
</p>
</center>
</div>
</div>
</div>
</form>
</div>
<div class="input-field col s12 m2 l2 padBoxes" style="margin: -50px;">
<center>
<a href="#!" class="modal-action modal-close waves-effect waves-dark btn-flat z-depth-2">
<i class="material-icons" style="font-size: 3em;">close</i>
</a>
<a class="btn-floating btn-large waves-effect waves-dark blue z-depth-2" onclick="Materialize.toast('Project Added', 4000)" ng-click="addItem()">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
<!-- FBproject -->
<div class="container row" style="margin-top: 4em; ">
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="x in FBproject track by $index">
<div class="collapsible-header waves-effect waves-dark">
<div class="col s2 m2 l1">
<center>
<i class="material-icons">folder-open</i>
</center>
</div>
<div class="col s5 m2 l2">
{{x.projectName}}
</div>
<div class="col s12 m5 l4">
<center>
<div class="chip">Signs</div>
<div class="chip">Paint</div>
<div class="chip">Labels</div>
</center>
</div>
</div>
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="{{}}" />
<label for="pipe">Pipe Ordered</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="hotel">Hotel</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="lifts">
<h7>lifts</h7>
</label>
</p>
<a class="btn-floating btn-large waves-effect waves-dark red" ng-click="rmList(x)">
<i class="material-icons">delete_forever</i>
</a>
</form>
</center>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.collapsible').collapsible({accordion: false});
$('.modal-trigger').leanModal({dismissible: true, opacity: .50, in_duration: 300, out_duration: 200});
$('.datepicker').pickadate({selectMonths: true, selectYears: 15, container: 'body'});
$('select').material_select({container: 'body'});
$(".button-collapse").sideNav();
});
</script>
index.html
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="main.css"/>
</head>
<body ng-cloak>
<div>
<div class="fixed-action-btn horizontal click-to-toggle" style="top: 5px; center: 24px;">
<a class="btn-floating waves-effect waves-dark btn-large">
<i class="material-icons">menu</i>
</a>
<ul>
<li>
<a href="#/dashboard" class="btn-floating waves-effect waves-dark btn-large yellow darken-1">
<i class="material-icons">dashboard</i>
</a>
</li>
<li>
<a href="#/second" class="btn-floating waves-effect waves-dark blue btn-large green darken-1">
<i class="material-icons">find_in_page</i>
</a>
</li>
<li>
<a href="#/vehicles" class="btn-floating waves-effect waves-dark btn-large red darken-1">
<i class="material-icons">directions_car</i>
</a>
</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
section is question?
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="x.pipeCompleted{{index}}"/> <!-- what do I put here ?? to get the specific object-->
<label for="pipe">Pipe Ordered</label>
</p>
<p>
Try this:
<input type="checkbox" ng-model="pipeCompleted[$index]"/>
I wand to create the login for rest-full api. I want to create similar application when page open first time then It pop-up with the login page. How I want to make Please see DEMO. This is developed in knockout+flask rest-api. I want to make same but I want to use Angularjs instead of Knockout.
My Code DEMO, In this I remove all the other code. Just want when page load It loads with login, and when I insert correct login credential it Login to rest-api.
rest-server.py
import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template
from flask.ext.httpauth import HTTPBasicAuth
app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()
#auth.get_password
def get_password(username):
if username == 'admin':
return '1234'
return None
#auth.error_handler
def unauthorized():
return make_response(jsonify({'error': 'Unauthorized access'}), 403)
#app.errorhandler(400)
def bad_request(error):
return make_response(jsonify({'error': 'Bad request'}), 400)
#app.errorhandler(404)
def not_found(error):
return make_response(jsonify({'error': 'Not found'}), 404)
tasks = [
{
'id': 1,
'title': u'Buy groceries',
'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
'done': False
},
{
'id': 2,
'title': u'Learn Python',
'description': u'Need to find a good Python tutorial on the web',
'done': False
}
]
def make_public_task(task):
new_task = {}
for field in task:
if field == 'id':
new_task['uri'] = url_for('get_task', task_id=task['id'],
_external=True)
else:
new_task[field] = task[field]
return new_task
#app.route('/')
#auth.login_required
def index():
return render_template('index.html')
#app.route('/todo/api/v1.0/tasks', methods=['GET'])
#auth.login_required
def get_tasks():
return jsonify({'tasks': [make_public_task(task) for task in tasks]})
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
#auth.login_required
def get_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
return jsonify({'task': make_public_task(task[0])})
#app.route('/todo/api/v1.0/tasks', methods=['POST'])
#auth.login_required
def create_task():
if not request.json or 'title' not in request.json:
abort(400)
task = {
'id': tasks[-1]['id'] + 1,
'title': request.json['title'],
'description': request.json.get('description', ""),
'done': False
}
tasks.append(task)
return jsonify({'task': make_public_task(task)}), 201
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
#auth.login_required
def update_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
if not request.json:
abort(400)
if 'title' in request.json and \
not isinstance(request.json['title'], six.string_types):
abort(400)
if 'description' in request.json and \
not isinstance(request.json['description'], six.string_types):
abort(400)
if 'done' in request.json and type(request.json['done']) is not bool:
abort(400)
task[0]['title'] = request.json.get('title', task[0]['title'])
task[0]['description'] = request.json.get('description',
task[0]['description'])
task[0]['done'] = request.json.get('done', task[0]['done'])
return jsonify({'task': make_public_task(task[0])})
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
#auth.login_required
def delete_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
tasks.remove(task[0])
return jsonify({'result': True})
if __name__ == '__main__':
app.run(debug=True)
My angular code angularjs.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo By Angularjs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<a class="btn" data-toggle="modal" data-target="#login">Login</a>
</div>
<div>
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td>
<a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div>
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="selectedTask.title" />
<input type="text" ng-model="selectedTask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addDialogLabel">Add Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;" />
<br />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<div id="login" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="loginLabel">Sign In</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input data-bind="value: username" type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input data-bind="value: password" type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button data-bind="click: login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Sign In</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask = function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function(task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask = function() {
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title: $scope.task1, description: $scope.description1});
$scope.task1 = '';
$scope.description1 = '';
// $scope.tasks.push('dhsh');
};
});
/*
app.controller('addNewTaskCtrl', ['$scope', function($scope){
$scope.addNewTask=function(){
var task;
}
}]);*/
</script>
</body>
</html>
Your login page is rendering but what i see here is Class modal hide fade is not set.Try using class="modal" in login div instead of class="modal hide fade"