I am creating a dialog in javascript and for some reason when I first open the dialog the buttons works fine. But when I close and open it the buttons dont work. The edit click function doesnt work the second time when I repopen the dialog
var newDiv = $(document.createElement('div'));
$(newDiv).dialog({
title: "New Dialog",
modal: true,
autoOpen: true,
width: 650,
height: 440,
resizable: false,
draggable: true,
buttons: [
{
html: "<b>Edit</font></b>",
icons: {
primary: "ui-icon-check"
},
click: function() {
$('#notetext').prop("disabled", false);
$('#uibtnSubmit').button("enable");
//$('#uibtnSubmit').prop("disabled", false);
//$("#uibtnSubmit").button().attr('disabled', false).removeClass('ui-state-disabled');
}},
{
html: "<b><font color='green'>Submit</font></b>",
disabled:true,
id: "uibtnSubmit",
icons: {
primary: "ui-icon-script"
},
click: function() {
var editnotes = $('#notetext').val();
//update the notes in the database against the user.
$.ajax({
type: "post",
cache: false,
async: false,
url:"url",
datatype: "json",
data: data,
success: function(data){
$(newDiv).dialog('close');
},
error: function(jqXHR, statusText, err){
//console.log(err);
}
});
}},
{
html: "<b><font color='red'>Exit</font></b>",
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
}
}
]
});
I tried to use different properties like removeClass, attr but they arent working.
I solved the issue by reloading the page once Exit or submit value was clicked. That way when the dialog box was reloaded it was initialized.
Related
i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks
I am invoking a jquery modal dialog in which I have a save button. The save button in turn makes an ajax call and on success an alert box is displayed "Data Saved ! " with an OK button.So far good.
Now after the "Data Saved" alert box is closed, I want to automatically close the previously invoked modal dialog also.Has anyone done anything similar to this ?
$( "#addFriendButton").click(function() {
$( "#addNewFriend" ).dialog({
title: 'Add a new friend.',
height:'auto',
width:'auto',
modal: true
});
});
//end addFriendButton
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
}
});
});
function displayOKAlertBox(message){
$("#alertMsg").html(message);
$( "#alertbox" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
Try the following:
$("#alertbox").dialog({
modal: true,
buttons: {
Ok: function() {
$('.ui-dialog').dialog('close');
}
}
});
Try the following
$( "#saveNewFriendButton").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/api/bb/apiV1/addFriend",
data: formToJSON(),
dataType: "json",
success: function(responseDTO){
displayOKAlertBox(responseDTO.responseMessage);
$( "#alertbox" ).dialog("close");
}
});
});
I think that would do it, but maybe I'm mistaken !
I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?
Thank you in advance!
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () {
// use zClip to copy $('#dialog-modal').text() here
}
}
});
},
error: function (msg) {
alert(msg);
}
});
I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () { return true; }
}
});
$('#dialog-modal ui-button:contains(Copy)').zclip({
path:'../whatever/ZeroClipboard.swf',
copy:$('#dialog-modal').text()
});
},
error: function (msg) {
alert(msg);
}
});
Assuming you are using jQuery 1.8+, you can specifiy your buttons in a different way to add IDs to them:
$("#mydialog").dialog({
...
buttons : [{
text: "Close",
click: function() {
$(this).dialog("close");
}
},{
text: "Copy to clipboard",
id: "copyButton", // here is your ID
click : function() {
alert("Sorry, copy not supported in your browser, please copy manually.");
}
}]
...
});
//after .dialog("open");
$("#copyButton").zclip({
...
clickAfter: false // dont propagate click: will suppress unsupported warning
...
});
The only issue I have is that it seem you can only mount zclip on visible buttons, so I do the zclip() call inside the handler for the button that opens the dialog