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.
Related
I have a Jquery dialog where I want to display button based on a condition.
I tried using this solution to extend the button set but it's not displaying the dynamic button: Add a button to a dialog box dynamically
https://jsfiddle.net/q3u0xebz/
function showActionDialog(title, content, actionMessage, actionCallback) {
var actionDialog = $("<div id='action-dialog'></div>").html(content).dialog({
dialogClass: 'no-close',
title: title,
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
buttons: [{
text: 'Okay',
click: function() {
$(this).dialog('close');
$("action-dialog").remove();
}
}]
});
if (actionCallback != '') {
var buttons = actionDialog.dialog("option", "buttons"); // getter
$.extend(buttons, {
text: actionMessage,
click: function() {
eval(actionCallback).call();
$(this).dialog('close');
$("action-dialog").remove();
}
});
actionDialog.dialog("option", "buttons", buttons); // setter
}
}
I created this fiddle to show my problem.
Isn't it possible to use bootstrap columns in a jquery ui dialog without getting this annoying horizontal scrollbar?
Soory, I don't know how to insert the fiddle code with the right depencies in the right way.
First think then write...
Just remove the "row" div and it works.
Look here.
Soory, I don't know how to insert the fiddle code with the right depencies in the right way.
Just add "style='overflow-x:hidden;'" to the dialog container div.
function CreateBusinessDialog(action, formId) {
var contId = 'dlgcont_' + GetUidString();
var container = document.createElement('div');
container.setAttribute('id', contId);
container.setAttribute('style', 'overflow-x:hidden;');
document.body.appendChild(container);
$('#' + contId).dialog({
autoOpen: false,
modal: true,
title: 'Create New',
width: '75%', //$(window).width() - 150,
height: $(window).height() - 150,
open: function (event, ui) {
$(this).load(action);
},
buttons: [{
text: 'Create',
click: function () {
var form = $('#' + formId);
form.validate();
if (form.valid()) {
//alert('valid');
form.submit();
}
}
}, {
text: 'Close',
click: function () {
$(this).dialog('close');
}
}],
close: function () {
container.parentNode.removeChild(container);
}
});
$('#' + contId).dialog('open');
}
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');
});
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"
}
});
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;
});