Develop Reference

Laravel- How to "catch" a variable with Javascript passed to a blade.php view

so i'm currently working on a project and i want to add a calendar to one view, i'm using FullCalendar, the calendar is shown in the view but i'm currently trying to add events to that calendar, those events are going to be "pulled" from my database into the calendar to be displayed, now the problem is that when i pass the array with the events to the blade.php view that contains the calendar a error comes up saying that the variable "events" is undefined and i don't know if i'm doing something wrong, here's the code:
RegisteredUserController.php
$events = array();
$citas = Cita::all();
foreach($citas as $cita){
$events[] = [
'title' => $cita->paciente_id,
'start' => $cita->hora_de_inicio,
'end' => $cita->hora_de_finalizacion
];
}
return redirect(RouteServiceProvider::HOME)->with(['events' => $events]);
RouteServiceProvider.php
public const HOME = '/home';
homeView.blade.php (This is where i get the error, in the line where i assign it to citas)
<div id="calendar">
</div>
<script>
$(document).ready(function(){
var citas = #json($events);
$('#calendar').fullCalendar({
header: {
left: 'month, agendaWeek, agendaDay',
},
events: citas
})
});
</script>
routes / web.php
Route::get('/home', function (){
return view('homeView');
})->name('homeView');
Not sure if it's helpful but i'm using Laravel's Breeze to handle the authentication of users, so when an user is aunthenticated they're redirected to the page where the calendar is.
i've tried the following
RegisteredUserController.php
return redirect(RouteServiceProvider::HOME, compact('events));
This one makes the whole calendar disappear:
homeView.blade.php
var citas = {{ Session::get('events') }};
Thank you in advance.

the return should be like this
return view('path_of_the_blade', compact('events'));
So then in View, you can use
<script>
var citas = #json($events);
</script>

On you controller, why don't you just simply use:
return view('homeView')->with(['events' => $events]);
or simplier:
return view('homeView', compact('events'));
This would surely pass the variable events on the blade file.
Then on your blade file, you will just reference it as:
var citas = {{ $events }};

How to stop execution of all js on page yii2?

Yii2. Example: (.../index.php)
<?php echo Html::a('Add new', ['/rode/prod', 'id'=>$model->id ], ['onClick' => '
var modal = $(".modal");
$.get("/rode/prod?id='.$model->id.'", function(data) {
modal.html(data).modal("show");
});
return false;'
]);?>
<?php echo Html::a('Add new', ['/rode/lok', 'id'=>$model->id ], ['onClick' => '
var modal = $(".modal");
$.get("/rode/lok?id='.$model->id.'", function(data) {
modal.html(data).modal("show");
});
return false;'
]);?>
And other...
When start to run a modal window on click button, all others run. How to do, to run only once, but not all ?

Use id in modals to identify them instead of class.
With unique id like i.e. newProd for the first model it will be:
var modal = $("#newProd");
For this to work you have to set id in modal's div like:
<div id="newProd" ...>
Add unique id to every modal like that.

angular ng-src doesn't refresh an image

I am doing a functionality of selecting an image from the image list. I have a button "select" from every button and call selectImage method on button-click.
AngularApp:
app = angular.module("BlogImageApp", []);
app.controller("BlogImageController", function($http, $scope){
$scope.selectedImageId = null;
$scope.selectedImageUrl = "";
$scope.selectImage = function(image_id) {
$scope.selectedImageId = image_id;
var params = 'id='+image_id;
$http.get('/blog/image/get-url-by-id?'+params).success(function(data){
$scope.selectedImageUrl = data;
});
}
});
// registers the BlogImageApp in the view
angular.bootstrap(document, ['BlogImageApp']);
The view:
<div id="blog-images" ng-controller="BlogImageController">
<div ng-show="selectedImageId == null" style="height:50px; margin-bottom:5px;">
<div class="alert alert-info">
<span class="glyphicon glyphicon-info-sign"></span>
The image isn't selected!
</div>
</div>
<div class="blog-selected-image" ng-hide="selectedImageUrl == ''">
<b>The selected image: <span ng-bind="selectedImageUrl"></span> </b><br/>
<img ng-src="{{selectedImageUrl}}" class="img-thumbnail" style="height:200px">
</div>
...
PJAX PART GOES HERE WITH GRID AND PAGINATION
and button with ng-click="selectImage(39)" for every item
PJAX PART ENDS
And after all in javascript:
var ngRefresh = function() {
var scope = angular.element(document.body).scope();
var compile = angular.element(document.body).injector().get('$compile');
compile($(document.body).contents())(scope);
scope.$apply();
}
// PJAX
$(document.body).on('pjax:success', function(e){
ngRefresh();
});
After pjax call I have some strange behaviour. When I click a select button, selectImage method is invoked. It changes selectedIMageUrl and I can see different url in span every time I click select button. But the image (where ng-src specified) doesn't change.
Image changing worked great before pjax call though.
PS: I understand, that it would be better to do jsFiddle snippet, but I would have problem with server side.

Partial view with ajax and jQuery UI.Dialog

I am using a standard MVC4 EF5 setup and have a standard view which loads data from the db onto a table.
At the start of the table I have a column for each record with an Add button. The functionality I want is to click the button, popup a model dialog box with a form and add something to the item in the grid that was clicked (a 1 to many).
Lets say I have a list of vans available shown in the list. And when I click the add button beside the particular van where I want to add a passenger, I want a popup to show that allows me to type the details of the passenger so they can be assigned to that van.
I think I am over complicating this. But my brain is fried. I tried partial views with ajax. I tried jQuery UI.Dialog. Im just lost. I am trying to figure out how to find the id of the record I clicked (given the buttons are all generated by a for each loop in the view as normal and numbering them 1 to X does not tell me the id of the record I clicked). So even if I get the popup showing, I wont know which van to assign the passenger to.
If your woundering where the passenger list is coming from, its another table. And effectively any passenger can be assigned to any van. Its hypothetical.
Im actually working on a document generator and so there is a many to many relationship between document parts and documents (a given document part, can appear or belong to many documents, and a document can contain many document parts). I know its messy, this is why I did not want to use the real example.
I'm thinking its maybe an easy enough problem to solve but I have been at it since Friday and the brain left home!
Edit: Adding Code:
Here is the main view: The main problem I am having with this is the way the grid is constructed. I think its partially razor, partially html, partially html helper, and partially javascript. I don't know which part is which, but I just need to get a popup to show for each button in the table, and to have an id I can assign values to. I cant figure out how to do it here.
Html.Grid(dbaccess().Where(c => something = something
).Select(o => new
{
Name = o.Name,
Comment = o.Comment,
Status = o.Status,
}
, "grdConfiguration", 0, htmlRowClass: (p) => (row++ % 2 != 0) ? "" : "oddRow"
, columns: new[]{
//THIS IS THE PROBLEM LINE BELOW .... It shows a button in the table, but...
//how do I make it unique. Is it even necessary to do so.
// How do I get the ID of the record at this location when this button is pressed.
//This is the code as originally posted: For context
new Helpers.GridColumn(value: (a) => "<input type=\"button\" class=\"btn\" id=\"BtnHello\" value=\"Add\" />"),
//for some reason when I try the following alternative as suggest by the answers so far - it doesn't work.
new Helpers.GridColumn(value: (a) => "<input type=\"button\" class=\"btn\" data-ThisId=\"#model.SomeId\" value=\"Add\" />"),
//THIS IS THE PROBLEM LINE ABOVE....
there is more columns but this button calls the jQuery...
On this view I also have some Div tags in which to load the partial... I can actually get this to popup. But that's about all I can do. And only when I click the first button in the table.
<div id='SomePopUp' style='display: none;'>
//#using (Html.BeginForm())
//{
// <div>
// <span class="display-label">Quantity: </span>
// <span class="display-field"><input type="text" id="txtQuantity" /></span>
// </div>
// <div>
// <span class="display-label">Comments: </span>
// <span class="display-field"><textarea rows="7"></textarea></span>
// </div>
//}
</div>
I also have a script section on this view with the code for the popup:
<script type="text/javascript">
$("#BtnHello").click(function ()
{
$("#SomePopUp").dialog(
{
resizable: false,
height: 400,
width: 400,
modal: true,
title:"add to {Some ID}:", //I want the id to show here so I know I have the record I want.
buttons:
{
Submit : function ()
{
$(this).dialog('Some Text');
},
Cancel: function ()
{
$(this).dialog('close');
}
}
});
});
</script>
I have a controller:
[HttpGet]
public ActionResult AddExtra(int id)
{
//Fairly sure I should be doing something with this id, but how do I get it from the button.
return PartialView();
}
And for the partial view I have
#model CM.ViewModels.AddExtraPackagesViewModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add Something</h3>
</div>
<div>
//I was using ajax here...
#*#using (Ajax.BeginForm("DoSomething", "Something", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "list-of-something"
}))
{
<div class="modal-body">
#Html.TextBoxFor(x => x.Quantity);
#Html.TextAreaFor(x => x.Comment);
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">Save</button>
Close
</div>
}
</div>
I made a little view model too but...
public class AddExtraViewModel
{
public int Id { get; set; }
public string Quantity { get; set; }
public string Comment { get; set; }
}
I apologise if this is all over the place but I did not write the original code. There were about 7 other programmers here before me and I'm just struggling to get through it.
Any help would be appreciated.

I think you would want something like this (using jQuery and jQuery UI):
Controller:
public ActionResult SomeAction(int id) {
return View(new YourModel { Id = id });
}
Partial View:
#model YourProject.Models.YourModel
// Partial view content e.g. the form etc.
Your view:
/<!-- html etc. -->
<table>
<tr>
<td>Add</td>
</tr>
</table>
<script>
$(function(){
$(".add-button").click(function(){
var options = {
autoOpen: false
}
var dialog = $("<div>").dialog(options);
var id = $(this).data("theId");
dialog.load("the/url/to/the/controller/action", { id: id }, function(){
dialog.dialog("open");
dialog.find("form").submit(function(){
// do stuff
dialog.remove();
return false;
});
});
});
});
</script>

if you are building buttons in a forloop you don't want to define an id on the button. Duplicate id's on a view can cause lots of issues. Use a class on the buttons instead to trigger off of and use $(this) in your script to get details of the button that was clicked. To access buttons on a partial or on items that are added to your page after page load you need to tie the click event for that button to the document like this
$(document).on("click", ".btnDetails", function(){
//your script here
});
The other example uses "this" and shows how you can pass the id of the clicked button back to the controller. The controller will need to be a little different though
public PartialViewResult PopulatePartial(int ID){
var Model = //populate your model based on the passed id
return PartialView("PartialViewName", Model);
}

Append HTML in angular js giving errors

I am a newbie in angularjs and was trying to append the data in the view on click event.
The following is the code I have written:
Html
<div id="space-for-buttons">
<input type="hidden" id="hdnTopRatedPage" value="0" ng-update-hidden>
<div class='item' ng-repeat='p in programs.rated' home-tab-item watchable="p" ></div>
</div>
<div class = 'rated-spin' ng-show = 'programs.rated == 0 && ratedLoaded == false'> </div>
<div ng-show="programs.rated == 0 && ratedLoaded == true" class="noResultsBlock">No Results for Rated.</div>
<div class='clearfix'></div>
<div ng-controller="MainCtrl" ng-app="woi">
<yes style='background-color: brown;padding-right: 61px;'></yes>
</div>
Directive:
var pageno=1;
function MainCtrl($scope) {
$scope.count = 0;
}
//Directive that returns an element which adds buttons on click which show an alert on click.Here we can put
woi.directive("yes",['userAPI','$rootScope', function(userAPI,$rootScope){
return {
restrict: "E",
template: "<a ng-click='str()' addbuttons>please click on me</a>"
}
}]);
//Directive for adding buttons on click that show an alert on click
woi.directive("addbuttons",['$rootScope','userAPI','$compile', function($rootScope,userAPI,$compile){
return function(scope, element, attrs){
element.bind("click", function(){
scope.count++;
alert("hII")
//var abc= scope.loadRated(pageno);
userAPI.topRated({userid: $rootScope.getUser().userid}, function (r, $scope, div){
if(!$rootScope.device.isMobile && !$rootScope.device.isTablet && !$rootScope.device.isTouch ) {
var topRatedList = r.gettopratedhomepage.topratedprogrammelist;
console.log(r)
var str='';
for(var i=0;i<topRatedList.length;i++)
{
// str+="topRatedList[i].actualname";
var programNameEncode= topRatedList[i].programmename // | encodeUrl;
var program=topRatedList[i].programmename;
var channelId=topRatedList[i].channelid;
var programId=topRatedList[i].programmeid;
var channel=topRatedList[i].channeldisplayname;
var channelNameEncode=topRatedList[i].channeldisplayname //| encodeUrl;
var startTime=topRatedList[i].starttime;
var favourite=topRatedList[i].isfavorite;
var reminder=topRatedList[i].isreminder;
var watchlist=topRatedList[i].iswatchlist;
var duration=topRatedList[i].duration;
var imageFile=topRatedList[i].imagefilepath;
var startTime= topRatedList[i].starttime;
var duration= topRatedList[i].duration;
var isReco=topRatedList[i].isrecommended; // This is for reco
str+=" <div class='item'>" ;
str+="<div class=\"thumb\">";
// str+="<div ng-show=\""+isReco=='1'+"\" class=\"favorite-ribbon\"></div>";
str+="<div class=\"player\"></div>";
str+="<div class='image' style='background-image:url('"+imageFile+"');'>";
str+="<img src='"+imageFile+"'/>";
str+="<a ng-click=\'playVideo("+program+"\,$event)' ng-show='hasVideo()' class='play' style='cursor:pointer'></a>";
str+= "<a ng-href=\"#!/program/"+programNameEncode+"\" ng-show=\"!hasVideo()\" class=\"noPlay\" ng-click=\"EncodeUrlWithDash("+program+",$event,'programme',"+channelId+","+programId+","+startTime+")\"></a></div>";
str+="<span class='time' ng-show='duration'>\""+duration+"\"</span>";
str+="<div class='user-actions' ng-controller='UserController'>";
str+="<a live-tooltip='Add to Favorite' ng-click='toggleFavorite(p, $event)' class='btn btn-small btn-purple-blue' ng-class=\""+{active:favourite == '1'}+"\>";
str+="<i class='icon-favorite'></i></a>";
str+="<a live-tooltip='Reminder Alerts' ng-click='toggleReminder(p, $event)' class='btn btn-small btn-purple-blue' ng-class=\""+{active:reminder == '1'}+"\>";
str+="<i class='icon-reminder'></i></a>";
str+="<a live-tooltip='Add to Watchlist' ng-click='addToWatchlist(p, $event)' class='btn btn-small btn-purple-blue' ng-class=\""+{active:watchlist == '1'}+"\>";
str+="<i class='icon-watchlist'></i></a></div>"; //end of user controller div
str+="</div>"; // end of thumb div
str+="<div class='text-wrapper'>";
str+="<h2 multiline-overflow><a title='"+program+"' href='#!/program/"+programNameEncode+"' ng-click=\""+"EncodeUrlWithDash("+program+",$event,'programme',"+channelId+","+programId+","+startTime+")"+"/ >\""+program+"\"</a></h2>";
str+="<p class='infoChannel' live-tooltip-single-line= '{{channel}}'><a href='#!/channel/"+channelNameEncode+"' ng-click=\""+"EncodeUrlWithDash("+channel+",$event,'channel',"+channelId+","+programId+")"+"/>\""+channel+"\"</a></p>";
str+="<p class='info'>\""+startTime+"\"</p>";
str+="</div></div>"; //end of the main div
//EXTRA LINE
// str+=" <div class='item' ng-repeat='topRatedList[i] in programs.rated' home-tab-item watchable='topRatedList[i]' ></div>" ;
alert("The below value is of str")
alert(str);
angular.element(document.getElementById('space-for-buttons')).append($compile(str)(scope));
}
alert("The below value is of str")
// The above code is required to append data into the division(loadrated)..
}
});
});
};
}]);
however the code is running properly(ie it goes through the entire directive)..But data is not displayed ie appending.
Instead it goes into another directive which I have called hometab directive and giving issues.
I dont know why this is happening.
Please help me out

It would be much easier for you to create a Plunker for this issue here
Concerning your directive, without having full access to your files, it is considered good practice to hold all functionality and styles within the scope of it. Therefore, the only thing that should be in the HTML is the directive element only. Everything else, should thus be within the directive js.
Just as well, your ng-show/hide have very intensive expressions within them. I would try and chop'em down a bit. Additionally, the HTML syntax with quotes are using " " in some instances and ' ' with mixed spaces in others.
I have seen this throw errors in the past, though it is valid to use single or double. The preferred usage is the double quotes "" on everything in HTML and single quotes for JS files. I would just make sure you are using one or the other and not both.
You can check this article about the specific rules here