How to push after $http.post in AngularJS - angularjs

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 :)

Related

Im having trouble building a contact form, can someone explain?

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.

Trying to access array offset on value of type null (View: /app/resources/views/products/productView.blade.php)

can anyone help me with this error? my project is working fine on local server but when I push to heroku it gives me the below error. Any help ?
I am using php version 7.3.7 and laravel version 6.18.3 also I am using heroku for the first time.
I have uploaded the code
**Product View**
#foreach($products as $p)
<section class="section single-wrap">
<div class="container">
<div class="page-title">
<div class="row">
<div class="col-sx-12 text-center">
<h3>{{$p->product_name}}</h3>
</div>
</div>
</div>
<div class="content-top">
<div class="row">
<div class="col-sx-6 col-sm-6">
</div>
<div class="col-sm-6 col-xs-12 cen-xs text-right">
<div class="bread">
<ol class="breadcrumb">
<li>Home</li>
<li>Shop</li>
<li class="active">{{$p->product_name}}</li>
</ol>
</div>
</div>
</div><!-- end row -->
</div><!-- end content top -->
<div class="row">
<div id="singlewrapper" class="col-md-8">
<div class="content nopad">
<div class="item-single-wrapper">
<div class="item-box">
<div class="item-media text-center">
<div id="slider" class="flexslider clearfix">
<ul class="slides">
<li><img src="{{ asset('assets/images/'.array_first(json_decode($p->filename))) }}" style="width:700px; height:400px;" alt="" class="img-responsive"></li>
</ul>
</div>
<div id="carousel" class="flexslider clearfix">
<ul class="slides">
<li>
#foreach (json_decode($p->filename) as $picture)
<img src="{{ asset('assets/images/'.$picture) }}" style="height:120px; width:200px"/>
#endforeach
</li>
</ul>
</div>
</div><!-- end item-media -->
<div class="item-desc">
<b>Description</b>
<p> {{$p->description}} </p>
</div><!-- end item-desc -->
<center>
<p>__________</p>
</center>
#if(count($comments)>0)
<div class="item-desc">
<b>Comments</b>
#foreach($comments as $c)
<p> {{$c->comments}} </p>
{{$c->users['username']}}
<h6> by <b>{{$c->user['username']}}</b> at <b>{{$c->created_at}}</b> </h6> <br/>
#endforeach
</div><!-- end item-desc -->
#else
<div class="item-desc">
<b>Comments</b>
<p> No comments found </p>
</div><!-- end item-desc -->
#endif
</div><!-- end item-box -->
</div><!-- end item-single-wrapper -->
</div><!-- end content -->
</div><!-- end singlewrapper -->
<div id="sidebar" class="col-md-4">
<div class="boxes boxs">
<div class="item-price text-center">
<p>${{$p->price}}</p>
<em>Regular License</em>
<!-- <div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div> -->
<hr>
<small>
#if((Auth::check()) && ($findLikes == true))
<i class="fa fa-heart-o"></i> UnLike </small>
#else
<i class="fa fa-heart-o"></i> Like it </small>
#endif
<hr>
Add to Cart
<button type="button" data-toggle="modal" data-target="#myModal">Comment</button></a>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add your comments here <span class="fa fa-comment"></span></h4>
</div>
<div class="modal-body">
<div class="login-form">
<form method="post" action="/product-comment/{{$p->id}}">
#csrf
<div class="form-group">
<input type="text" name="comment" required class="form-control" placeholder="comment here" />
</div>
<button type="submit" name="go" class="btn btn-primary">Add Comment</button>
</form>
</div><!-- end login-form -->
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add Comment</button>
</div> -->
</div>
</div>
</div>
<ul class="list-inline social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-behance"></i></li>
<li><i class="fa fa-pinterest"></i></li>
</ul>
</div><!-- end price -->
</div><!-- end boxes -->
<div class="boxes boxs">
<div class="desiger-details text-center">
<img src="upload/member_05.jpg" class="img-circle" alt=""></a>
<h4>{{$p->username}}</h4>
<small><a href="/follow-user/{{$p->user_id}}"><i class="fa fa-user-plus">
#if((Auth::check()) && ($findFollow == true))
</i> Unfollow</a> </small>
#else
</i> Follow {{$p->username}}</a> </small>
#endif
</div><!-- end designer -->
</div><!-- end boxes -->
<div class="boxes boxs">
<div class="item-details">
<table>
<tr>
<td>Created on:</td>
<td>{{$p->created_at}}</td>
</tr>
<tr>
<td>Category</td>
<td>{{optional($p->category)->category_name}}</td>
</tr>
<tr>
<td>Followers:</td>
<td>{{$p->user->followers}}</td>
</tr>
<tr>
<td>Likes:</td>
<td>{{$p->total_likes}}</td>
</tr>
<tr>
<td>Comments:</td>
<td>{{$p->total_comments}}</td>
</tr>
</table>
</div><!-- end item-details -->
</div><!-- end boxes -->
</div><!-- end sidebar -->
</div><!-- end row -->
</div><!-- end container -->
</section>
#endforeach
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-5">
<div class="media cen-xs">
<p>
© Catalog INC. 2016 - All Rights Reserverd.<br>
Idea by <a class="madeby" href="http://showwp.com">Show WP</a> made with <i class="fa fa-heart"></i> coded with <i class="fa fa-html5"></i>
</p>
</div>
</div>
<div class="col-md-6 col-lg-7">
<ul class="list-inline text-right cen-xs">
<li>Home</li>
<li>Site Terms</li>
<li>Copyrights</li>
<li>License</li>
<li>Legal</li>
<li><a class="topbutton" href="#">Back to top <i class="fa fa-angle-up"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</footer><!-- end footer -->
</div><!-- end wrapper -->
<!-- END SITE -->
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap.js')}}"></script>
<script src="{{asset('assets/js/custom.js')}}"></script>
<!-- FlexSlider JavaScript
================================================== -->
<script src="{{asset('assets/js/flexslider.js')}}"></script>
<script>
(function($) {
"use strict";
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 92,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: true,
sync: "#carousel"
});
});
})(jQuery);
</script>
</body>
</html>`
Product Controller
public function showProductDescription($id) {
// echo $id;
$category = Category::all()->sortBy('category_name');
// $category->category_name;
$userLikes = new Comment();
$products = Product::where('id', $id)->get();
$comments = Comment::where('product_id', $id)->get();
$commentCount = Comment::where('product_id', $id)->get('comments')->count();
$pag = Comment::where('product_id', $id)->paginate(10);
if(Auth::check()) {
$carts = Cart::where('user_id', Auth::user()->id)
->where('active', '=', '1')->count();
$findFollow = Following::where('user_id', Auth::user()->id)
->where('followed_to', $id)->first();
$findLikes = Comment::where('user_id', Auth::user()->id)
->where('product_id', $id)->first();
// dd(Product::all());
// dd($findFollow);
// dd($findLikes);
// dd($pag);
// dd($commentCount);
// die();
return view('products.productView', compact('products', 'comments', 'pag', 'commentCount', 'carts', 'findFollow', 'category',
'userLikes', 'findLikes'));
} else {
$carts = Cart::where('active', '=', '1')->count();
$findFollow = '';
$findLikes = '';
// dd(Product::all());
// dd($findFollow);
// dd($findLikes);
// dd($pag);
// dd($commentCount);
// die();
return view('products.productView', compact('products', 'comments', 'pag', 'commentCount', 'carts', 'findFollow', 'category',
'userLikes', 'findLikes'));
}
}
public function likedProduct($id) {
if(Auth::check()) {
$product = Product::where('id', $id)->first();
$userLikes = new Comment();
$userLikes->user_id = Auth::user()->id;
$userLikes->product_id = $product->id;
$userLikes->likes = '1';
$userLikes->save();
if($product->total_likes == 0) {
$product->total_likes = 1;
} else {
$product->total_likes = $product->total_likes + 1;
}
$product->save();
return redirect()->action('ProductController#showProductDescription', ['id' => $id]);
} else {
Session::flash("message", "OOPS! You dont have permission to upload the items. Please register first.");
return redirect("/register-user");
}
}
public function unlikeProduct($id) {
if(Auth::check()) {
$comments = Comment::where('user_id', Auth::user()->id)
->where('product_id', $id)->delete();
$product = Product::where('id', $id)->get('total_likes')->count();
// echo $product;
// die();
if($product>0) {
$productLikes = Product::where('id', $id)->first();
$productLikes->total_likes = $productLikes->total_likes - 1;
$productLikes->save();
}
// Session::flash("message", "OOPS! You dont have permission to upload the items. Please register first.");
return redirect()->action('ProductController#showProductDescription', ['id' => $id]);
} else {
Session::flash("message", "OOPS! You dont have permission to upload the items. Please register first.");
return redirect("/register-user");
}
}
public function productComment($id) {
if(Auth::check()) {
$c = Input::get('comment');
$product = Product::where('id', $id)->first();
$user_comments = new Comment();
$user_comments->user_id = Auth::user()->id;
$user_comments->product_id = $product->id;
$user_comments->comments = $c;
$user_comments->save();
if($product->total_comments == 0) {
$product->total_comments = 1;
} else {
$product->total_comments = $product->total_comments + 1;
}
$product->save();
Session::flash('message', 'Your comment has been added successfully');
return redirect()->action('ProductController#showProductDescription', ['id' => $id]);
} else {
Session::flash("message", "OOPS! You dont have permission to upload the items. Please register first.");
return redirect("/register-user");
}
}
I have updated the code so if you can help identifying the problem as I failed to identify the problem for the last one and half day and I need to get this fixed

$http.get returns string identical to test string but does not work

I am attempting to use matt lewis's angular bootstrap calendar https://github.com/mattlewis92/angular-bootstrap-calendar - with database data, but I am pulling my hair out trying virtually every combination of JSON post, echo, stringify, parse, serialize and on and on.
I can get the calendar to display events with a hard coded string, but when I try to get the string with $http.get it won't work. I went to great pains to ensure this string was identical to the hard coded one, but still no go. I know this is a lot of code but I don't know how else to show my problem. Please help!
index.html (calendar page)
<!doctype tml ng-app="mwl.calendar.docs">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<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="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.rawgit.com/jkbrzt/rrule/v2.1.0/lib/rrule.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/js/bootstrap-colorpicker-module.min.js"></script>
<script src="//mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="app/calendarappBk2.js"></script>
<script src="helpers.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/css/colorpicker.min.css" rel="stylesheet">
<link href="//mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="KitchenSinkCtrl as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button
class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button
class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button
class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:59"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)">
</mwl-calendar>
<br><br><br>
<h3 id="event-editor">
Edit events
<button
class="btn btn-primary pull-right"
ng-click="vm.addEvent()">
Add new
</button>
<div class="clearfix"></div>
</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Primary color</th>
<th>Secondary color</th>
<th>Starts at</th>
<th>Ends at</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in vm.events track by $index">
<td>
<input
type="text"
class="form-control"
ng-model="event.title">
</td>
<td>
<input class="form-control" colorpicker type="text" ng-model="event.color.primary">
</td>
<td>
<input class="form-control" colorpicker type="text" ng-model="event.color.secondary">
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.startsAt"
is-open="event.startOpen"
close-text="Close" >
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.toggle($event, 'startOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<div
uib-timepicker
ng-model="event.startsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</div>
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.endsAt"
is-open="event.endOpen"
close-text="Close">
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.toggle($event, 'endOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<div
uib-timepicker
ng-model="event.endsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</div>
</td>
<td>
<button
class="btn btn-danger"
ng-click="vm.events.splice($index, 1)">
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
calendarappBk2.js (ajax)
<?php
$DB_HOST = 'localhost';
$DB_USER = 'amsdev1';
$DB_PASS = 'Toygoat#8';
$DB_NAME = 'tcl3ams';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
$query="SELECT title, color, startsAt, endsAt, recursOn, draggable, resizable, actions from calendar";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$arr = array();
if($result->num_rows > 0) {
$json_response = "[";
while($row = $result->fetch_assoc()) {
$arr[] = $row;
$json_response = $json_response.'{title: "'.$row["title"].'", ';
$json_response = $json_response.'color: '.$row["color"].', ';
$json_response = $json_response.'startsAt: "'.$row["startsAt"].'", ';
$json_response = $json_response.'endsAt: "'.$row["endsAt"].'", ';
$json_response = $json_response."recursOn: '".$row["recursOn"]."', ";
$json_response = $json_response.'draggable: '.$row["draggable"].', ';
$json_response = $json_response.'resizeable: '.$row["resizable"].', ';
$json_response = $json_response.'actions: '.$row["actions"].'}, ';
}
$json_response = substr($json_response,0,strlen($json_response)-2);
$json_response = $json_response."]";
}
//header('Content-Type: application/json', true);
//header("Content-Type: application/json; charset=utf-8");
//$json_response = json_encode($arr);
echo json_encode($json_response);
/*
$ch = curl_init('/ams/index.html');
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $json_response);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json',
'Content-Length: ' . strlen($json_response))
);
$result = curl_exec($ch);
*/
?>
calendarappBk2.js (controller app)
angular.module('mwl.calendar.docs', ['mwl.calendar', 'ngAnimate', 'ui.bootstrap', 'colorpicker.module']);
angular
.module('mwl.calendar.docs') //you will need to declare your module with the dependencies ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']
.controller('KitchenSinkCtrl', function($scope, $http, moment, alert, calendarConfig) {
var vm = this;
//These variables MUST be set as a minimum for the calendar to work
vm.calendarView = 'month';
vm.viewDate = new Date();
var actions = [{
label: '<i class=\'glyphicon glyphicon-pencil\'></i>',
onClick: function(args) {
alert.show('Edited', args.calendarEvent);
}
}, {
label: '<i class=\'glyphicon glyphicon-remove\'></i>',
onClick: function(args) {
alert.show('Deleted', args.calendarEvent);
}
}];
$http.get("ajax/getCalendarBk2.php").success(function(data){
vm.events = JSON.parse(data);
window.alert(vm.events);
});
/*
vm.events = [{title: "Testerson", color: calendarConfig.colorTypes.info, startsAt: "2016-10-10 10:00:00", endsAt: "2016-10-10 11:00:00", recursOn: '', draggable: true, resizeable: true, actions: actions}, {title: "Anoter Testerson", color: calendarConfig.colorTypes.info, startsAt: "2016-10-12 11:00:00", endsAt: "2016-10-12 12:00:00", recursOn: '', draggable: true, resizeable: true, actions: actions}, {title: "This is a really long Testerson that occurs on every year", color: calendarConfig.colorTypes.warning, startsAt: "2016-10-14 13:00:00", endsAt: "2016-10-14 14:00:00", recursOn: 'year', draggable: true, resizeable: true, actions: actions}];
*/
vm.isCellOpen = true;
vm.addEvent = function() {
vm.events.push({
title: 'New event',
startsAt: moment().startOf('day').toDate(),
endsAt: moment().endOf('day').toDate(),
color: calendarConfig.colorTypes.important,
draggable: true,
resizable: true
});
};
vm.eventClicked = function(event) {
alert.show('Clicked', event);
};
vm.eventEdited = function(event) {
alert.show('Edited', event);
};
vm.eventDeleted = function(event) {
alert.show('Deleted', event);
};
vm.eventTimesChanged = function(event) {
alert.show('Dropped or resized', event);
};
vm.toggle = function($event, field, event) {
$event.preventDefault();
$event.stopPropagation();
event[field] = !event[field];
};
});

Angular click not passing variables though

I have been struggling with an angular-js problem, I am unable to figure out why my ng-click is not sending through any values to the jquery function that is hooked up to it. It triggers the jquery fine, but when it comes into the jquery no variables comes with it!
So some information first of all:
I am using angular-bootstrap-calendar Link to Project (This is what I am having issues with)
Using angular-bootstrap-calendar I have implemented a custom day template using instructions from github Instruction Page
The ng-click triggers my code correctly though no information is passed from the click to my customer event.
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(day)">
</mwl-calendar>
vm.dateClicked = function (day) {
alert("Do Something");
};
Results
day = undefined
Versions:
"angular-bootstrap-calendar": "0.19.3",
"angular": "1.5.0",
"font-awesome": "4.5.0",
"moment": "2.12.0",
"interact.js": "1.2.6",
"angular-bootstrap": "1.2.4",
"angular-touch": "1.5.0",
"angular-animate": "1.5.0",
Full Code Examples
ManRoster.cshtml
<div class="col-lg-12">
<div class="col-lg-12 panel panel-default">
<div ng-app="UserCal" class="textfix">
<script id="calendarWeekView.html" type="text/ng-template">
<div class="cal-week-box" ng-class="{'cal-day-box': vm.showTimes}">
<div class="cal-row-fluid cal-row-head">
<div class="cal-cell1"
ng-repeat="day in vm.view.days track by $index"
ng-class="{
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-today': day.isToday,
'cal-day-future': day.isFuture}"
mwl-element-dimensions="vm.dayColumnDimensions"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, day.date)">
<div id="resourcescount">
{{ day.events.length }}
</div>
<span ng-bind="day.weekDayLabel">
</span>
<br>
<small>
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
</small>
</div>
</div>
<div class="cal-day-panel clearfix" ng-style="{height: vm.showTimes ? (vm.dayViewHeight + 'px') : 'auto'}">
<mwl-calendar-hour-list day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-width="vm.dayColumnDimensions.width"
view-date="vm.viewDate"
on-timespan-click="false"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>
<div class="row">
<div class="col-xs-12">
<div class="cal-row-fluid"
ng-repeat="event in vm.view.events track by event.$id">
<div ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"
ng-style="{
top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto',
position: vm.showTimes ? 'absolute' : 'inherit',
width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '',
left: vm.showTimes ? (vm.dayColumnDimensions.width * event.dayOffset) + 15 + 'px' : ''
}"
data-event-class
mwl-draggable="event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y)"
on-drag-end="vm.weekDragged(event, x, y)"
mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes"
resize-edges="{left: true, right: true}"
on-resize-end="vm.weekResized(event, edge, x)">
Shift
<strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>
<a href="javascript:;"
ng-click="vm.onEventClick({calendarEvent: event})"
class="event-item"
ng-bind-html="vm.$sce.trustAsHtml(event.title)"
uib-tooltip-html="event.title | calendarTrustAsHtml"
tooltip-placement="left"
tooltip-append-to-body="true">
</a>
</div>
</div>
</div>
</div>
<div id="ResourceInfo">
This will be the select panel
</div>
</div>
</div>
</script>
<!-- This is the end of the testing script -->
<div ng-controller="Cal as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(date)">
</mwl-calendar>
<br />
</div>
</div>
</div>
</div>
ManRoster.js
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal);
function populateCal($http, calendarConfig) {
var resultset = [];
var userID = 1;
var vm = this;
calendarConfig.templates.calendarWeekView = 'calendarWeekView.html';
vm.calendarView = 'week';
vm.viewDate = new Date();
vm.events = [];
vm.isCellOpen = true;
vm.toggle = function ($event, field, event) {
$event.preventDefault();
$event.stopPropagation();
event[field] = !event[field];
};
vm.dateClicked = function (day) {
alert("Do Something");
};
}
Plunker As Requested
Let's try this one. I've created a custom directive to capture click events, it seems to be capturing the date consistently for me.
http://plnkr.co/edit/1XlQkgj5eJeuy728bEwI?p=preview
Add a directive (i just called it testDirective):
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal)
.directive('testDirective', testDirective);
emphasized text
function testDirective() {
return {
link: function(scope,elem,attrs) {
angular.element(elem).on('click', function (evt) {
alert('You clicked on: ' + scope.vm.viewDate)
});
}
};
}
Add it to the mwl-calendar element:
<mwl-calendar test-directive events="vm.events"
Initial Idea:
Alright, I think I have it now. In index.html, change
on-view-change-click="vm.dateClicked(date)"
to
on-view-change-click="vm.dateClicked(this.vm.viewDate)"
It should look like this:
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(this.vm.viewDate)">
</mwl-calendar>
Plunker: http://plnkr.co/edit/kKpjoCFvaR6xBjQL1bT6?p=preview

Laravel - must be of the type array, none given

Having a strange problem with my laravel 5.2 build, I'm trying to send data from a form to my database and for some reason an error keeps being thrown on submit which states "Argument 1 passed to App\Http\Controllers\PostsController::postStatus() must be of the type array, none given" and I'm not sure why as I am sending data into an array. My code is shown below.
timeline.blade.php
#extends('layouts.app')
#section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="row notifications-section">
<div class="col-md-4">
<div class="dropdown">
<a class="dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-caret-square-o-down"></i></a>
<ul class="dropdown-menu">
<li>option 1</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<a class="dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-comments"></i></a>
<ul class="dropdown-menu">
<li>option 1</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<a class="dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-users"></i></a>
<ul class="dropdown-menu">
<li>option 1</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<form role="form" method="POST" action="{{ url('/home') }}" class="facebook-share-box">
{!! csrf_field() !!}
<div class="share">
<div class="panel panel-default">
<div class="panel-body">
<div class="">
<input type="hidden" name="user_name" value="{{ Auth::user()->firstName }} {{ Auth::user()->lastName }}">
<textarea name="body" cols="40" rows="10" id="status_message" value="{{ old('body') }}" class="form-control message" style="height: 62px; overflow: hidden;" placeholder="What's on your mind ?"></textarea>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="icon icon-map-marker"></i> Location</button>
<button type="button" class="btn btn-default"><i class="icon icon-picture" ></i> Photo</button>
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<select name="visibility" class="form-control privacy-dropdown pull-left input-sm" value="{{ old('visibility') }}">
<option value="1" selected="selected">Public</option>
<option value="2">Only my friends</option>
<option value="3">Only me</option>
</select>
</div>
<div class="col-md-3">
<input type="submit" name="submit" class="btn btn-primary btn-small">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4 profile-section">
<div class="row">
<div class="col-md-8">
<h2>{{ Auth::user()->firstName }} {{ Auth::user()->lastName }}</h2>
<h4>{{ Auth::user()->currentLocation }}</h4>
<p>{{ Auth::user()->bio }}</p>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 connect-section">
<div class="row">
<div class="col-md-4">Section</div>
<div class="col-md-4">Section</div>
<div class="col-md-4">Section</div>
</div>
</div>
<div class="col-md-9 posts-section">
<div class="row">
#foreach($posts as $post)
<div class="col-md-4">
<h2>{{ $post->user_name }}</h2>
{{ $post->created_at }}<br />
{{ $post->body }}
{{ $post->visibility }}<br />
<div class="row like_comment_share">
<div class="col-md-4">Like</div>
<div class="col-md-4">Comment</div>
<div class="col-md-4">Share</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
#endsection
PostController.php
<?php
namespace App\Http\Controllers;
use App\Posts;
use App\Http\Controllers\Controller;
use Illuminate\Routing\Controller as BaseController;
class PostsController extends BaseController {
/**
* Display a listing of the resource.
*
* #return Response
*/
public function index()
{
}
public function display()
{
return view('users/timeline')
->with('user_name', 'body', 'photo', 'visibility', 'created_at')
->with('posts', Posts::all());
}
/**
* Show the form for creating a new resource.
*
* #return Response
*/
protected function postStatus(array $data)
{
return Posts::create([
'user_name' => $data['user_name'],
'body' => $data['body'],
'photo' => $data['photo'],
'visibility' => $data['visibility'],
]);
}
Post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Posts extends Model
{
protected $fillable = [
'user_name', 'body', 'photo', 'visibility', 'created_at',
];
}
No data is passed to the controller when you post to a route. Instead, you access the data through the Request object by injecting it into the method, or by using the Request:: or Input:: facades.
protected function postStatus(Illuminate\Http\Request $request)
{
$data = $request->all();
return Posts::create([
'user_name' => $data['user_name'],
'body' => $data['body'],
'photo' => $data['photo'],
'visibility' => $data['visibility'],
]);
}

Resources