Sorry for the mixups. So for the code below, the question is how do I reference a variable object from another object.
$("#dialog-form").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
resizable: false,
**title: myPassedVariable,**
buttons: {
'Yes': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid
//&& checkLength(name,"company name",1,16);
if (bValid) {
//alert($('#cancel-test').attr("id"));
//alert(theapptno);
//alert(document.theform.name);
//document.theForm.submit() ;
$(this).dialog('close');
}
},
No: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('.cancel-appt')
.button()
.click(function() {
$('#dialog-form').dialog('open');
**myPassedVariable=this.id;**
});
In the future, please ask questions more clearly. Posting only your code doesn't really help to know what you've tried or what you want.
That said, it looks like you want to change the title of the dialog form. To do this, you would use the jQuery UI dialog's option function like so:
$('.cancel-appt')
.button()
.click(function() {
$('#dialog-form')
.dialog( "option", "title", this.id )
.dialog('open');
});
Related
I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.
$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
window.location.href = 'url and myvar??';
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#confirm").dialog( "open" ).html ( "Are U Sure?" );
return false;
});
HTML
<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>
Is there a good way to do this?
You can try using the .data() method to store data for you. Take a look at this answer
Passing data to a jQuery UI Dialog
For example to pass a variable, you can store it using the data function, before opening the dialog
$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");
Then you can get this back by:
var my_data = $("#dialog_div").data('param_1')
You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:
$("#delete").click(function(ev) {
ev.preventDefault(); // preventDefault should suffice, no return false
var href = $(this).attr("href");
var dialog = $("<div>Are you sure?</div>");
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
window.location = href;
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
});
Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:
function confirmDialog(msg) {
var dialog = $("<div>"+msg+"</div>");
var def = $.Deferred();
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
def.resolve();
$( this ).dialog( "close" );
},
'Cancel': function() {
def.reject();
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
return def.promise();
}
And then use it like so
confirmDialog("are your sure?").done(function() {
window.location = $(this).attr("href");
}).fail(function() {
// cry a little
});
You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.
For more information on jquery deferred: http://api.jquery.com/category/deferred-object/
Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects.
Example:
$(function(){
$(".deleteLink").click(function(){
var id = $(this).data("record-id");
var myHref = $(this).attr('href');
$("#confirmDialog").dialog({
buttons:{
"Yes": function()
{
window.location.href = myHref + id;
}
}
});
});
});
<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
<p>Are you sure?</p>
</div>
HTML
<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS
$('.confirmation-dialog').confirm({
buttons: {
Yes: function(){
console.log(this.$target.attr('data-mydata'));
No: function(){
}
}
});
When I began using jQuery a little over a year ago, I needed to load remote content into a pop-up dialog box. After scouring the internet and trying out several suggested methods for doing this, I came upon a function that worked exactly as I needed it to. However, one problem I've never solved is how to reference the dynamic dialog box so it can be closed from an outside function.
Here's the function that creates the dialog box, appends it to the body, and then loads a page into it:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('`<div style="display:hidden"></div>`').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser from following the link
return false; };
I've considered giving that hidden div a hard-coded id value, but I'm not sure if there are drawbacks to that approach.
Any suggestions would be most appreciated.
I would use a hard-coded id value for the <div> element.
No there shouldn't be any drawback giving it an ID. If you fear of some kind of conflicts then you can give it a class instead, or save a reference to the div object in a global variable.
Well im not sure what the return false is at the end. so if you don't need that, do this:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('<div>').css('display','none').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url, {}, function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
});
return dialog;
}
//call it like this:
var dialog = openDynamicDialog();
//..code
//close it:
dialog.dialog('close');
OR
if you still need that return false, you can do this on the var dialog line of the function:
var dialog = $('<div>', {id: 'dialog_id'}).css('display','none').appendTo('body');
and then reference it from the outside:
var dialog = $('#dialog_id');
Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.
It is no problem to set the title:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
//$( "#dialog" ).dialog( "open" );
$( this ).dialog({ title: 'Please confirm deletion!' });
return false;
});
});
</script>
</head>
<body>
I have the documentation and some examples here.
Thanks for helping out guys.
Cheers,
doonot
============================= [SOLUTION]=====================================
Thanks for all who answered this questions. This is how i wanted it:
function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
And it can be called for example like this (clicking on an image):
<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">
function createDialog(title, text, options) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog(options);
}
Here is a simple example:
function openDialog(message) {
if ($('#dialog').length == 0) {
$(document.body).append('<div id="dialog">'+message+'</div>');
} else {
$('#dialog').html(message);
}
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#dialog" ).dialog("open");
}
I used this with additionally jQuery tmpl plugin.
var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");
function showDialog(options) {
if (options && options.data && options.dialog) {
var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
}
}
function hideDialog (item) {
if (!item.jQuery) item = $(item);
item.dialog("close").dialog("destroy").remove();
}
usage:
showDialog({
data: {
title: "My Title",
text: "my Text"
}
dialog: {
myDialog: "options"
}
});
I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { /* get the id and fill in the boxes */ },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
var test = this.id;
alert("id = " + test);
});
So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.
Am I on the right track and can someone help me getting that variable there.
Thanks in advance.
Set a variable eg the_id on top of everything in your script and try this code:
$("#newproduct").click(function(){
$("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
the_id = this.id;
});
Thanks Sarfraz you were right about the variable. For others interest the full code is now:
$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { alert(id); },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
id = this.id;
$("#content_new").dialog('open');
});
$("#new").validationEngine();});
And on the opening of the modal dialog box i get the correct ID.
var dlg = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
'Update': function() {
alert(clientCode);
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$(".edit").click(function() {
myval = $(this).parent().children('td:nth-child(1)').text();
dlg.dialog('open');
return false;
});
How do I take "myval" and have it as the title of the dialog? I've tried passing it as an argument when doing dlg.dialog('open', myval) and no luck. I've also tried passing it as a parameter but with no luck either. I'm probably doing things in the wrong way, however.
$("#your-dialog-id").dialog({
open: function() {
$(this).dialog("option", "title", "My new title");
}
});
create the dialog in the click-event and use this to set title:
something like this:
$(".edit").click(function() {
myval = $(this).parent().children('td:nth-child(1)').text();
var dlg = $("#dialog").dialog({
autoOpen: false,
title: myval,
modal: true,
buttons: {
'Update': function() {
alert(clientCode);
},
Cancel: function() {
$(this).dialog('close');
}
}
});
dlg.dialog('open');
return false;
});