I have the following code example and I am trying to make a post request only if the user clicks the Yes button. If the user clicks the No button nothing should happen. Thanks for any help and hints.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form action="" method="post">
<button id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>
<script>
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message to use',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
width: 400,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
//$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
return true;
},
No: function () {
//$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
</script>
</body>
</html>
The issue is that your button is by default of type="submit", you can change it to type="button" and execute your functions normally:
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message to use',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
width: 400,
buttons: {
Yes: function() {
$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
return true;
},
No: function() {
$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
return false;
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form action="" method="post">
<button type="button" id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>
Related
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 generate a dialog box that gets password from user, here's a bit my code.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<input type='button' id='btnDelete' name='btnDelete' value='Delete' onclick='deleteRecord(".$row['ID'].")'/>
<div id="delete-dialog" style="display: none;" title="Delete Record">
<label>Please type in admin's password:</label></br>
<input type='password' size='25' id='inpAdminPassword'/>
</div>
</body>
</html>
JS
function deleteRecord(ID){
var answer = confirm("Are you sure you want to delete this record?");
if(answer == true){
$( "#delete-dialog" ).dialog( "open" );
}
}
$(document).ready(function() {
$( "#delete-dialog" ).dialog({
autoOpen: false,
});
Somehow, the dialog box doesn't show, what must be missing?
I have also tried and included this code, but still it doesn't work.
$(document).ready(function() {
$( "#delete-dialog" ).dialog({
autoOpen: false,
});
$("#delete-dialog").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Delete": function() {
var password = document.getElementById('sessionPW').value;
var adminpw = document.getElementById('inpAdminPassword').value;
alert(password);
if(password == adminpw){
window.location = "deleteThreat.php?threatID="+ID;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
I just was trying your first solution and making the confirmation like this works for me:
js:
$("#delete-dialog").dialog({
autoOpen: false,
});
$("#open").click(function () {
if (confirm("are you sure?")) {
$("#delete-dialog").dialog("open");
}
});
html:
<div id="delete-dialog" style="display: none;" title="Delete Record">
<label>Please type in admin's password:</label></br>
<input type='password' size='25' id='inpAdminPassword'/>
</div>
<button id="open" >Open</button>
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.
lI would like to add a Toolbar or nav bar with a dropdown button instead of the title "?ToolbarHTMLCodeHere?" in my JQuery Dialog window. There should be drop down button with the name "File" in the toolbar when the drop down openes there should be a button inside called "Save".
Does anybody know how to do that?
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("?ToolBarHTMLCodeHere?");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
What i have until now is this (but its so ugly, hopefully somebody has a better solution):
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("<div class='actions'><a id='TakeAction'>File</a><ul id='actions'><li>Save</li></ul></div>");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
ul#actions
{
display:none;
}
.actions:hover ul#actions
{
display: block;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
Problem:
The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.
Code:
Includes:
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
Css:
<link rel="stylesheet" type="text/css" href="css/jquery.ui.autocomplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />
Buttons: <a class="phoneadder">Stuff</a>
Scripts:
<script>
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
}
);
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
return false;
});
</script>
Dialog:
<div id="dialog-form" title="Create new phone">
<p>All form fields are required.</p>
<form>
<fieldset>
...some html here
</fieldset>
</form>
</div>
Place the initializer in your document.ready, or as shorthand:
$(function() { $("#dialog-form").dialog(autoOpen... ); } );
Alternatively, make sure your scripts are run after the div is created, so like, in the footer.
Try putting your jQuery code in the $(document).ready function like this:
$(document).ready(function () {
/// your code here
});
Try this,
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: xxx,
width: xxx,
modal: true
});
return false;
});
});
Why don't you just put the dialog function in the click event handler?
<script>
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: 300,
width: 350,
modal: true
});
return false;
});
});
</script>