Help Full PHP + JavaScript: JQuery

Showing posts with label JQuery. Show all posts

Friday, April 26, 2019

How to create HTML to PDF using jsPDF ?

<!doctype html>
<html lang="en">
<head>
<title>jsPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<script>
var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;

function calculatePDF_height_width(selector,index){
page_section = $(selector).eq(index);
HTML_Width = page_section.width();
HTML_Height = page_section.height();
top_left_margin = 15;
PDF_Width = HTML_Width + (top_left_margin * 2);
PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
canvas_image_width = HTML_Width;
canvas_image_height = HTML_Height;
}
//Generate PDF
function generatePDF() {
pdf = "";
$("#downloadbtn").hide();
$("#genmsg").show();
html2canvas($(".print-wrap:eq(0)")[0], { allowTaint: true }).then(function(canvas) {

calculatePDF_height_width(".print-wrap",0);
var imgData = canvas.toDataURL("image/png", 1.0);
pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
});

html2canvas($(".print-wrap:eq(1)")[0], { allowTaint: true }).then(function(canvas) {

calculatePDF_height_width(".print-wrap",1);

var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);

});

html2canvas($(".print-wrap:eq(2)")[0], { allowTaint: true }).then(function(canvas) {

calculatePDF_height_width(".print-wrap",2);

var imgData = canvas.toDataURL("image/png", 1.0);
pdf.addPage();
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);

//console.log((page_section.length-1)+"==="+index);
setTimeout(function() {

//Save PDF Doc
pdf.save("HTML-Document.pdf");

//Generate BLOB object
var blob = pdf.output("blob");

//Getting URL of blob object
var blobURL = URL.createObjectURL(blob);

//Showing PDF generated in iFrame element
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;

//Setting download link
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
$(".pdf-download-link").show();

$("#sample-pdf").slideDown();

$("#downloadbtn").show();
$("#genmsg").hide();
}, 0);
});
};

</script>
<style>
.print-wrap {
width: 826px;
margin: 0 auto;
}
.bgimg{
background:url('2.jpg');
background-repeat:no-repeat;
background-position:center;
height:826px;
}
</style>
</head>
<body style="text-align: center;"><br>
<a class="btn btn-primary" id="downloadbtn" onclick="generatePDF()" style="color:#ffffff"><b>Create & Download PDF</b></a>
<span id="genmsg" style="display:none;"><b>Generating PDF ...</b></span>
<br>
<iframe frameBorder="0" id="sample-pdf" style="right:0; top:53px; bottom:0; height:400px; width:100%;display:none;"></iframe>
<br>
<h1 class="pdf-download-link" style="display:none">Download Link Of Created PDF</h1>
<br>
<a class="pdf-download-link" id="pdf-download-link" style="display:none" title="Download PDF File">Download PDF file</a>
<br>
<div class="print-wrap page1">
<h3 style="color:blue;">Sample page 1 for demo</h3>
<img src="1.jpg">
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus. </p>
</div>
<div class="print-wrap page2 bgimg">
<h3 style="color:white;">Sample page 2 for demo</h3>
<p style="color:yellow;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
<div class="print-wrap page3">
<h3 style="color:white;">Sample page 3 for demo</h3>
<img src="2.jpg">
<p style="color:black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat egestas massa, a feugiat augue tristique at. Integer interdum turpis in velit fermentum, sed feugiat odio finibus.</p>
</div>
</body>
</html>

Tuesday, January 10, 2017

How submit or insert data and files using JQuery Ajax ?

Step : 1 create Index.php file
----------------------------------------
<form id="data" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>FirstName</td>
<td><input type="text" name="firstName" value="" /></td>
</tr>
<tr>
<td>LastName</td>
<td><input type="text" name="lastName" value="" /></td>
</tr>
<tr>
<td>Attachment</td>
<td><input name="image" type="file" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
<div id="response"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "data.php",
type: 'POST',
data: formData,
async: false,
success: function (data) {
//alert(data)
$("#response").html(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>

Step : 2 create data.php file
----------------------------------------
<?php
echo "<pre>";
print_r($_FILES);
echo "<pre>";
print_r($_POST );
/// Put here your logic for insert and uploading code.
?>

Thursday, June 11, 2015

jQuery Window Width Determined Initially and When Resized

jQuery(window).ready(function() {
    var wi = jQuery(window).width();
    jQuery("p.testp").text('Initial screen width is currently: ' + wi + 'px.');

    jQuery(window).resize(function() {
        var wi = jQuery(window).width();

        if (wi <= 480){
            jQuery("p.testp").text('Screen width is less than or equal to 480px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 767){
            jQuery("p.testp").text('Screen width is between 481px and 767px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 980){
            jQuery("p.testp").text('Screen width is between 768px and 980px. Width is currently: ' + wi + 'px.');
            }
        else if (wi <= 1200){
            jQuery("p.testp").text('Screen width is between 981px and 1199px. Width is currently: ' + wi + 'px.');
            }
        else {
            jQuery("p.testp").text('Screen width is greater than 1200px. Width is currently: ' + wi + 'px.');
//        jQuery().addClass();
            }
    });
});

<p class="testp"></p>

Reference By : http://www.surfingsuccess.com/jquery/window-width.html#.VXk5YPnPxNM

Wednesday, April 9, 2014

Continuous image scrolling using jquery

Wednesday, March 7, 2012

Get value of radio button using jQuery

...
<input type="radio" name="age" value="10" />
<input type="radio" name="age" value="20" checked="checked" />
<input type="radio" name="age" value="30" />
...
 
//javascript code
 
<script type="text/javascript">
<!--
    // displays the selected radio button in an alert box
    alert($('input[name=age]:checked').val())
-->
 
var age = $("input[name='age']:checked").val(); 
alert(age);
</script>

Monday, January 23, 2012

Delete Records with using jQuery and Ajax.

Index.php

<ol class="update">

<?php

$sql="select * from updates order by msg_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
$msg_id=$row["msg_id"];

<li>

<?php echo $message; ?>
<a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>

</li>

<?php

}

</ol>

jQuery code

{

parent.fadeOut('slow', function() {$(this).remove();});

}

else

{

parent.slideUp('slow', function() {$(this).remove();});

}

}
});

