Html to convert pdf save in to folder and Mail

Html to convert pdf save in to folder and Mail

Here Example of html table structure to convert to pdf using jspdf.

<table id= “xyz”><thead><tr><th>id</th></tr></thead>
<tbody><tr><td>1</td></tbody></table>

You can add style tag inline and give css to it.

Thereafter Include require Js file

https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
http://html2canvas.js
http://from_html.js
http://jspdf.plugin.autotable.js

var doc = new jsPDF(‘l’, ‘pt’, ‘a4’);
var specialElementHandlers = {
‘#xyz’: function(element, renderer){
return true;
}};
var table = document.getElementById(“xyz”);
var res = doc.autoTableHtmlToJson(table, true);
doc.autoTable(res.columns, res.data, {
startY: 60,
tableWidth: ‘auto’,
columnWidth: ‘auto’,
styles: {
overflow: ‘linebreak’
},
beforePageContent: function(data) {
doc.text(“New Pdf”, 40, 30);}
});
var pdf =doc.output(); //returns raw body of resulting PDF returned as a string as per the plugin documentation.
var data = new FormData();
data.append(“data” , pdf);
var xhr = new XMLHttpRequest();
xhr.open( ‘post’, ‘test.php’, true ); //Post to php Script to save to server
xhr.send(data);

After That Create new php file to post data on it and using phpmailer you can attached and mail. eg:test.php

<?php
require_once “../../PHPMailer/class.phpmailer.php”; // Download phpmailer
if(!empty($_POST[‘data’])){
$data = $_POST[‘data’];
$fname = ‘newpdf-‘.date(‘d-m-Y’).’.pdf’; // name the file
$file = fopen(“../pdf/” .$fname, ‘w’); // open the file path
fwrite($file, $data); //save data
fclose($file);
$bodytext = ‘Please Find PDF’;
$email = new PHPMailer();
$email->From = ‘xxx@xyz.com’;
$email->FromName = ‘My first pdf’;
$email->Subject = $file;
$email->Body = $bodytext;
$email->AddAddress( ‘xyz@abc.com’ );
//$email->AddAddress(‘person2@domain.com’, ‘Person Two’);
//$file_to_attach = $_SERVER[‘DOCUMENT_ROOT’].’/front/pdf’;
$email->AddAttachment(‘../pdf/’.$fname );

return $email->Send();
} else {
echo “No Data Sent”;
}
?>

How to load XML file using jquery ajax ?

you can load the xml data by using  jquery ajax by below Demo.

This is code in data.XML File

<?xml version="1.0" encoding="UTF-8"?>
<tabledata>
<row>
<column>India</column>
<column>China</column>
<column>Japan</column>
</row>
<row>
<column>Russia</column>
<column>France</column>
<column>Germany</column>
</row>
<row>
<column>USA</column>
<column>Canada</column>
<column>Brasil</column>
</row>
</tabledata>

NOTE:- You can just paste the above code to create a simple XML file

Continue reading

Creating a Count Down Timer when Customer Logs Out From Account in Magento

Magento has a very Lame Layout Screen when customer logs out. To make it little interesting I thought why not add a count down timer over there. So this is how i made a count down timer using JavaScript.

Goto : frontend/default/YOURTHEME/template/customer/logout.phtml

Now Create a span where in between which you want to display a timer.

<span id=”timer”>5</span>

After that add following Javascript code in the file :

<script type=”text/javascript”>
//<![CDATA[
window.onload = CreateTimer(“timer”, 5);
var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;

UpdateTimer();
window.setTimeout(“Tick()”, 1000);
}

function Tick() {
TotalSeconds -= 1;
UpdateTimer();
if(TotalSeconds == 0){
location.href = ‘<?php echo $this->getUrl() ?>’
return 0;
}
window.setTimeout(“Tick()”, 1000);
}

function UpdateTimer() {
Timer.innerHTML = TotalSeconds;
}
//]]>
</script>

Please Note : Comment out the default redirection code ie: setTimeout(function(){ location.href = ‘<?php echo $this->getUrl() ?>’},5000)

