Ran into a bit of a problem with combining Laravel and Vue.js to populate a table.
Essentially, I was trying to use the v-repeat property in combination with a http:get request using the vue-resources extension. The problem is that no values appear to be getting passed through by Vue - I simply get the {{first_name}} and {{email_address}} in brackets.
I can confirm that the API method that is called by the http:get request is in fact spitting out data (manually accessing the URL in the browser reveals data).
Here is the code in the routes.php file that is responsible for outputting the data:
get('api/v1_users',function()
{
return App\User::all()->toJson();
});
And here is what it spits out in the browser:
[{"email_address":"test123#gmail.com,"first_name":"John","password":"test123"}]
The Chrome console displays no errors nor warnings.
Here is my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
<!-- Custom styles for this template -->
{!! Html::style('css/navbar.css') !!}
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Password Operations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="inactive">Reset New User</li>
<li class="inactive">Pending Users</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Pending 1.0 Users</h1>
<p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div id = "user">
<tr v-repeat = "user: v1_user">
<td>
#{{ first_name }}
</td>
<td>
#{{ email_address }}
</td>
<td>
<button type="button" class="btn btn-success">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
<div class="jumbotron">
<h1>Pending 2.0 Users</h1>
<p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div>
<tr v-repeat = "user: v1_user">
<td>
#{{user.first_name}}
</td>
<td>
#{{user.email_address}}
</td>
<td>
<button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Vue.js file REP -->
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<!-- Main Vue file-->
<script src="/js/main.js"></script>
</body>
</html>
Here is the accompanying javascript file with the Vue.js code: (main.js)
new Vue({
el: "#user",
data:
{
v1_user:[],
},
ready : function()
{
this.fetchV1IntermediaryUsers();
},
methods:
{
fetchV1IntermediaryUsers: function() {
this.$http.get('/api/v1_users',function(v1users) {
this.$set('v1_user',v1users);
});
}
}
});
You have multiple DIV's with the same ID's. ID's in HTML must be unique. When you start a VUE instance you bind it to an element, in this case which is in your code twice. Remove the ID's and add an ID to the <Body> tag, then check your code.
Related
As indicated I have 2 tables that have similar content... the only difference is the 'watchlist has an extra 'reason field
what I'm trying to achieve is moving the selected data from 1 table to another table and adding ...
so the process is like
I need to select the row of data and click the button 'add to watchlist ' and input the 'reason' then submit the form. but after I have to click the submit button the following error occurs.. may I ask what part I miss? sorry, I'm just new in Laravel .. Really appreciate any help.
here is my controller
public function AddToWatchlist(Request $request, $id)
{
$watchlist = new watchlist();
//Select the data from visitor
$record = DB::table('visitors')
->select('firstname')
->select('lastname')
->select('email')
->select('phonenumber')
->where('id',$id)
->first();
//Insert data from visitor to watchlist
DB::table('watchlist')->insert([
'firstname' => $record->firstname,
'lastname' => $record->lastname,
'email' => $record->email,
'phonenumber' => $record->phonenumber,
'reason' => $request->reason
]);
//Delete the data from visitor after shifted
$record->delete();
$watchlist->save();
return redirect('visitor.visitorlist')>with('status','Student Image Added Successfully' );
}
my viewpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if(session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"></td>
<td>{{ $item->id}}</td>
<td>{{ $item->firstname}}</td>
<td>{{ $item->lastname}}</td>
<td>{{ $item->email}}</td>
<td>{{ $item->phonenumber}}</td>
<!-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> -->
</tr>
#endforeach
</tbody>
</table>
<!-- Modal -->
<form action="{{ url('addtowatch/'.$visitor->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to watchlist</label>
<input type="text" name="reason " class="form-control" name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
my web.php code
Route::post('addtowatch/{id}', [WatchlistController::class, 'AddToWatchlist']);
update new problem
now the problem are being solve but there is no error ,on getting the property item of 'firstname'.. any idea ?
ok i got your point.
Please use the laravel comment {{-- body --}} instead of the because it is the blade template engine, not your html file.
Your mistake is that you call the modal outside your foreach loop,
so that the visitor id not found because it is the array not model.
so...
Replace your blade file code with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if (session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach ($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value=""
id="flexCheckDefault"></td>
<td>{{ $item->id }}</td>
<td>{{ $item->firstname }}</td>
<td>{{ $item->lastname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phonenumber }}</td>
{{-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> --}}
</tr>
<!-- Modal -->
<form action="{{ url('addtowatch/' . $item->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to
watchlist</label>
<input type="text" name="reason " class="form-control"
name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</form>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js"></script>
</body>
</html>
Really scratching my head on this one. I'm hoping a fresh pair of eyes can spot my error.
I've got a section heading on each page, but the heading is only showing on home.blade.php but not other pages.
master.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>#yield('title')</title>
#stack('styles')
</head>
<body class="bg-light">
<div class="container-fluid h-100">
#yield('app')
</div>
#include('sweetalert::alert')
{{ Session::forget('alert') }}
#stack('scripts')
</body>
</html>
app.blade.php
#extends('layout.master')
#prepend('styles')
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/overrides.css') }}" />
#endprepend
#section('app')
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
#if (Request::path() === '/')
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4> <!-- [my #yield directive is here] -->
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
#endif
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content')
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
#endsection
#prepend('scripts')
#include('layout.js.footer-js')
#yield('form-js')
#endprepend
home.blade.php
#extends('layout.app')
#section('title', 'Asset Management')
#section('content-heading', 'View All Assets') //This works
#section('content')
<div class="table-responsive">
<table class="table table-striped text-nowrap">
<caption>Recently Added Assets</caption>
<thead>
<tr>
<th scope="col">Tag #</th>
<th scope="col">Type</th>
<th scope="col">Device</th>
<th scope="col">Serial #</th>
<th scope="col">Assigned</th>
<th scope="col">To</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
#foreach ($assets as $asset)
<tr>
<td>{{ $asset->asset_tag }}</td>
<td>{{ $asset->cat_name }}</td>
<td>{{ $asset->man_name }} {{ $asset->model_name }}</td>
<td>{{ $asset->serial }}</span></td>
<td>{{ \Carbon\Carbon::parse($asset->assign_date)->format('D M d, Y g:iA') }}</td>
<td>{{ $asset->name }}</td>
<td>{{ $asset->status }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endsection
#section('form-js')
#endsection
#push('scripts')
#endpush
My other pages are all laid out the same as home.blade.php, e.g:
#extends('layout.app')
#section('title', 'Checkout Asset')
#section('content-heading', 'Checkout Asset') //Does not output to template
#section('content')
Content here...
#endsection
#push('scripts')
#endpush
Why is <h4>#yield('content-heading')</h4> only working on home.blade.php?
The code which displays #yield('content-heading') is wrapped in:
#if (Request::path() === '/')
...
#endif
which is restricting the display to just that url.
:)
I want my modal to pop-up in a blade when the quantity of a stock item is below a specific number like 5. I have the modal but I don't know how to call/instantiate it. Help me please.
https://laracasts.com/discuss/channels/laravel/models-views-controllers There wasn't a solution in this dicussion, thats why I pleading for your assistance.
Here is my modal in index.blade.php:
<div class="modal fade" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content bg-danger">
<div class="modal-header">
<h4 class="modal-title">Danger Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Here is my controller:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sales Report</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
</head>
<body>
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<caption><h3>Sales Report</h3></caption>
<thead>
<tr>
<th>Sales ID</th>
<th>Stock ID</th>
<th>Product Name</th>
<th>Sale Quantity</th>
<th>Unit Selling Price</th>
<th>Total Sales Cost</th>
<th>Sold On</th>
</tr>
</thead>
<tbody>
#foreach($sales as $key => $sale)
<tr>
<td>{{$sale->sales_id}}</td>
<td>{{$sale->stock_id}}</td>
<td>{{$sale->product_name}}</td>
<td>{{$sale->sale_quantity}}</td>
<td>{{$sale->unit_selling_price}}</td>
<td>{{$sale->total_sales_cost}}</td>
<td>{{$sale->updated_at}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
</html>
Here is screenshot of the stock table:
screenshot of the stock table
I believe you have a controller to return your view. So, just count the stock items and return it as a variable to your view, like this:
$items = Stock::count();
return view('your-view')->with([
'itemsCount' => $items,
]);
Then, in your view, do something like this:
<input type='hidden' value='{{ $itemsCount }}' id="items-count">
<script>
$(document).ready(function(){
if($("#items-count").val() < 5) {
$("#your-modal-id").modal("show");
}
});
</script>
Update
To count a specific stock;
$items = Stock::where('stock_name', $stockName)->first()->stock_quantity;
//If you want to count every single stock, just do it with a for or foreach loop
return view('your-view')->with([
'itemsCount' => $items,
]);
Hope this helps.
I have a small application with two pages. After the login page, the first page is a table of contents with a list of videos from which the user can select a youtube video of their choice. When the user selects a video from the sidebar menu they are taken to the page where the video plays and I have included it in the code below. This app uses the xAPI Youtube Video Tracking - ADL on Github and it basically does as advertised sending any number of kinds of statements like launch, suspend, resume and completed. The issue though, is that it doesn't always send "launch" statements. For example, if I preview a video and decide that it is one that I want, I'll code it in. Then if I log in as John Doe and play it the first statement is "resume." Is this because I've previewed the video on my own and youtube somehow remembers this? Is there something with my code below that is causing this? If I code a youtube video in without previewing it, it seems to send a launch statement as one would expect it to. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Video</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/myStyles.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--optional logo-->
<div class="navbar-header">
<img src="images/justSyniverse.png" width="169" height="43">
</div>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" class="list-group">
<a href="tableOfContents.html" class="list-group-item active">
<i class="icon-dashboard"></i> Table of Contents
</a>
<!--************** Ansible *************-->
<!--***** Parent button ******-->
<a href="#ansible" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Ansible
<span class="badge bg_danger"></span>
</a>
<div id="ansible" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=What Is Ansible%3F&emCode=xMHVvHZ-Zn4" class="list-group-item">
<i class="icon-caret-right"></i> What is Ansible?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Getting Started&emCode=In9XI-3ByQ8" class="list-group-item">
<i class="icon-caret-right"></i> Getting Started
</a>
<a href="playVideoPage.html?Title=Concepts Explained&emCode=2jXHxkLBOHg" class="list-group-item">
<i class="icon-caret-right"></i> Concepts Explained
</a>
</div>
<!--************** end Ansible ************-->
<!--************** Chef *************-->
<!--***** Parent button ******-->
<a href="#chef" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Chef
<span class="badge bg_danger"></span>
</a>
<div id="chef" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=Overview of Chef&emCode=yh9osPQA_-k" class="list-group-item">
<i class="icon-caret-right"></i> Overview of Chef
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Install Chef&emCode=r3mN2M9n51Y" class="list-group-item">
<i class="icon-caret-right"></i> Install Chef
</a>
<a href="playVideoPage.html?Title=Setup a node %26 write to a cookbook&emCode=71Cq4bCxgDk" class="list-group-item">
<i class="icon-caret-right"></i> Setup a node & write to a cookbook
</a>
<a href="playVideoPage.html?Title=Client Run %26 expanding the cookbook&emCode=H3Ggublb378" class="list-group-item">
<i class="icon-caret-right"></i> Client Run & expanding the cookbook
</a>
</div>
<!--************** end Chef ************-->
<!--************** Docker ************-->
<!--***** Parent button ******-->
<a href="#docker" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Docker
<span class="badge bg_danger"></span>
</a>
<div id="docker" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=What Is Docker%3F&emCode=t9YuqwGYUUg" class="list-group-item">
<i class="icon-caret-right"></i> What is Docker?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Run a %27hello world%27 container&emCode=JBODRMslzAU" class="list-group-item">
<i class="icon-caret-right"></i> Run a 'Hello World' container
<span class="badge bg_danger"></span>
</a>
</div>
<!--************** end Docker ************-->
<!--Logout-->
<a href="#" id="logout" class="list-group-item">
<i class="icon-caret-right"></i> Logout
</a>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 id="myMainTitle">Video Plays here</h1>
<p>Lorem ipsum... </p>
<!--<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>-->
<!--Toggle Menu-->
<div id="player"></div>
<script type="text/javascript" src="lib/xapiwrapper.min.js"></script>
<script type="text/javascript" src="src/xapi-youtube-statements.js"></script>
<script type="text/javascript" src="src/videoprofile.js"></script>
<script>
<!--This pulls the variables from the url query string-->
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
<!--This creates a var from the youtube embed code-->
var video = urlParams["emCode"];
<!--This creates a variable of the actual youtube title-->
var videoTitle = urlParams["Title"];
$("#myMainTitle").text(videoTitle);
<!--We have to pull the global variables from localStorage-->
var name = localStorage.getItem('name');
var email = localStorage.getItem('email');
//var mEmail = email;
// var personName = name;
// "global" variables read by ADL.XAPIYoutubeStatements
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:" + email, "name":name},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video, "definition":{"name": {"en-US":videoTitle}} }
});
function initYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
initYT();
// Auth for the LRS
var conf = {
"endpoint" : "https://lrs.adlnet.gov/xapi/",
"auth" : "Basic " + toBase64("xapi-tools:xapi-tools"),
};
ADL.XAPIWrapper.changeConfig(conf);
/*
* Custom Callbacks
*/
ADL.XAPIYoutubeStatements.onPlayerReadyCallback = function(stmt) {
console.log("on ready callback");
}
// Dispatch Youtube statements with XAPIWrapper
ADL.XAPIYoutubeStatements.onStateChangeCallback = function(event, stmt) {
console.log(stmt);
if (stmt) {
stmt['timestamp'] = (new Date()).toISOString();
ADL.XAPIWrapper.sendStatement(stmt, function(){});
} else {
console.warn("no statement found in callback for event: " + event);
}
}
</script>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!