I am using mustache for both JS and PHP, I have created one template for JS now I want to use that template in PHP. Is is possible to reuse that template?
For reference see the below code:
JS template:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
PHP template:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody id="eTableList">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</tbody>
</table>
The output of both the templates is same, but I am calling them according to my need using PHP or JS.
So is there a way to use single template instead of above two templates which can be used in both the calls, ie JS and PHP?
Yes you can, since the location of the template is accessible for PHP at server side and Javascript at client side.
You could have the template file at a subfolder of your public access, for example:
public
-- index.php
-- assets
-- -- img (your client side images)
-- -- css (your styles)
-- -- templates
-- -- -- my_template.tpl
-- -- js (your javascript)
Then when you gonna use it in js script, call from relative path ../templates/my_template.tpl, and in PHP, call from absolute path, something like MY_ROOT_APP_CONSTANT . "assets/templates/my_template.tpl"
Hope this help you.
Best regards
Related
I want to extract content from a table within a website that appears to be generated after the website loads using Python. Some excerpts from the html code of the website:
I believe this displays the table:
<table class="table table-condensed table-bordered hoverRowHand" id="contentTable">
<thead>
<tr>
<th width="5%"> </th>
<th width="10%">Date Uploaded</th>
<th width="10%">Survey ID</th>
<th width="5%">Airport ID</th>
<th width="20%">Airport</th>
<th width="10%">Survey Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And I believe running these scripts generates the contents for the table:
<script src="/global/js/nfdc-suite.js"></script>
<script src="/global/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="/global/js/date.js"></script>
<script src="/global/js/spin.min.js"></script>
<script src="/global/js/jquery.twbsPagination.js"></script>
<script src="/nfdcApps/include/main.js"></script>
<script src="/nfdcApps/services/publicData/uddfList-dt.js"></script>
<script src="/global/js/nfdcPublicDataTable.js"></script>
Simply getting the html of the website obviously does not provide any of the information I am looking for, since I believe it is first necessary to run the scripts which generate it.
Is this feasible to do with Python? Or is this something unreasonable to accomplish with Python.
Side note: If I use the "inspect element" tool in my Chrome browser I can see the content I am looking for.
I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>
I'm currently trying to change on a bootstrap table it's configurations dynamically, based on some user configurations stored in localStorage and reload it.
The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.
I took a look at the official documentation, and some questions in SO. And I tried to do it, as below:
var $table = $('#grd-fatura');
$table.bootstrapTable('refresh', {
pageSize: 2
});
(The localstorage.getItem block and rules were removed from above code for testing purposes.)
And here is my table code (note that some elements are in portuguese):
<table
id="grd-fatura" data-click-to-select="true" data-response-handler="responseHandler"
data-pagination="true" #*data-height="460"*# data-show-footer="true" data-search="true"
data-show-columns="true" data-cache="false" data-show-toggle="true" data-show-export="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true">Código</th>
<th data-field="estabelecimento" data-align="left" data-sortable="true">Estabelecimento</th>
<th data-field="historico" data-align="left" data-sortable="true">Histórico</th>
<th data-field="tipo" data-align="left" data-sortable="true">Tipo</th>
<th data-field="pessoa" data-align="left" data-sortable="true">Pessoa</th>
<th data-field="emissao" data-align="center" data-sortable="true">Emissão</th>
<th data-field="referencia" data-align="left" data-sortable="true">Referência</th>
<th data-field="situacao" data-align="left" data-sortable="true">Situação</th>
<th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador">Total</th>
</tr>
</thead>
</table>
The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at some examples, and could not find where I am going wrong. So, how do I dynamically change the Boostrap table settings? What I am doing wrong in the above code?
Note: I am using Bootstrap 3.
Try this:
$table.bootstrapTable('refresh', {
query: {pageSize: 2}
});
I have written a script to get HTML table data to JSON Object.
for this task I have used lightswitch05 jquery plugin.
In this code I can access a HTML table data in same web page in Javascript
using
var table = $('#example-table').tableToJSON();
but I need to access HTML table of external webpage.
Table URL is here - http://ccmcwolf.byethost4.com/index.html
how can I change the it to above "#example-table" to that external web page table ?
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script
src="http://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js">
</script>
<script>
function myFunction() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
}
$(document).ready(myFunction);
</script>
</head>
<body>
<table id='example-table' class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th data-override="Score">Points</th></tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td></tr>
</tbody>
</table>
</body>
</html>
Thank you very much!
Since, JavaScript has scope in the current page only (i.e. it can access and modify the content of the page where it is embedded or declared/linked using the script tag), I don't think there is any direct way of doing it.
But if that external page is on the same domain where your current JavaScript code is operating, you can always get the html by an Ajax call to the server and then run your code to extract the html table in JSON form.
Please, let me know if I am missing something and I will edit my answer based on your input.
Thank you.
I have a table that I want to append variable data to. I currently have the data in CSV format, and call the csv to HTML using PHP. The PHP call $line_of_text[10] allows me to access whatever data I want. However I need to do it client side not server side.
I have been looking into Javascript arrays, and these may or may not be the best idea. If there is code to parse the data, I would also need the actual code to call it from the HTML page, and put it into the table.
My table is like this: ( see JS Fiddle: http://jsfiddle.net/72jQR/2/)
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Size</td>
</tr>
</table>
And After the information from the csv or array or whatever - it looks like this:
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
<td>From DATA 12345</td>
</tr>
<tr>
<td>Description</td>
<td>From DATA</td>
</tr>
<tr>
<td>Size</td>
<td>500</td>
</tr>
</table>
What is the best way to do this client side?
This jQuery plugin should do it for you client-side: http://code.google.com/p/js-tables/
In particular see this page with an example: http://code.google.com/p/js-tables/wiki/Table
There is a CSV to HTML online service at:
http://okfnlabs.org/blog/2013/12/05/view-csv-with-data-pipes.html
There is also a very simple, lightweight javascript library here you could use: https://github.com/okfn/csv.js (very few dependencies)