I would like to display a template generated in my Meteor app on another website.
I had hoped to use an ajax call in the website to fetch the relevant meteor template and data, but I am struggling.
the website makes the call as follows:
<body>
<div id="result">
</div>
</body>
<script>
$( "#result" ).load( "http://myMeteorApp/get_template" );
</script>
In the Meteor app I have tried to return the template using iron-router:
Router.map(function () {
this.route('get_template', {
where: 'server',
path: 'get_template',
action: function () {
return 'get_template'
}
})
The template 'get_template.html' is in the 'private' folder.
<template name="get_template">
<table class="table table-hover table-condensed">
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
{{#each members}}
<tr>
<td>{{first_name}} {{last_name}}</td>
<td>{{email}}</td>
<td>{{mobile}}</td>
</tr>
{{/each}}
</table>
This does not work and I have a feeling I am barking up the wrong tree.
Maybe I ought to be using an iframe? But I prefer for the Meteor app to behave like an API and simply return the template.
Help appreciated.
https://github.com/EventedMind/iron-router#server-side-routing:
Server action functions (RouteControllers) have different properties
and methods available. Namely, there is no rendering on the server
yet.
Also, even if that was working there is a lot missing in your javascript:
You don't seem to specify anywhere the data to use in the template
The action function returns a string. What is this supposed to do?
I think your best bet is to use a server-side template engine such as meteor-handlebars-server and just manually render the template:
Router.map(function () {
this.route('serverFile', {
where: 'server',
path: '/get_template/:templatename',
action: function () {
var templatename = this.params.templatename;
this.response.writeHead(200, {'Content-Type': 'text/html'});
this.response.end(Handlebars.templates[templatename]({members: []}));
}
});
});
Inserting the data in the members field of the supplied object.
Related
I have a table with orders and order ids. I would like to click on a row to view the order details in another page. My code:
<form id="orderDetalsForm" th:action="#{/restaurant/orderdetails}"
method="POST" th:object="${order}">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Order Details</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr id="orderRow" th:each="order : ${orders}"
style="cursor: pointer"
th:onclick="'getOrderItems(\''+${order.orderId}+ '\');'">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td th:text="${grandTotal}"></td>
</tr>
</tbody>
</table>
</form>
I tried an ajax form submit:
<script>
function getOrderItems(orderId) {
var url = "/restaurant/orderdetails";
$.ajax({
url : url,
type : "post",
data : {
"orderId" : orderId
},
success : function(data) {
console.log(data);
},
error : function() {
console.log("There was an error");
}
});
}
</script>
In my controller I have this:
#PostMapping(value="/restaurant/orderdetails")
public ModelAndView orderDetails(#RequestParam String orderId){
List<Product> orderDetails = userService.getOrderDetails(orderId);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("orderDetails", orderDetails);
modelAndView.setViewName("restaurant/orderdetails");
return modelAndView;
}
While the ajax works, the page is not getting redirected to my orderdetails page.
You can't use AJAX to redirect to a page. AJAX is for getting data from the server that is then processed/displayed using JavaScript. You however basically want clicking on the row to behave like clicking a link or (since you are using a POST mapping) submitting a form.
First off, using POST makes this a bit more complicated. You should consider using a GET mapping, not only because it makes this problem easier, but also because a POST mapping isn't really appropriate here. POST is used to send data to the server, which you are not doing.
Another thing you should consider it that using a (pure) JavaScript solution to link the table row hinders accessibility. For example, users that can't/don't use a mouse (such as disabled people or search engines) won't be able to see or even use such a link. To solve this it is a good idea to add a proper link to the row. Then that link can used by "clicking" on it with the JavaScript of the click handler.
<tr th:each="order : ${orders}" onclick="orderRowClick(this)">
<td scope="row"><a th:href="#{/restaurant/orderdetails(orderId=${order.orderId})}" th:text="${order.orderId}"></a></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
<script>
// Look for a link in the row and click on it
function orderRowClick(row) {
row.querySelector("a").click();
}
</script>
Several more points:
IDs must be unique in HTML. By putting id="orderRow" on such a repeated row will result in invalid HTML.
You shouldn't be using on... attributes to assign event handlers. I'm just using it here or otherwise this answer will go too far.
Remove the <form> from around the table. It doesn't do anything.
If you do want to/have to use a POST mapping, then replace the link in the table row with a form with a hidden field containing the order ID and a submit button and in the JavaScript look for the form instead of the link and submit it: row.querySelector("form").submit();.
BTW there are several (possibly better) ways to do what you are trying. For example:
Forget the JavaScript and just put a link into every cell. With the right CSS the row/cells can be changed so that it looks like you are clicking on the row.
It seems like you are using Bootstrap, which has the "stretched link" feature. Unfortunately it's a bit tricky to get to work with table rows, but it's worth looking at.
What I've understand so far is that you want to redirect user to a new page when the user clicks on the button on the table, for that there're different approaches -
Issue with your approach -
Since you're using ajax it wont be redirecting user to a new page ( because thats exactly how a AJAX works, for more info on AJAX us this link - https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX ), unless you explicitly tells your ajax-code to redirect the user on a new page.
For that you can simply put your page redirection code to a on your ajax success, something like this -
<script>
//your code
$.ajax({
// your code
success : function(data) {
//page redirection code here
window.location.href = "your-base-URL/restaurant/orderdetails/orderId="+orderId;
},
error : function() {
console.log("There was an error");
}
});
}
</script>
PS - This is not efficient programming practice since you're technically making an extra call to your server un-necessarily.
Approach 2nd
Simply make your html table buttin a-href link , like this -
<html>
// your code
<a th:href="#{'/restaurant/orderdetails/orderId=' + ${order.orderId}}">Order details button </a>
//your rest of the code
</html>
Approach-3rd , You can alternatively use java-script function for page redirection as well, simply modify you ajax function , something like this -
function getOrderItems(orderId) {
//page redirection code here
window.location.href = "your-base-URL/restaurant/orderdetails/orderId="+orderId;
}
My problem is that when onclick() is triggered the first time, nothing happens, but when it is clicked a second time, the code is executed.
The onclick() should turn the <div> into a png image file and save it to the computer.
HTML (the TableDay function refers to a function I wrote which basically makes it easier to create the table):
<div id="TableDiv">
<table id="Table">
<tr>
<th>Dag\Uur</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<?php
TableDay("Maandag",1);
TableDay("Dinsdag",10);
TableDay("Woensdag",19);
TableDay("Donderdag",28);
TableDay("Vrijdag",37);
?>
</table>
</div>
<a id="Image" href="##" onclick="printTable()">Download</a>
(Text is Dutch)
The onclick="printTable()" refers to the following Javascript code:
<script>
var element = $("#TableDiv"); // global variable
var getCanvas; // global variable
function printTable() {
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
}});
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#Image").attr("download", "Rooster.png").attr("href", newData);
}
</script>
What is happening exactly and how can I make it so that the <a> reference in the html code only needs to be clicked once?
I am trying to implement ngtable in order to have out of the box filters and pagination but it seems not to be as easy to implement as they say.
My data is loading correctly in the table, however the actual filters are not responding at all. Below is my table code inside the MyCtrl:
<table ng-table="tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="movie in items.movies">
<td data-title="'Title'" filter="{ title: 'text'}" sortable="'title'">{{movie.title}}</td>
<td data-title="'Duration'" filter="{duration: 'number'}" sortable="'duration'">{{movie.duration | durationFilter | date:'HH:mm:ss'}} hrs</td>
</tr>
</table>
In the app.js I serve data factory to the controller then trigger the ng table:
app.controller('MyCtrl', function($scope, itemsFactory){
itemsFactory.getItems().success(function(data){
$scope.items = data;
tableParams = new NgTableParams({}, { data: data});
});
});
The result is that all the data is displayed and the input filters above the content, however, neither work. Is there something I am missing?
Supposing your HTML contains something like <table ng-table="tableParams", you want to assign your new NgTableParams to $scope.tableParams so the table can see them. Currently you are assigning a local variable.
Also, enable Javascript strict mode by "use strict". Avoids errors like that.
try to change your code
<tr ng-repeat="movie in items.movies">
to
<tr ng-repeat="movie in $data">
I have the app.js file where gmarkers is an array of objects :
var vm = new Vue({
el: '#lili',
data: {
listings: gmarkers
}
});
In my HTML file :
<div id="lili" >
<div
v-repeat="gmarker : listings"
class="listing listing-list col-sm-12"
style="height:50px;line-height:50px;"
data-cat="#{{gmarker.mycategory}}"
data-id="#{{gmarker.id}}"
>
<span style="color:black;">
<a target="_blank" href="#{{gmarker.listlink}}">
#{{ gmarker.listname }}
</a>
</span>
<span class="tag blue-back" style="margin-left:5px;">
<a target="_blank" href="#{{gmarker.catlink}}">
#{{gmarker.listcat}}
</a>
</span>
<span style="margin-left:20px;color:#bbb;">
#{{gmarker.distance}}km
</span>
</div>
</div>
When loading the page, the DOM loads correctly, displaying the list I'm looking for but when (after an ajax call in js) the gmarkers object changes, the DOM doesn't change.
The new gmarkers is totally created from scratch and containing new objects.
What am I missing ?
It sound like you are wrong about what data is being bound here. You are expecting data: {listings: gmarkers} to do binding between vm.listings and the gmarkers array. This isn't what it does. It copies the gmarkers data into the listings and doesn't listen to gmarkers anymore. See this fiddle for an example of what I think you are doing wrong.
We can fix the above fiddle by setting the vm.listings to the new array of objects after the ajax request.
vm.$set('listings', gmarkers);
You can see this in action in this updated fiddle.
It is actually pretty common to see a blank listings until ajax returns them. Here is some sample code that will call an ajax request when vue is ready and update the listings once it is finished. Note: this exampe uses vue-resources to perform the ajax request. You may not have this. You can always just use jQuery or javascript to perform this.
data: {
listings: []
},
ready: function () {
this.fetchListings();
},
methods: {
fetchListings: function () {
this.$http.get('/your/api/listings', function (response) {
this.$set('listings', response);
});
}
}
This fiddle shows the above code but pay attention to the differences required for the fake ajax request I used.
This may come off as a bit newb-ish, but I don't really know how to approach this.
Can anyone recommend me a way of delivering and image from a flask backend, after being called by an angular $http.get call?
Brief example of what I am trying to do.
//javascript code
myApp.controller('MyCtrl', function($scope, $http){
$http.get('/get_image/').success(function(data){
$scope.image = data;
});
});
#flask back end
#app.route('/get_image/', methods= ['GET', 'POST'])
def serve_image():
image_binary = get_image_binary() #returns a .png in raw bytes
return image_binary
<!-- html -->
<html ng-app= "myApp">
<div ng-controller= "MyCtrl">
{{ image }}
</div>
</html>
So as you can see, I am attempting to serve a raw-byte .png image from the flask backend, to the frontend.
I've tried something like this
<html>
<img src= "/get_image/">
</html>
But the trouble is, 'get_image_binary' takes a while to run, and the page loads before the image is ready to be served. I want the image to load asyncronously to the page, only when it is ready.
Again, I am sure there are many ways to do this, probably something built into angular itself, but it is sort of difficult to phrase this into a google-able search.
Can't speak to the flask stuff, but below is some AngularJS code.
This directive won't replace the source attribute until after Angular manipulates the DOM and the browser renders (AngularJS : $evalAsync vs $timeout).
HTML:
<div ng-controller="MyController">
<img lazy-load ll-src="http://i.imgur.com/WwPPm0p.jpg" />
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope) {})
.directive('lazyLoad', function($timeout) {
return {
restrict:'A',
scope: {},
link: function(scope, elem, attrs) {
$timeout(function(){ elem.attr('src', attrs.llSrc) });
},
}
});
Same code in a working JSFiddle