I'm developing an application with zend framework and i'd like to add dojo framework.
I've done the following :
Bootstrap.php :
public function _initViewHelpers()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$view->addHelperPath('Zend/Dojo/View/Helper',
'Zend_Dojo_View_Helper');
$view->dojo()->enable();
}
my layout.phtml
<?php echo $this->doctype() ?>
<html>
<head>
<?php echo $this->headTitle() ?>
<?php echo $this->headMeta() ?>
<?php echo $this->headLink() ?>
<?php echo $this->headStyle() ?>
<?php if ($this->dojo()->isEnabled()){
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.claro');
echo $this->dojo();
}
?>
<?php echo $this->headScript() ?>
</head>
<body class="claro">
<?php echo $this->layout()->content ?>
<?php echo $this->inlineScript() ?>
</body>
finally my index.phtml :
<script type="text/javascript">
dojo.addOnLoad(function() {
// our test data store for this example:
var store4 = new dojo.store.JsonRest({
target: '/guestbook/test'
});
storeData = new dojo.data.ItemFileReadStore(
{ data:store4 }
);
// set the layout structure:
var layout4 = [{
field: 'Title',
name: 'Title of Movie',
width: '200px'
},
{
field: 'Year',
name: 'Year',
width: '50px'
},
{
field: 'Producer',
name: 'Producer',
width: 'auto'
}];
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});
<div id="gridContainer4" style="width: 100%; height: 100%;">
</div>
<?php // setup required dojo elements:
$this->dojo()->enable()
->setDjConfigOption('parseOnLoad', true)
->requireModule('dojo.store.JsonRest')
->requireModule('dojo.data.ObjectStore')
->requireModule('dojo.data.ItemFileReadStore')
->requireModule('dojox.data.QueryReadStore')
->requireModule('dojox.grid.DataGrid')
->addStyleSheet('/js/dojox/grid/resources/claroGrid.css')
->addStyleSheet('/js/dojox/grid/resources/Grid.css'); ?>
when i'm trying to access the page localhost/guestbook, the page is rendered but no datagrid, it's like javascript is not enabled...
the url /guestbook/test return a json object.
And in firebug, there is no javascript error, the dojo.js is loaded, the dojo modules and the css too.
I don't understand what is happening !
Thanks :)
You are creating the grid and putting it in an unattached div. Instead, attach the grid gridContainer4
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
dojo.byId("gridContainer4"));
Related
I want to convert the bellow blade view to pdf document.
The blade view contains Canvasjs chart. The headers and paragraphs when i export the blade view show normally. But only the chart doesn't show.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Gold Reserves"
},
axisY: {
title: "Gold Reserves (in tonnes)"
},
data: [{
type: "column",
yValueFormatString: "#,##0.## tonnes",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
public function build()
{
$pdf = FacadesPdf::loadView('Mails.myTestMail',["details"=>$this->details]);
return $this->subject('Mail from UVARA ROI CALCULATOR.')
->attachData($pdf->output(),'report.pdf')
->view('Mails.myTestMail');
}
I am converting this on the Backend level, i know that i can make it using javascript, but i want to generate the view dynamically and export as pdf and send it by email.
Thanks in advance.
I am working on a report and it is very static. I was asked to change some of the numbers into a pie-chart or cool graph. So been looking at canvasjs but cannot figure it out.
The code I work with simple
<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
[/remove-if-empty]
The output is very basic
Average Pagespeed 39 / 100
I want to learn how to transform this into a pie-chart and spice it up a little. If just know how it fits together, I can figure this out for the other values I think.
Can someone guide me?
This is my attempt : I am new to coding as you can see
<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
<?php
$dataPoints = array(
array("label"=>"Speed", "y"=>[pagespeed.average.desktop]),
array("label"=>"Optimal", "y"=>100),
)
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Page Speed"
},
subtitles: [{
text: "November 2017"
}],
data: [{
type: "pie",
yValueFormatString: "#,##0.00\"%\"",
indexLabel: "{label} ({y})",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
[/remove-if-empty]
I get error 500 internal server error
I want to display database error to view, so far i can produce the response only in chrome network response
Model classes, I omit the constructor
class Size_mdl extends MY_Model {
public function create($data) {
return $this->insert($data);
}
}
class MY_Model extends CI_Model {
public function insert($data) {
$success = $this->db->insert($this->table_name, $data);
if ($success) {
return true;
} else {
$msg = $this->db->error();
return $msg;
}
}
controller
$data['test_r'] = var_dump($this->Size_mdl->create($data));
$this->load->view('size/create_size_view',$data);
View
This is Welcome.php, the most outer with header and footer
<div class="page">
<!-- Page Header-->
<header class="page-head"></header>
<!-- Page Content-->
<main id="main_content" class="page-content"></main>
<!-- Page Footer-->
<footer class="page-foot section-60 section-xl-150 text-center text-lg-left">
Inside that page i have create_size_view loaded to main_content, previously it was homepage, bunch of stuff.
<head>
<style>
</style>
</head>
<body>
<div id="container">
<div id="content">
<h5>Create New Size</h5>
<div id="inner_container">
<div id="create_part">
<?php
if (isset($test_r)){
echo $test_r;
}?>
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'create_size_form');
echo form_open("size/create", $attributes);
?>
<p>
<?php echo lang('size_short_name_label', 'short_name'); ?>
<?php
$short_name = array(
'name' => 'short_name',
'id' => 'short_name',
'maxlength' => '100'
);
echo form_input($short_name);?>
</p>
<p>
<?php echo lang('size_long_name_label', 'long_name'); ?>
<?php
$long_name = array(
'name' => 'long_name',
'id' => 'long_name',
'maxlength' => '100',
);
echo form_input($long_name);?>
</p>
<p>
<?php echo form_submit('submit', lang('create_size_submit_btn')); ?>
</p>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
<script>
$('form#create_size_form').submit(function (e) {
var form = $(this);
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo site_url('size/create'); ?>",
data: form.serialize(), // <--- THIS IS THE CHANGE
dataType: "html",
success: function (result) {
$('#main_content').html(result);
},
});
});
</script>
</body>
Now i need the response for failed insert appear replacing main_content welcome.php or its children div from create_size_view.php. I can produce the successful insert by reloading create_size_view.php
In Codeigniter predefined error handler for MySQL.
if error encountered Codeigniter throw HTML content with 500 server site error
for avoiding this page 500 status code put Codeigniter ENVIRONMENT in production then your code will work properly.
change ajax url property. use url like "/size/create" dont use whith domain like "www.site.com/size/create";
use text for binding data
$.ajax({
type: "POST",
url: "<?php echo site_url('size/create'); ?>",
data: form.serialize(), // <--- THIS IS THE CHANGE
dataType: "html",
success: function (result) {
$('#main_content').text(result);
}
});
Fuel UX is here:
http://exacttarget.github.com/fuelux/
Specifically i'm trying to use the Datagrid.
Here's an example:
http://code.exacttarget.com/code-examples/datagrid.html
I've attempted to recreated this:
https://raw.github.com/ExactTarget/fuelux/master/sample/data.js
And just output it through the PHP file. I was able to get PHP to correctly output the correct data and just dumped it into the main file so the data.js file is now output in the main PHP/HTML file with all my information in the header using these tags:
<script></script>
And used the sample markup from the GitHub website.
I can't seem to get it to work correctly, is there another way to import data from PHP to the datagrid? Should some of the code for the data.js be changed since it is now being output in the main php/html file?
Basically attempting to pull data from MySQL using PHP and then dump it into a data grid. I can't seem to find much documentation and I guess my real question would be what is the best way to import data from my php application into the Fuel UX Datagrid?
With php / mysql write to data.js, use sample/data.js as an example. (or rename your .php to data.js and parse as php (Parse js/css as a PHP file using htaccess)).
setting fuelux datagrid source from backbone collection gives the right direction.
Presume you got a data databases table with the fields: id, title and city and you want to show this in the datagrid.
Create php file which return json format from your mysql (example):
data.php:
<?
error_reporting(E_ALL);
ini_set('report_errors','on');
$mysqli = new mysqli('localhost', 'root', '*******', 'cities');
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') '
. $mysqli->connect_error);
}
$data = array();
if ($result = $mysqli->query('SELECT `id`,`title`,`city` FROM `poi`'))
{
//$data['testdata'] = mysqli_fetch_all($result,MYSQLI_ASSOC);
while(($row=$result->fetch_assoc())){$data[]=$row;}
$result->close();
}
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($data);
exit;
create a static datasource testdatasource.js:
/*
* Fuel UX Data components - static data source
* https://github.com/ExactTarget/fuelux-data
*
* Copyright (c) 2012 ExactTarget
* Licensed under the MIT license.
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['underscore'], factory);
} else {
root.TestDataSource = factory();
}
}(this, function () {
var TestDataSource = function (options) {
this._formatter = options.formatter;
this._columns = options.columns;
this._delay = options.delay || 0;
};
TestDataSource.prototype = {
columns: function () {
return this._columns;
},
data: function (options, callback) {
var self = this;
setTimeout(function () {
var data;
$.ajax({
url: '/data.php',
dataType: 'json',
async: false,
success: function(result) {
data = result;
}
});
// SEARCHING
if (options.search) {
data = _.filter(data, function (item) {
var match = false;
_.each(item, function (prop) {
if (_.isString(prop) || _.isFinite(prop)) {
if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
}
});
return match;
});
}
var count = data.length;
// SORTING
if (options.sortProperty) {
data = _.sortBy(data, options.sortProperty);
if (options.sortDirection === 'desc') data.reverse();
}
// PAGING
var startIndex = options.pageIndex * options.pageSize;
var endIndex = startIndex + options.pageSize;
var end = (endIndex > count) ? count : endIndex;
var pages = Math.ceil(count / options.pageSize);
var page = options.pageIndex + 1;
var start = startIndex + 1;
data = data.slice(startIndex, endIndex);
if (self._formatter) self._formatter(data);
callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });
}, this._delay)
}
};
return TestDataSource;
}));
This builds a data set from data.php $.ajax({
url: '/data.php',
dataType: 'json',
async: false,
success: function(result) {
data = result;
}
});
In your html call your data set and create the columns:
var dataSource = new TestDataSource({
columns: [
{
property: 'id',
label: 'ID',
sortable: true
},
{
property: 'title',
label: 'Title',
sortable: true
},
{
property: 'city',
label: 'City',
sortable: true
}
],
delay: 250
});
Initialize the grid grid with this data source:
$('#MyGrid').datagrid({
dataSource: dataSource
});
Get the datagrid working:
download the source (zip) from and extract to /fuelux-master/
create /index.html
index.html:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./fuelux-master/dist/css/fuelux.css" rel="stylesheet">
<script src="./fuelux-master/lib/require.js"></script>
<style type="text/css">
body {
padding-bottom: 200px;
}
</style>
<script>
requirejs.config({
paths: {
'jquery': './fuelux-master/lib/jquery',
'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
'bootstrap': './fuelux-master/lib/bootstrap/js',
'fuelux': './fuelux-master/src',
'sample': './fuelux-master/sample'
}
});
require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'],
function ($, sampleData, StaticDataSource,datasourceTree) {
// DATAGRID
var dataSource = new StaticDataSource({
columns: [
{
property: 'toponymName',
label: 'Name',
sortable: true
},
{
property: 'countrycode',
label: 'Country',
sortable: true
},
{
property: 'population',
label: 'Population',
sortable: true
},
{
property: 'fcodeName',
label: 'Type',
sortable: true
}
],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource
});
});
</script>
</head>
<body>
<div class="container">
<!-- DATAGRID -->
<table id="MyGrid" class="table table-bordered datagrid">
<thead>
<tr>
<th>
<span class="datagrid-header-title">Geographic Data Sample</span>
<div class="datagrid-header-left">
<div class="input-append search datagrid-search">
<input type="text" class="input-medium" placeholder="Search">
<button class="btn"><i class="icon-search"></i></button>
</div>
</div>
<div class="datagrid-header-right">
<div class="select filter" data-resize="auto">
<button data-toggle="dropdown" class="btn dropdown-toggle">
<span class="dropdown-label"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-value="all" data-selected="true">All</li>
<li data-value="lt5m">Population < 5M</li>
<li data-value="gte5m">Population >= 5M</li>
</ul>
</div>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="datagrid-footer-left" style="display:none;">
<div class="grid-controls">
<span>
<span class="grid-start"></span> -
<span class="grid-end"></span> of
<span class="grid-count"></span>
</span>
<div class="select grid-pagesize" data-resize="auto">
<button data-toggle="dropdown" class="btn dropdown-toggle">
<span class="dropdown-label"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-value="5" data-selected="true">5</li>
<li data-value="10">10</li>
<li data-value="20">20</li>
<li data-value="50">50</li>
<li data-value="100">100</li>
</ul>
</div>
<span>Per Page</span>
</div>
</div>
<div class="datagrid-footer-right" style="display:none;">
<div class="grid-pager">
<button type="button" class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
<span>Page</span>
<div class="input-append dropdown combobox">
<input class="span1" type="text">
<button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
<ul class="dropdown-menu"></ul>
</div>
<span>of <span class="grid-pages"></span></span>
<button type="button" class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
see ./fuelux-master/ in the paths of the requirejs config. Also see the initializations of var dataSource to define your columns. At least you needto write the full html of the table with id="MyGrid".
Some refactoring and use of CDNs example: http://plnkr.co/hZRjry5vG8ZcOG4VbjNq
use bootstrap and jQuery via CDN with requirejs, see Loading Bootstrap from CDN with Require.js
replace the include of all.js with datagrid.js (note the datagrid won't work without select.js and util.js is required for select.js)
remove sample/datasourceTree cause we don't need it
I wonder whether someone may be able to help me please.
The code below allows users to delete images from a gallery.
Full Script Minus Styling
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
//echo $_SESSION['userid'];
//echo $_SESSION['locationid'];
?>
<?php
$galleryPath = 'UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.3">
<title>Galleria Twelve Theme</title>
<style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script src="galleria/galleria-1.2.7.min.js"></script>
<script src="galleria/themes/twelve/galleria.twelve.min.js"></script>
<script src="galleria/plugins/history/galleria.history.min.js"></script>
<link rel="stylesheet" href="galleria/themes/twelve/galleria.twelve.css">
<style>
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute; bottom : 0px; /*align at the bottom*/
width: 80px;
height: 17px;
cursor: pointer;
background: url(trash8.gif) no-repeat bottom; }
</style>
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var userid=$(".hiddenvals").attr('userid');
var locationid=$(".hiddenvals").attr('locationid');
// send the AJAX request
$.ajax({
url : 'delete3.php?userid='+userid+'&locationid='+locationid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
</head>
<body>
<ul id="navigation">
<li class="left">
<div align="center">← Add Images</div>
</li>
</ul>
<form id="viewimages" name="viewimages" class="page" action="index.php" method="post"> <input name="userid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['userid']; ?>"> <input name="locationid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['locationid']; ?>"></form>
<div class="content">
<h1>Galleria Twelve Theme</h1>
<p>Demonstrating a simple example.</p>
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
<div id="galleria">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
?>
<img data-title="<b>Image Name: </b> <?php echo $name; ?>" data-description="<b>Description:</b> <?php echo $description; ?>" src="<?php echo $source; ?>">
<?php endfor; ?>
</body>
</html>
In essence, the user clicks on a delete icon, then the 'delete.php' script called in the code above deletes the image from the server. This all works well.
What I'm struggling with is how to pass two variable values to the 'delete.php' script. These are 'userid' and 'locationid'.
I've tried adding the following to the beginning of my 'delete.php':
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
But the values are not carried over. I suspect that this may be down to the fact the the forms 'POST' action is being used to navigate to another HTML page, although I'm no expert, so I may have got this wrong.
I've done quite a bit of reading and searched for tutorials on how to go about getting around this problem, but I've not found anything that seems to suggest a solution.
I just wondered whether someone may be able to look at this please, and offers some guidance on how I can pass these two values to my 'delete.php' script.
Many thanks and kind regards
If they are in the html page add them to the ajax request:
{ image : img.attr('src'), userid: "VALUE", locationid: "VALUE"},
Try to send ids from your html page like
$.ajax({
url : 'delete.php?userid=2&locationid=4',
........
Then in php
$uid=$_POST['userid'];
$locid=$_POST['locationid'];
If you want to get userid and locationid dynamically for each image.
FIRST; in you btn-delete class add uid and locid attribute. I suppose you are looping through PHP.
LIKE ===>
<input type="button" class="btn-delete" uid="2" locid="5">
Then in your script
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var uid=$(this).attr('uid');
var locid=$(this).attr('locid');
// send the AJAX request
$.ajax({
url : 'delete.php?userid='+uid+'&locationid='+locid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
var id=$(this).attr('id');
var userid=$('#userid').val();
var locationid=$('#locationid').val();
$.ajax({
url : 'delete.php',
type : 'post',
dataType : 'json',
data : { image : img.attr('src'), userid: userid, locationid: locationid},
,
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
add dataType : 'json' and get posted value in delete.php by
$userid=$_POST['userid'];
$locationid=$_POST['locationid'];