We Keep Coding

Jquery UI dialog close function "Uncaught SyntaxError: Unexpected identifier"

Here is my code in js file.
<script>
var originalContent;
$( ".location-edit-form" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: "puff",
width:500,
position: {
my: 'center',
at: 'top',
of: $('.display')
}
open : function(event, ui) {
originalContent = $(".location-edit-form").html();
},
close : function(event, ui) {
$(".location-edit-form").html(originalContent);
}
});
</script>
Everything worked well until I had to use "open and close function".
And it shows "Uncaught SyntaxError: Unexpected identifier".
Btw, the order of the scripts I use is below
jquery-3.2.1.min.js
bootstrap.js
tether.min.js
jquery-ui.js
ckeditor.js
ckeditor/adapters/jquery.js

Looks like you forgot a comma
<script>
var originalContent;
$( ".location-edit-form" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: "puff",
width:500,
position: {
my: 'center',
at: 'top',
of: $('.display')
}, // You forgot it here
open : function(event, ui) {
originalContent = $(".location-edit-form").html();
},
close : function(event, ui) {
$(".location-edit-form").html(originalContent);
}
});
</script>

jquery how to get this dialog Ok button to work?

The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing.
(I'm using jquery 1.9.1)
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl,
success: function(data) {
$("#TFdialog").html(data).dialog({
resizable: true,
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
},
}).dialog('open');
}
});
}
I've also tried it without the comma following the button like:
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
}
}).dialog('open');
And I've tried these:
buttons: [{
text: "Ok",
Click : function () {
$("#TFdialog").dialog("close");
}
}]
and:
buttons: [{
Ok: function() {
$("#TFdialog").dialog("close");
}
}]
and I've tried replacing the "#TFdialog" with 'this' like:
$(this).dialog("close");

try doing
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( 'close' );
// your code goes here
}
}
]

Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
You can also use the dialog as an object:
var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
},
"Close this Soon" : DelayClose,
}
});
myDialog.dialog('open');
function DelayClose(){
setTimeout(function() {
myDialog.dialog( "close" );
}, 500 );
}
Example for why to use an object for yours:
var myDialog;
myDialog = $("#TFdialog").dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
}
}
});
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl
}).done(function(data){
$("#TFdialog").html(data);
myDialog.dialog('open');
});
}

Javascript Animate not working

I have a div width id: "cen", and with a height and width of 50px.
$(document).ready(function() {
$("#cen").animate({
height: 500px,
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
But it's not working.

Put quotes around 500px http://jsfiddle.net/myn9d/
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});

Use this code, it's working:
$(document).ready(function() {
$("#cen").animate({
height: "500px",
width: "500px",
}, 5000, function() {
// Animation complete.
});
});

You have error in your syntax height should be surroung with "500px"
it should be
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Please Checkout this demo Demo

$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
});
});

jquery modal-dialog button close doesn't work properly

$(function () {
$('#modalDlg2').live("click", function (event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.load(target)
.dialog({
title:"Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show:'fade',
hide:'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
} });
$dialog.dialog('open');
}
})
I have a problem with my close button "Cancelar" it should close the modal dialog and then empty it, but it seems that $(this).dialog("close") does not work, and .empty() does.
I've looked everywere for the solution of my problem. Could anyone help me with this?

try this:
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$dialog.dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
or
$dialog.dialog( "option", "buttons", {
"Cancelar": $.proxy(function() {
$(this).dialog("close");
$(this).empty();
},this)
});
$dialog.dialog('open');

I would try putting this in a callback function for the load:
$(function() {
$('#modalDlg2').on("click", function(event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog.load(target, function() {
$dialog.dialog({
title: "Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog("option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
});
});

Try the following code:
$dialog.dialog("option", "buttons", { "Cancelar": function() { $(this).remove(); } });

Why does jQuery dialog shrink while fading out?

$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fadeOut", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
I'm using Chrome. Here's a demo.
When I close the dialog, it hides, but also shrinks.
I didn't tell it to shrink! Why does it do that?

Using fade instead of fadeOut will solve the issue.
Check this: http://jsbin.com/alafez/4/edit#preview

Because fadeIn and fadeOut are not valid values for the show and hide options. If you remove effect: "fadeOut", the result will be same. The valid option is fade.

$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fade", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});