Basically I have a table and each rows have a Image icon which I want to turn into a drop pane. Any example code will be helpful.
Working example: http://jsfiddle.net/krystiangw/mb4o7kfc/1/
Js file:
$('td').each(function(e, element){
filepicker.makeDropPane(
element,
{
multiple: true,
dragEnter: function() {
$(element).html("Drop to upload").css({
'backgroundColor': "#E0E0E0",
'border': "1px solid #000"
});
},
dragLeave: function() {
$(element).html("Drop files here").css({
'backgroundColor': "#F6F6F6",
'border': "1px dashed #666"
});
},
onSuccess: function(Blobs) {
$(element).text(JSON.stringify(Blobs));
},
onError: function(type, message) {
$(element).text('('+type+') '+ message);
},
onProgress: function(percentage) {
$(element).text("Uploading ("+percentage+"%)");
}
}
);
});
Html file:
<table id="myTable" class="table table-bordered">
<tr>
<th>
Drag&drop panel
</th>
</tr>
<tr>
<td>
Drop files here
</td>
</tr>
<tr>
<td>
Or here
</td>
</tr>
<tr>
<td>
Or here
</td>
</tr>
</table>
Related
I'm creating a PDF file with the TCPDF library. The function worked fine on the old server, but when I installed it on a new host, I received the following error. I searched extensively and discovered numerous topics claiming that the error was caused by XHTML syntax.
A PHP Error was encountered
Severity: Warning
Message: Undefined array key "thead"
Filename: tcpdf/tcpdf.php
Line Number: 16571
Backtrace:
File: C:\xampp\htdocs\townteam\application\libraries\tcpdf\tcpdf.php
Line: 16571 Function: _error_handler
File: C:\xampp\htdocs\townteam\application\libraries\tcpdf\tcpdf.php
Line: 17272 Function: getHtmlDomArray
File: C:\xampp\htdocs\townteam\application\libraries\tcpdf\tcpdf.php
Line: 5859 Function: writeHTML
File: C:\xampp\htdocs\townteam\application\libraries\tcpdf\tcpdf.php
Line: 17167 Function: MultiCell
File: C:\xampp\htdocs\townteam\application\views\pdfMachineCard_v.php
Line: 165 Function: writeHTMLCell
File:
C:\xampp\htdocs\townteam\application\controllers\MachineCards.php
Line: 307 Function: view
File: C:\xampp\htdocs\townteam\index.php Line: 315 Function:
require_once
Code
<?php
//============================================================+
// File name : example_005.php
// Begin : 2008-03-04
// Last Update : 2013-05-14
//
// Description : Example 005 for TCPDF class
// Multicell
//
// Author: Nicola Asuni
//
// (c) Copyright:
// Nicola Asuni
// Tecnick.com LTD
// www.tecnick.com
// info#tecnick.com
//============================================================+
/**
* Creates an example PDF TEST document using TCPDF
* #package com.tecnick.tcpdf
* #abstract TCPDF - Example: Multicell
* #author Nicola Asuni
* #since 2008-03-04
*/
// Include the main TCPDF library (search for installation path).
//require_once('tcpdf_include.php');
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Mohamed Syam');
$pdf->SetTitle($user[0]['s_name']);
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
// set default header data
//PDF_HEADER_TITLE
$pdf->SetHeaderData($user[0]['s_logo'], '50', '', ''); // header of the file
//$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 005', PDF_HEADER_STRING); // header of the file
// set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP+10, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set some language-dependent strings (optional)
if (#file_exists(dirname(__FILE__).'/lang/eng.php')) {
require_once(dirname(__FILE__).'/lang/eng.php');
$pdf->setLanguageArray($l);
}
// ---------------------------------------------------------
// set font
$pdf->SetFont('times', '', 10);
// add a page
$pdf->AddPage();
// set cell padding
$pdf->setCellPaddings(1, 1, 1, 1);
// set cell margins
$pdf->setCellMargins(1, 1, 1, 1);
// set color for background
$pdf->SetFillColor(255, 255, 127);
// MultiCell($w, $h, $txt, $border=0, $align='J', $fill=0, $ln=1, $x='', $y='', $reseth=true, $stretch=0, $ishtml=false, $autopadding=true, $maxh=0)
// set some text for example
// set some text for example starting from here syam
$transactionNo="Machine Card No(# ".$head[0]['mc_id'].")";
$desc=$head[0]['mp_name'];
//$title=<<<EOD
//<h6> </h6>
//EOD;
$pdf->writeHTMLCell(0,0,'','',$transactionNo,0,1,0,true,'C',true);
$pdf->writeHTMLCell(0,0,'','',$desc,0,1,0,true,'C',true);
$name ='<table style="padding: 6px; text-align: left;font-size: x-small ;width: auto ">';
$name.='<tr>
<th style="border:1px solid #000;width:100px;background-color:#CCCCCC">Category</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['mac_cat']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;width:100px;background-color:#CCCCCC">Supplier</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['ms_name']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Class</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['mc_name']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Purpose</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['mp_name']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Delivery Date</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['mac_date']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Serial Number</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['a_code']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Factory Code</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['a_name']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Plant</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['loc_name']).'</th>
</tr>
<tr>
<th style="border:1px solid #000;background-color:#CCCCCC">Department</th>
<th style="border:1px solid #000">'.strtoupper ($head[0]['d_name']).'</th>
</tr> </table> <br><br>';
$table ='';
if(count($transactions) > 0){
$table.='<table style="border:1px solid #000;padding: 5px;"> <thead>';
$table.='<tr style="background-color:#CCCCCC">
<th style="border:1px solid #000;font-size: 10px">Date</th>
<th style="border:1px solid #000;font-size: 10px">Description</th>
<th style="border:1px solid #000;font-size: 10px">Installed Items [QTY]</th>
<th style="border:1px solid #000;font-size: 10px">Responsible</th>
</tr>';
$table.="</thead>";
}
foreach ($transactions as $row){
$table.='<tr>
<td style="border:1px solid #000;font-size: 10px">'.$row->mt_date.'</td>
<td style="border:1px solid #000;font-size: 10px">'.$row->mt_desc.'</td>
<td style="border:1px solid #000;font-size: 10px">'.$row->installed.'</td>
<td style="border:1px solid #000;font-size: 10px">'.$row->u_name.'</td>
</tr>';
}
$table .='</table>';
$pdf->writeHTMLCell(0,0,'','',$name,0,1,0,true,'L',true);
$pdf->writeHTMLCell(0,0,'','',$table,0,1,0,true,'C',true);
//c
// move pointer to last page
$pdf->lastPage();
// ---------------------------------------------------------
//Close and output PDF document
ob_clean();
//ob_end_clean();
$pdf->Output("MachineCard No#".$head[0]['a_code'].'.pdf', 'I');
//============================================================+
// END OF FILE
//============================================================+
Thanks
I'm currently a C# dotnet automation engineer. One of my tests results output is via email. My tests results output goes through powershell. I'm fairly new to email templates and HTML in general.
It's a simple HTML body with variables that I replace with $EmailBody= $EmailBody.Replace("PassedTests",$Passed) function etc
The whole premise: my script replaces Total tests/Passed/Failed/Skipped with data that I extract from a .trx file after the test run.
My extraction code:
$PassedTests = $testResultsXml.TestRun.ResultSummary.Counters.Passed
$FailedTests = $testResultsXml.TestRun.ResultSummary.Counters.Failed
$SkippedTests = $testResultsXml.TestRun.ResultSummary.Counters.Skipped
$OnlyFailed = $testResultsXml.TestRun.Results.UnitTestResult | Where-Object { $_.outcome -eq "Failed" }
$FailedTestsName = $OnlyFailed.TestName
I have the "Error list" table (picture below) that shows test names if there are any failed tests that in the HTML body
#</td>
</tr>
<!--end img-->
<tr>
<td height="15"></td>
</tr>
<!--title-->
<tr align="center">
<td align="center" style="font-family:
'Open Sans', Arial, sans-serif; font-size:16px;color:#3b3b3b;font-weight: bold;">**ERROR LIST**</td>
</tr>
<!--end title-->
<tr>
<td height="10"></td>
</tr>
<!--content-->
<tr align="center">
<td align="center" style="font-family: 'Open Sans', Arial, sans-serif; font-size:12px;color:#7f8c8d;line-height: 24px;">NoErrors</td>
</tr>
<!--end content-->
</table>
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
</table>
Now the main question is: is it somehow possible to ONLY show the "Error list" table only IF there are any failed tests? If there are no failed tests it would be great for that table not to be shown at all.
Any kind of help would be greatly appreciated. Thanks!
$EmailBody= $EmailBody.Replace("PassedTests",$Passed)
$EmailBody= $EmailBody.Replace("FailedTests",$Failed)
$EmailBody= $EmailBody.Replace("SkippedTests",$Skipped)
$EmailBody= $EmailBody.Replace("ErrorList",$FailedTestsName)
$Emailattachment = "\TestResults.trx"
You are on the good path.
You just need to extend what you are doing.
Remove the thing that might or might not be in the email (The "errors list" section as it won't be there if there are no error)
Put the section your removed in its own variable
Add a placeholder in your main html template at the location where it is supposed to be (just like you do already so we can do a replace in the html template.
From there, the logic is :
If there are 0 errors, you replace the placeholder from the main template by an empty string (you don't want that placeholder to appear in the final email)
If there are 1 or more error, instead of replacing by your error list, you build a new variable that contain the section you want to append, then you replace its loop by the errors content and finally you replace the placeholder by that section (which contains the error loop)
That would look something like this.
$EmailBody = #'
</td>
</tr>
<!--end img-->
<tr>
<td height="15"></td>
</tr>
**ErrorsTable**
'#
$ErrorListBody = #'
<!--title-->
<tr align="center">
<td align="center" style="font-family:
'Open Sans', Arial, sans-serif; font-size:16px;color:#3b3b3b;font-weight: bold;">**ERROR LIST**</td>
</tr>
<!--end title-->
<tr>
<td height="10"></td>
</tr>
<!--content-->
<tr align="center">
<td align="center" style="font-family: 'Open Sans', Arial, sans-serif; font-size:12px;color:#7f8c8d;line-height: 24px;">NoErrors</td>
</tr>
<!--end content-->
</table>
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
</table>
'#
if ($FailedTests.Count -gt 0) {
# inserting errors to the `$ErrorListBody` html segment
$ErrorsHtml = $ErrorListBody.Replace("ErrorList", $FailedTestsName)
# inserting the html segment into the main email
$EmailBody = $EmailBody.Replace("**ErrorsTable**", $ErrorsHtml)
} else {
# Removing the placeholder from the main template.
$EmailBody = $EmailBody.Replace("**ErrorsTable**", '')
}
I have created in data-table using bootstrap.
I have used data-table in ionic 3 website.
But problem was I use edit button in data-table
then first time it is working good .
After searching record it can not working click and not call method.
I'm get stuck please help me to solve this issue.
branch.html
<ion-content class="bgimg">
<ion-grid style="color: aliceblue">
<ion-row>
<ion-col col-8></ion-col>
<!--<ion-col col->-->
<!--</ion-col>-->
<ion-col col-2> <button float-end ion-button outline color="editcolor" style="color: white" (click)="addbranch()">Add</button></ion-col>
<ion-col col-1></ion-col>
</ion-row>
<ion-row>
<ion-col col-2></ion-col>
<ion-col col-8>
<div *ngIf="checkdatatable">
<table id="example12">
<thead>
<tr>
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);" width="20%">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize>Action</th>
</tr>
</thead>
<tfoot>
<tr >
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);" width="15%">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize width="20%">Action</th>
</tr>
</tfoot>
<tbody>
<tr style=" background:rgba(0,0,0,0.0); color: white;font-size: 16px" *ngFor="let item of branchlist" >
<td style="border: 1px solid rgba(255,255,255,0.5);">
<img src="{{item.image}}" height="100px">
</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.name}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.address}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.phone}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.pincode}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">
<!--<input type="hidden" id="idmain" value="{{item._id}}">-->
<button color="editcolor" ion-button (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" ion-button (click)="deletebranch(item._id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</ion-content>
branch.ts
import { Component } from '#angular/core';
import {
AlertController, IonicPage, LoadingController, NavController, NavParams, ToastController, ModalController,
App
} from 'ionic-angular';
import {WebserviceallProvider} from "../../providers/webserviceall/webserviceall";
import { Storage } from '#ionic/storage';
import {LoginPage} from "../login/login";
/**
* Generated class for the BranchesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
resposnsdata:any;
branchlist:any;
checkdatatable:boolean=false;
branchname = {name:''};
branchupdatedata = {name:''};
constructor(private storage: Storage,private app:App,public modalCtrl: ModalController,private alertCtrl: AlertController,private calldata:WebserviceallProvider,public navCtrl: NavController, public navParams: NavParams,public loadingCtrl: LoadingController,private toastCtrl: ToastController)
{
storage.get('token').then((val) => {
console.log('Your Token is', val);
if(val === null || val === "non")
{
this.app.getRootNav().setRoot(LoginPage);
}
});
this.getshow();
}
ionViewEnter(){
this.getshow();
}
myFunction(name) {
document.getElementById("demo").innerHTML =
"Welcome " + name;
}
getshow(){
//this.presentLoading();
this.calldata.branchlist().then((result) => {
this.branchlist = [];
this.resposnsdata = result;
console.log(this.resposnsdata);
this.branchlist = this.resposnsdata.data;
$(document).ready(function () {
// alert("call aklsdaklsd");
$('#example12').DataTable();
});
this.checkdatatable=true;
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 2000
});
loader.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad BranchesPage');
}
deletebranch(bid){
console.log(bid);
//this.presentLoading();
this.calldata.branchdelete(bid).then((result) => {
this.resposnsdata = result;
console.log(this.resposnsdata);
this.getshow();
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
addbranch() {
var modalPage = this.modalCtrl.create('MAddbranchPage');
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
updatebranch(id){
console.log("edit call");
var dataid = {
bid:id
};
var modalPage = this.modalCtrl.create('MEditbranchPage',{data:dataid});
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
}
ion-button only support in cordova, in other words, you must enable cordova for browser or just simple remove ion-button
<button color="editcolor" (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" (click)="deletebranch(item._id)">Delete</button>
I'm using the datepicker from eonasdan (https://github.com/Eonasdan/bootstrap-datetimepicker)
It works great, but when I put it inside a table, it inherits the style of the table. It is as if the datepicker also becomes a table.
How can I avoid this?
I have the following in my CSS:
table.table {
tr {
th {
color: #ff0000; //red
}
}
}
This is my html file:
<table class="table">
<tr>
<th>Reconcile Date</th>
</tr>
<tr>
<td>
<div class="pickdate">
<input type="text" placeholder="Reconcile Date" class="form-control ">
</div>
</td>
</tr>
</table>
This sets the text in my table header to red. It also sets the days of the week and month name in my datepicker to red. Note the pickdate class load the datepicker
By using Google Chrome's inspection tools I was able to find one of the classes on your datepicker table and add the CSS at that level. Here is the CSS and jsfiddle link:
.table tr th{ color: red; }
.table-condensed thead tr th{ color: black;}
https://jsfiddle.net/w8gmcgv4/5/
let me know if these work for you. Thanks!
You can add the following rule to your stylesheet to customize datetimepicker style:
.bootstrap-datetimepicker-widget {
table {
tr {
th {
color: black;
}
}
}
}
Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.
Working example:
jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
format: "DD/MM/YYYY", debug: true
});
table.table tr th {
color: #ff0000;
}
.bootstrap-datetimepicker-widget table tr th {
color: #000000;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<table class="table">
<tr>
<th>Debt Ref</th>
<th>Reconcile Date</th>
</tr>
<tr>
<td>
<div>NOR087-DAN052</div>
</td>
<td>
<div class="col-sm-12">
<input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
</div>
</td>
</tr>
</table>
<p>
The text in the datepicker shouldn't be red
</p>
I run into a problem while tring to add new row to Table.
The problem is the new row is added into blcok rather than block.
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
Thanks for any help.
You wanted to add new row to tbody, so select tbody first using getElementsByTagName("tbody") on . Also use insertRow(0) instead of insertRow(1)
function myFunction() {
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName('tbody');
console.log(tbody)
var row = tbody[0].insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>