Need assistance with Handlebarsjs, template not working/rendering - javascript

Before testing Handlebarsjs for myself, I searched for some tutorial on YouTube and watched it. So basically I followed the example that was shown on the video, although for some reason mine's not working.
Below is the template script that is in my html file (also the container for the template).
<div id="recents">
<div id="recents-template-container" class="grid-container">
</div>
</div>
<script id="recents-template" type="text/x-handlebars-template">
{{#each jobposts}}
<div id="box-{{#key}}" class="recents-box flex-container">
<div class="box-row">
<span id="jobtitle">{{jobtitle}}</span>
</div>
<div class="box-row">
<span id="company">{{company}}</span>
</div>
<div class="box-row">
<span id="year">{{experience.year}}</span>
<span id="months">{{experience.months}}</span>
</div>
<div class="box-row">
<span id="location">{{location}}</span>
</div>
</div>
{{/each}}
</script>
<script type="module" src="src/js/index.js"></script>
Note: these two are at the end of the body tag.
And below is my index.js file
//index.js
import {recents} from "./query.js";
recents();
and query.js
//query.js
export function recents(){
const date = new Date();
const isoDate = `${date.getFullYear()}-0${(date.getMonth()+1)}-${date.getDate()}`;
const url = `http://localhost:3000/jobposts?dateposted_like=${isoDate}&_limit=5`;
$(document).ready(function() {
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data){
console.log(data);
createRecents(data);
},
error: function(data){
console.error(data);
}
});
function createRecents(data){
const template = $("#recents-template").html();
const compiledTemplate = Handlebars.compile(template);
const html = compiledTemplate(data);
$("#recents-template-container").html(html);
}
});
}
I also tried the template on the website of Handlebarjs, and it wworks. Is there something wrong in how I implemented it or how I coded it?
P.S. Sorry if my code looks bad.

Related

Ajax post in Laravel blade form not submitting

I'm trying to add some additional data to a form in my laravel blade using js and ajax post, but I can't get the form to submit. I've stripped everything else out to try to find what's wrong, but I'm mystified. Can anyone help?
My blade looks like this;
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-6 mt-5 mb-2">
<div class="card">
<div class="card-body">
<form id="payment-form">
<button id="card-button" class="btn btn-lg btn-block btn-success">
<span id="button-text"><i class="fas fa-credit-card mr-1"></i>{{ __('Add Payment Method') }}</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('javascript')
<script>
const cardButton = document.getElementById('card-button');
var form = document.getElementById('payment-form');
cardButton.addEventListener('click', function(event) {
// event.preventDefault();
console.log('On click check');
var payment = '1234';
$.ajax({
type: "POST",
url: "/payment-post",
data: {
payment: payment,
'_token': $('meta[name="csrf-token"]').attr('content'),
},
});
});
</script>
#endsection
You have to use like this
var payment = '1234';
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: "POST",
url: "{{url('')}}/payment-post",
dataType: "text",
data: {
payment: payment,
_token: CSRF_TOKEN
},
success: function (response) {
//Do something
}
});
In the end I tracked this down to 'defer' being present in the script tag in the header, which was stopping all the event listeners from working. Once I changed it to this
<script src="{{ asset('js/app.js') }}"></script>
everything working fine.

Vue.js on click method , not working on laravel project