This is it. Now enjoy your timer when cutomer logs out. I haven’t explained the code in detail as it is pretty simple. If you face any problem in it please post it as a comment.

Drag and drop using jquery

tt
kk

Create .html file

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // Example 1.1: A single sortable list
 $('#example-1-1 .sortable-list').sortable();
 // Example 1.2: Sortable and connectable lists
 $('#example-1-2 .sortable-list').sortable({
 connectWith: '#example-1-2 .sortable-list'
 });
 // Example 1.3: Sortable and connectable lists with visual helper
 $('#example-1-3 .sortable-list').sortable({
 connectWith: '#example-1-3 .sortable-list',
 placeholder: 'placeholder',
 });
 // Example 1.4: Sortable and connectable lists (within containment)
 $('#example-1-4 .sortable-list').sortable({
 connectWith: '#example-1-4 .sortable-list',
 containment: '#containment'
 });
});
 Continue reading 

How to submit a form using AJAX

This is a Registration.php file

In This file Simple create registration form and submit by using AJAX

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#myForm').on('submit',function(event) {
$.ajax({
url:'success.php',          //target file
data:$(this).serialize(),    //translate data structure and object
type:'POST',
success:function(data){

console.log(data);
$("#success").show();       // Show Success Message==
},
error:function(data){

$("#error").show().fadeOut(5000);   //===Show Error Message====
}
});
event.preventDefault();         //To Avoid Page Refresh and Fire the Event "Click"
});
});
</script>

</head>
<body>
<h2 >Registration Form</h2>

<table align:center>
<form id="myForm" method="POST" action="" >
<tr>
<tr><td>Name :</td><td><input type="text" name="name" required></td></tr>
<tr><td>SarName :</td><td><input type="text" name="sarname" required></td></tr>
<tr><td>Birthday :</td><td><input type="date" name="bday" required></td></tr>
<tr><td>E-mail :</td><td><input type="email" name="email" required></td></tr>
<tr><td>Password :</td><td><input type="password" name="password" required></td></tr>
<tr><td>re-Password :</td><td><input type="password" name="passward" required></td></tr>
<tr><td><button type="submit" name="submit" id="submit">submit</button></td> </tr>
</tr>
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span>

<span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
</form>
</table>

<?php ?>
</body>

</html>

Continue reading

How to execute function on first load using Javascript

Often there is a requirement to execute some function just once. For example : You need to show the promotional pop-up banner first time the customer visits the website.

There are many ways to achieve this. The way i use is by using cookie.

Before going into code, I’ll explain you what logic can be used.

When customer loads the website set some cookie value consider it as ‘Y’. Now check for the cookie value each time the page loads. If the cookie value is set. Don’t execute the method. If it isn’t set, execute the method and set the cookie value.

Below is the code for it.

window.onload= function(){
var fl = document.cookie.split(‘;’)
var cName = “firstLoad=”
for(var i=0; i<fl.length; i++){
var c = fl[i].trim();
if(c.indexOf(cName)==0){
var cookieVal = c.substring(cName.length,c.length);
}
}
if(cookieVal != “Y”){
document.cookie=”firstLoad=Y”
/* WRITE YOUR CODE OVER HERE */
}
else{
return “Already Loaded Once”
}
}

Here,

1) window.onload will execute the function evertime the window loads.
2) document.cookie.split(‘;’) will split the string of cookies into array.
3) substring(value1, value2) will get the part of the string.
4) document.cookie will set the cookie “firstLoad=Y”

Please write your comments below to provide your feedback and queries.

How to add JS/CSS files in Joomla modules?

You could add your js/css files to /media folder.

Just add to your manifest file:

        <files>
           ...
        </files>
        <media folder="media" destination="mod_your_module">
            <folder>css</folder>
            <folder>js</folder>
        </media>

Inside your installable package, you should now have the /media folder.

Then add to view file:

        $doc =& JFactory::getDocument();
        $doc->addScript("/media/mod_your_module/js/script.js");
        $doc->addStyleSheet("/media/mod_your_module/css/style.css");