return false;
});
});
</script>

deleteajax.php

<?php
if($_POST['id'])

{

$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>

Delete Records with Effect using jQuery and Ajax in php

Index.php

<ol class="update">

<?php

$sql="select * from updates order by msg_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
$msg_id=$row["msg_id"];

<li>

<?php echo $message; ?>
<a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>

</li>

<?php

}

</ol>

jQuery code

}

});

return false;
});
});
</script>

deleteajax.php

<?php
if($_POST['id'])

{

$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>

Tuesday, January 10, 2012

How to show and hide div tag using Jquery

Tuesday, September 13, 2011

Submit Form without Refreshing Page with Jquery

Contact.html

<div id="preview"> </div>
<div id="formbox">
<form id="form" action="submit.php" method="post">
Name
<input type="text" name="name" />
Email
<input type="text" name="email" />
Message
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</div>

Contacts

Table contains name, email, message and created data etc.

CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)

submit.php

Contails simple PHP code. Inserting values into contacts table.

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0)
{
$time=time();
mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')");
echo "<h2>Thank You !</h2>";
}
}
?>

Validate Plugin

Here the collaboration of jQuery validate and form plug-in.

db.php

PHP database configuration file

<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Friday, August 19, 2011

Submit a Form without Refreshing page with jQuery and Ajax.

jQuery and Ajax script take a look at dataString

HTML Code

<form method="post" name="form">
<ul><li>
<input id="name" name="name" type="text" />
</li><li>
<input id="username" name="username" type="text" />
</li><li>
<input id="password" name="password" type="password" />
</li><li>
<select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</li></ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div></form>

join.php

<?php
if($_POST)
{
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("SQL insert statement.......");
}else { }

?>

Jquery Submit() method Example

$('#formid').submit(function() {
  alert('I am submitted');
  return false;
});

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
</head>
<body>
<div id="container">
 
  <form action="submit.php">
    <div>
      <input type="submit" />
    </div>
  </form>
  <span></span>
<script>
 
    $("form").submit(function() {
      alert("This is a submit");
       return false;
    });
</script>
</div>
</body>
</html>

Tuesday, May 3, 2011

Auto Load and Refresh Div every 10 Seconds with jQuery.

<?php

$sql = mysql_query("Select id form Messages");
$record_count=mysql_num_rows($sql);
echo $record_count;

Monday, April 18, 2011

How to Ajax auto refresh after 5 seconds

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "Ajax();", 5000 );  ///////// 10 seconds
 
$(function() {
Ajax = function(){
 
$('#dataDisplay').prepend("Hi This is auto refresh example for you <br><br>").fadeIn("slow");
 
}
 });
</script>

<div id="dataDisplay" ></div>

Monday, April 11, 2011

How to add / remove textbox dynamically with jQuery

<html>

<head>

<title>jQuery add / remove textbox example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style type="text/css">

div{

padding:8px;

}

</style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){

alert("Only 10 textboxes allow");

return false;

}

var newTextBoxDiv = $(document.createElement('div'))

.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +

'<input type="text" name="textbox' + counter +

'" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");

counter++;

});

$("#removeButton").click(function () {

if(counter==1){

alert("No more textbox to remove");

return false;

}

counter--;

$("#TextBoxDiv" + counter).remove();

});

$("#getButtonValue").click(function () {

var msg = '';

for(i=1; i<counter; i++){

msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();

}

alert(msg);

});

</script>

</head><body>

<div id='TextBoxesGroup'>

<div id="TextBoxDiv1">

<label>Textbox #1 : </label><input type='textbox' id='textbox1' >

</div>

<input type='button' value='Add Button' id='addButton'>

<input type='button' value='Remove Button' id='removeButton'>

<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>

</html>

DEMO :

Textbox #1 :

Help Full PHP + JavaScript

Home

Friday, April 26, 2019

How to create HTML to PDF using jsPDF ?

Tuesday, January 10, 2017

How submit or insert data and files using JQuery Ajax ?

Thursday, June 11, 2015

jQuery Window Width Determined Initially and When Resized

Wednesday, April 9, 2014

Continuous image scrolling using jquery

Wednesday, March 7, 2012

Get value of radio button using jQuery

Monday, January 23, 2012

Delete Records with using jQuery and Ajax.

Delete Records with Effect using jQuery and Ajax in php

Tuesday, January 10, 2012

How to show and hide div tag using Jquery

Tuesday, September 13, 2011

Submit Form without Refreshing Page with Jquery

Friday, August 19, 2011

Submit a Form without Refreshing page with jQuery and Ajax.

Jquery Submit() method Example

Tuesday, May 3, 2011

Auto Load and Refresh Div every 10 Seconds with jQuery.

Monday, April 18, 2011

How to Ajax auto refresh after 5 seconds

Monday, April 11, 2011

How to add / remove textbox dynamically with jQuery

Miscellaneous