As the code below , the vue.js component works correctly , but the on-click method does not work at all and there is no cached errors . it seems that the function does not get called . When webpack is disabled , the code works correctly.
The HTML code :
<div class="row my-4">
<div class="col-8">
<h5>{{price}} $$</h5>
</div>
<div class="col-4">
<button type="button" v-on:click="inquiry" class="btn btn-yui mx-auto btn-block">price</button>
</div>
</div>
Vue.js section
methods: {
inquiry: function(){
axios.post(`http://localhost:8000/api/brand/panel/get/price/plan`,this.form,{
headers: {'Accept': 'application/json'}
})
.then(response => {
this.price = response.data;
})
.catch(function (error) {
console.log(error);
});
},
You use
<script src="{{ asset('js/app.js') }}" defer></script>
or no need to mix or something under app.blade.php files.This line default call layouts/app.blade.php
it's work for me.
Thank you.

How to display value from SharePoint list to web page

I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.

data parsing not working in angularjs

I have tried to parse my JSON data to angular js app but parsing is not working on my wamp server.
When I click the submit button on login page, there is no response. Please advise where I made mistake in my code.
Controller.js:
var app = angular.module("empApp", []);
app.controller("emp", ['$scope', 'empService', function($scope, empService){
$scope.doSearch = function(){
empService.findEmployeeById($scope.searchEmpno, function(r){
$scope.empno = r.empno;
$scope.ename = r.ename;
$scope.edept = r.edept;
$scope.esal = r.esal;
});
};
}]);
app.service("empService", ['$http', '$log', function($http, $log){
this.findEmployeeById = function(empno, cb){
$http({
url: 'http://localhost/',
method: 'GET'
})
.then(function(resp){
cb(resp.data);
}, function(resp){
$log.error('Error occurred');
});
};
}
}]);
app.directive('empDetails', function(){
return {
templateUrl: 'emp-details.html'
}
});
HTML
<body ng-app="empApp">
<div class="container-fluid">
<div ng-controller="emp">
<form class="form-inline">
<div class="form-group">
<label>Enter Employee No:</label>
<input type="text" name="name" class="form-control" ng-model="searchEmpno"/>
</div>
<div>
<button type="button" class="btn btn-primary" ng-click="doSearch()">Click</button>
</div>
</form>
<hr>
<div emp-details ng-if="empno != undefined">
</div>
</div>
</div>
</body>
emp-details.html
<div class="panel panel-primary">
<div class="panel-heading">
<h3>Employee details</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-4"><strong>Employee No</strong></div>
<div class="col-sm-7">{{empno}}</div>
</div>
<div class="row">
<div class="col-sm-4"><strong>Name:</strong></div>
<div class="col-sm-7">{{ename}}</div>
</div>
<div class="row">
<div class="col-sm-4"><strong>Department:</strong></div>
<div class="col-sm-7">{{edept}}</div>
</div>
</div>
</div>
JSON:
{
"employee":{ "empno": 251, "name":"John", "age":30, "edept":"New York" }
}
Most of the issues are related to project structure and file organization.
I would recommend reading johnpapa-angular-styleguide for properly organizing and coding an angularJS application.
There are multiple changes needed.
You're not referencing your Controller.js file.
There is an additional } is there in your service
There is no file like data.json. You will need to create that file and reference it in your service.
$http({
url: 'data.json',
method: 'GET'
})
In your service you are returning resp.data. It should be resp.data.employee.
cb(resp.data.employee);
When you are referencing paths you should use relative URL.
See the working plnkr
Couple of this:
Change your URL from 'http://localhost/' to 'data.json'
In the callback, change resp.data to resp.data.employee. This will make sure you directly get access to the employee data.
Let me know if this helps.
Controller.js
$scope.doSearch = function(employeeN){
empService.findEmployeeById(employeeN)
.then(function(r){
$scope.empno = r.empno;
$scope.ename = r.ename;
$scope.edept = r.edept;
$scope.esal = r.esal;
});
};
Service
this.findEmployeeById = function(empno){
$http({
url: 'http://localhost/data.json',
method: 'GET'
})
.then(function(resp){
return resp.data.employee;
}, function(resp){
$log.error('Error occurred');
});
};
HTML
<div>
<button type="button" class="btn btn-primary" ng-click="doSearch(searchEmpno)">Click</button>
</div>

Append to class if hidden div value is equal to attribute from XML

I've searched and tried for 2 days now, with no luck whatsoever.
What i'm trying:
I generate several div's through a foreach in xslt, that contains a hidden div where i store a code to match value out of an external xml file on. Something like this:
<div class="pakket_content">
<a href="http://">
<div class="waardering_wrapper col-xs-12">
<div class="sterwaardering col-xs-8">
<img src="http://">
</div>
<div class="CODE">CODE</div>
<div class="waardering col-xs-4">
<p>-</p>
</div>
<div class="waardering pull-right">
<b>-</b>
</div>
</div>
</a>
<a href="">
<button type="button" class="btn btn-default btn-md pull-right col-xs-12">
Nu boeken!
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</a>
</div>
Where the div class 'code' contains the code to match on.
The xml that comes out of this is:
<entities>
<accommodation cms-id="458245" external-id="CODE" name="Trip A">
<destination cms-id="45541" name="Paramaribo" level="destination"/>
<country cms-id="4545" name="Suriname" level="country"/>
<accommodation-type>Hotel</accommodation-type>
<testimonial-count>88</testimonial-count>
<average-testimonial-score>7.6</average-testimonial-score>
<deep-link>
http://link.com
</deep-link>
<testimonial-count-per-language>88</testimonial-count-per-language>
<testimonial-count-all>88</testimonial-count-all>
<average-testimonial-score-all>7.6</average-testimonial-score-all>
</accommodation>
</entities>
Now i wanted to append the average-testimonial-score to div "waardering" when the external-id attribute in equals the value in . But how would i go about that?
I tried with looping through the value of the div class and the attribute, like this:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "file.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('accommodation').each(function(index) {
var cijfer = $(this).find('average-testimonial-score-all').text();
$('.CODE').each(function(index) {
var divcode = $(this).text();
$.attr('external-id').each(function(index) {
var attrcode = $(this).text();
if (divcode == attrcode) {
$(".waardering").append(cijfer);
};
});
});
});
}
});
});
With no result.
Can someone push me in the right direction with this?
Fetching accommodation external-id in correct way (according to how .attr() is supposed to work), the code works as it should.
I omitted Ajax request for testing.
Fiddle.
$(document).ready(function()
{
var xml = '<entities><accommodation cms-id="458245" external-id="CODE" name="Trip A"> <destination cms-id="45541" name="Paramaribo" level="destination"/> <country cms-id="4545" name="Suriname" level="country"/> <accommodation-type>Hotel</accommodation-type> <testimonial-count>88</testimonial-count> <average-testimonial-score>7.6</average-testimonial-score> <deep-link>http://link.com</deep-link> <testimonial-count-per-language>88</testimonial-count-per-language> <testimonial-count-all>88</testimonial-count-all> <average-testimonial-score-all>7.6</average-testimonial-score-all> </accommodation></entities>';
$(xml).find('accommodation').each(function(index)
{
var cijfer = $(this).find('average-testimonial-score-all').text();
var externalId = $(this).attr("external-id");
$('.CODE').each(function(index)
{
var divcode = $(this).text();
if (divcode == externalId)
{
$(".waardering").append(cijfer);
};
});
});
});

Categories