Croppie uses a DIV container and not a CANVAS to do its cropping. I am trying to find out how to save the resulting cropped image from this DIV to a directory on the Server, such as via a SAVE button.
Here is my HTML code ...
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="css/croppie.css" />
<link rel="Stylesheet" type="text/css" href="css/sweetalert.css" />
</head>
<body>
<div id="testCanvas"></div>
<div class="actions" style="margin-left: auto; margin-right: auto; width:250px;">
<button class="vanilla-result">Result</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<p><button onclick="function();">Save</button></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/croppie.js"></script>
<script src="js/demo.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
Demo.init();
</script>
</body>
</html>
Here is my JavaScript configurations ...
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('testCanvas'), {
viewport: { width: 300, height: 300, type: 'square' },
boundary: { width: 350, height: 350 },
enableOrientation: true
});
vanilla.bind({
url: 'imgs/demo-1.jpg',
orientation: 1
});
document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
vanilla.result('canvas').then(function (src) {
popupResult({
src: src
});
});
});
$('.vanilla-rotate').on('click', function(ev) {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
The rest comes by default without changes from Croppie at https://github.com/Foliotek/Croppie such as demo.js, etc.
Here is an example on how to make a download button. If you figure out how this works, then you just need to replace the <a>link with for a <form> with a submit button,
var vanillaResult = document.querySelector('.vanilla-result'),
vanillaSave = document.querySelector('.vanilla-save'),
vanillaRotate = document.querySelector('.vanilla-rotate');
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
viewport: {
width: 100,
height: 100
},
boundary: {
width: 300,
height: 300
},
enableOrientation: true
});
vanilla.bind({
url: 'http://foliotek.github.io/Croppie/demo/cat.jpg',
orientation: 1
});
vanillaResult.addEventListener('click', function() {
vanilla.result('canvas').then(resultVanilla);
});
vanillaSave.addEventListener('click', function() {
vanilla.result('canvas').then(saveVanilla);
});
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
}
function resultVanilla(result) {
swal({
title: '',
html: true,
text: '<img src="' + result + '" />',
allowOutsideClick: true
});
}
function saveVanilla(result) {
swal({
title: '',
html: true,
text: '<a id="save" href="' + result + '" download="result"><img src="' + result + '" /><br><button>Download</button></a>',
showConfirmButton: false,
showCancelButton: true,
allowOutsideClick: true,
});
}
demoVanilla();
body {
min-width: 360px;
}
.actions {
width: 300px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="http://foliotek.github.io/Croppie/croppie.css" />
<link rel="Stylesheet" type="text/css" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" />
</head>
<body>
<div id="vanilla-demo"></div>
<div class="actions">
<button class="vanilla-result">Result</button>
<button class="vanilla-save">Save</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://foliotek.github.io/Croppie/croppie.js"></script>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
</body>
</html>
GOT IT!
Thanks to one of the developers of Croppie "thedustinsmith" and "TWFPSP" for directing me to the right eternal resources and their offered info.
$( document ).ready(function() {
vanillaRotate = document.querySelector('.vanilla-rotate');
var $uploadCrop = $('#upload-demo');
$uploadCrop.croppie({
viewport: {
width: 250,
height: 250,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$uploadCrop.croppie('bind', 'imgs/cat.jpg');
vanillaRotate.addEventListener('click', function() {
vanilla.rotate(parseInt($(this).data('deg')));
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
HTML body ...
<form action="test-image.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
Send
</form>
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
test-image.php ...
<?php
if(isset($_POST['imagebase64'])){
$data = $_POST['imagebase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image64.png', $data);
}
?>
Now the rotate function is not working and I am trying to fix it. Seem to not know how to include the orientation configs in this setting which is different than the demoUpload where it is illustrated in the demo file. But at least the saving to the server works great.
Related
I am developing an application with gridstack and I want to put several graphics (lines and gauge) in different containers using the RGraph library.
I can not make the graph fill the width and height of the container.
Also when I change the size I want the graphic to adapt to the container.
I have an example:
Code JSFiddle
$(document).ready(function ()
{
var data = [[4,5,8,11,15], [1,3,2,5,9]];
var tips = ['a','b','c','d','e','yf','yh','tt','hh','ll'];
var line = new RGraph.Line('cvs', data)
.set('tooltips', tips)
.set('gutter.left', 50)
.draw();
});
#canvas{
width: 100% !important;
max-width: 100% !important;
height: 70% !important;
align-content:center;
vertical-align:middle;
/*position:static;*/
}
#cvs {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Serialization demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./gridstack.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min.js'></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.tooltips.js"></script
src="http://www.rgraph.net/libraries/RGraph.common.resizing.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.line.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
<a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
</div>
<br/>
<div class="grid-stack" id="grid-stack">
<div class="chart-container" id="tile1" >
<div class="grid-stack-item-content">
<span class="pull-left">Tile 1</span>
<div class="pull-left" style="clear:both">Content</div>
</div>
</div>
<div class="chart-container" id="tile2">
<div class="grid-stack-item-content">
<span class="pull-left">Tile 2</span>
<div class="pull-left" style="clear:both">
<canvas id="cvs" width="600" height="250" style="width: 100%; float: left">[No canvas support]
</canvas>
</div>
</div>
</div>
</div>
<hr/>
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{id: "tile1", x: 0, y: 0, w: 4, h:2},
{id: "tile2", x: 4, y: 0, w: 5, h: 4},
];
this.grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
items.forEach(node=>{
var containerElt = $("#" + node.id);
containerElt.attr("data-gs-id", node.id);
containerElt.attr("data-gs-width", node.w);
containerElt.attr("data-gs-height", node.h);
containerElt.attr("data-gs-x", node.x);
containerElt.attr("data-gs-y", node.y);
this.grid.makeWidget(containerElt)
});
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.getSerializedData = function () {
var result = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
w: node.width,
h: node.height
};
}, this);
return result;
}.bind(this);
this.clearGrid = function () {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
$('#grid-stack').on('change', (event, items) => {
var result = this.getSerializedData();
var json = JSON.stringify(result, null, ' ');
$('#saved-data').val(json);
});
this.loadGrid();
};
});
</script>
</body>
</html>
You need to create a function to reset and redraw your line, then have that trigger when the window resizes and when the widget is updated (on the change event in gridstack). Make sure not to use extra styles, as they'll actually hinder your result. I've updated your example to work on window resize. It will not update when you resize the widget, but if you resize the window, you'll see the chart continues to fill up the full widget.
http://jsfiddle.net/kqada7zj/46/
Two problems with jquery-ui dialog:
it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the
dialog is opened.
When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.
Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.
The function for opening a specific web page in a jquery-ui dialog looks like this:
function openNewEvent() {
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 1020,
minHeight: 1020,
width: 1200,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
You can test it with this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Both things working, check jQuery version you're using is 3.3.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
}
},
create: function(event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
I want to use Jquery Croppie Plugin on my site to crop image for my user but I've got this problem the code that i write not show as an example in Croppie Site
Here's my code
HTML code
<input type="file" id="upload" value="Choose a file">
<button class="upload-result">Result</button>
<div class="upload-msg">
Upload a file to start cropping
</div>
<div id="upload-demo"></div>
JS code
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
NB : I have link my site with jquery, croppie.js and croppie.css
Try it, it works for me.
I used PHP to save the image.
<?php
if(isset($_POST['imagebase64'])){
$data = $_POST['imagebase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image64.png', $data);
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
});
$('.upload-demo').addClass('ready');
}
reader.readAsDataURL(input.files[0]);
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () { readFile(this); });
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
</script>
</head>
<body>
<form action="test-image.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
Send
</form>
</body>
</html>
a JSFiddle link
Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var msgid = this.id.split('_')[1];
$.ajax({
type: 'post',
url: '/tooltip.php',
data:'i='+msgid,
success: function( data ) { callback( data ); }
});
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
The above is working as it's suppose to work, however, I would like to trigger the tooltip only after the mouse hovers the link for an specific amount of time (like 2 seconds, for example).
Also, I would like to cancel it's trigger if the user moves the mouse out of the link before the specified delay time expires.
Can anybody please help me out on this?
Thank you very much.
I finally managed to achieve what I was looking for.
Here is the final result:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var ARTid = this.id.split('_')[1];
var TTtmr = setTimeout( function() {
$.ajax({
type: 'post',
url: '/tooltip.php',
data: 'i='+ARTid,
success: function( data ) { callback( data ); }
});
}, 800 );
$('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
you can try this:
$(function() {
$(document).tooltip({
items: '.tooltip',
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: 'Testing jquery tooltips!',
show: {
effect: "slideDown",
delay: 250
}
});
});
the show property accepts object parameter with the following properties;
effect, delay, duration, and easing.
http://api.jqueryui.com/tooltip/#option-show
I am trying to display the Dialog with dynamic div content, inside the div i am trying to add span,textbox and button but the Jquery Dialog is not displaying.Help me on this issue
Thanks in advance for your answers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jquery Dynamic Div</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="JQUERY/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker
{
width: 17.5em;
height: 16.6em;
font-size:12.5px;
margin-left: 120px;
z-index: 1000;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnSubmit").click(function ()
{
alert("inside");
var DynamicDiv = $('<div id="ExpiryDatePopup" style="display:block;width:680px;height:327px;background-color:#FFFFFF;></div>');
alert("Div Created");
var breakTag1 = $('</br>');
alert("Div Created");
var breakTag2 = $('</br>');
var ExpDateText = $('<span style="color: steelblue;margin-left: 55px;">Please enter the Expiration Date </span>');
var EndDateText = $('<span style="margin-left: 56px;position: relative;">End Date</span><span style="color: #f00">*</span>');
var DatePickerText = $('<input type="text" id="datepicker" readonly="true" style="margin-left:32px" style="margin-left: 59px;margin-top: 29px;position: static;top: 85px;"/>');
var SubMitButton = $('<input type="button" id="popUpSubmit" value="Submit" style="margin-left: 128px;margin-top: 78px;height: 28px;width: 82px;" />');
alert("Div Created");
$('body').append(DynamicDiv);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(breakTag2);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(ExpDateText);
$('#ExpiryDatePopup').append(DatePickerText);
$('#ExpiryDatePopup').append(SubMitButton);
alert("hi sam");
$('#ExpiryDatePopup').dialog(
{
height: 400,
width: 600,
title: 'Expiration Date',
position: 'center',
background: 'red',
opacity: '0.3',
modal: true,
open: function ()
{
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd',
minDate: dateToday,
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'Images_/icon_calendar.jpg'
});
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btnSubmit" value="Submit"/>
</body>
</html>
well i have tried your code and its working fine for me.
only problem is creating <div id="ExpiryDatePopup"></div>
You forget to close ExpiryDatePopup div style attribute.
Tested Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jquery Dynamic Div</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker
{
width: 17.5em;
height: 16.6em;
font-size:12.5px;
margin-left: 120px;
z-index: 1000;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnSubmit").click(function ()
{
var DynamicDiv = $('<div id="ExpiryDatePopup" style="display:block;width:680px;height:327px;background-color:#FFFFFF;" /></div>');
var breakTag1 = $('</br>');
var breakTag2 = $('</br>');
var ExpDateText = $('<span style="color: steelblue;margin-left: 55px;">Please enter the Expiration Date </span>');
var EndDateText = $('<span style="margin-left: 56px;position: relative;">End Date</span><span style="color: #f00">*</span>');
var DatePickerText = $('<input type="text" id="datepicker" readonly="true" style="margin-left:32px" style="margin-left: 59px;margin-top: 29px;position: static;top: 85px;"/>');
var SubMitButton = $('<input type="button" id="popUpSubmit" value="Submit" style="margin-left: 128px;margin-top: 78px;height: 28px;width: 82px;" />');
$('body').append(DynamicDiv);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(breakTag2);
$('#ExpiryDatePopup').append(breakTag1);
$('#ExpiryDatePopup').append(ExpDateText);
$('#ExpiryDatePopup').append(DatePickerText);
$('#ExpiryDatePopup').append(SubMitButton);
$('#ExpiryDatePopup').dialog(
{
height: 400,
width: 600,
title: 'Expiration Date',
position: 'center',
background: 'red',
opacity: '0.3',
modal: true,
open: function ()
{
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd',
minDate: dateToday,
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'Images_/icon_calendar.jpg'
});
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btnSubmit" value="Submit"/>
</body>
</html>
You also have error in creating div you forget to close style attribute.
$('#ExpiryDatePopup').live('click',function(){
//write append code here
});