How can I keep event of change of select into dialog that don't fire?
my HTML:
<body>
<div id="dialog_message"></div>
</body>
my JAVASCRIPT:
var titolo = 'my dialog';
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>";
$( "#dialog_message" ).dialog({
resize: 'auto',
draggable: true,
resizable: false,
closeOnEscape: false,
open: function() { // open event handler
$(this).parent().find(".ui-dialog-titlebar-close").hide();
$(this).html(s);
},
buttons: {
Annulla: function() {
$( this ).dialog( "close" );
}
},
title: titolo
});
$("select").selectmenu();
$("#MYSEL1").on("change", function() {
var n=$(this).attr("id");
var dd = $("option:selected", this);
var d = $(this).val();
alert (d);
$("#MYSEL2").empty(); // remove old options
if (d=='A') {
$("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>');
} else {
$("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>');
};
});
You can find in jsfiddle at: https://jsfiddle.net/t0L915po/5/
You will need to add the event to select element after the dialog box opens. Use the below code:
var titolo = 'my dialog';
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>";
$( "#dialog_message" ).dialog({
resize: 'auto',
draggable: true,
resizable: false,
closeOnEscape: false,
open: function() { // open event handler
$(this).parent().find(".ui-dialog-titlebar-close").hide();
$(this).html(s);
$("#MYSEL1").on("change", function() {
var n=$(this).attr("id");
var dd = $("option:selected", this);
var d = $(this).val();
alert (d);
$("#MYSEL2").empty(); // remove old options
if (d=='A') {
$("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>');
} else {
$("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>');
};
});
},
buttons: {
Annulla: function() {
$( this ).dialog( "close" );
}
},
title: titolo
});
$("select").selectmenu();
Related
How do I access jQueryUI Dialog buttons upon creation and get their size? As a workaround, I could do so when it is opened.
http://jsfiddle.net/1ueho4tq/
var $button1;
var dialog = $('#dialog').dialog({
autoOpen: false,
create: function (event, ui) {
var $button1 = $('#button1');
console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
},
open: function (event, ui) {
if (!$button1) {
$button1 = $('#button1');
console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
}
},
buttons: [{
id: 'button1',
text: 'Upload',
click: function () {
console.log('button1');
}
}, {
id: 'button2',
text: 'Save',
click: function () {
console.log('button2');
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog("close");
}
}]
});
$('#open').click(function () {
dialog.dialog('open');
});
<div id="dialog"></div>
<button id="open">Open</button>
You can get the jQuery UI dialog buttons using buttons option getter.
Code:
var buttons = $('#dialog').dialog('option', 'buttons');
But if you need to check their dimensions you need to use the array after the dialog is opened.
Code:
open: function (event, ui) {
$.each(buttons, function (i, e) {
console.log($('#'+e.id).outerHeight())
});
},
Demo: http://jsfiddle.net/f4m6z9hc/
I wrote a dialog definition, but the name of the buttons depend on the situation.
When I open the dialog, I want to set the buttons name.
I can´t find a solution, how to rename a dialog button after define it.
Here is my Dialog Code:
$( "#neueFrage" ).dialog({
resizable: false,
autoOpen: false,
height: 900,
width: 1100,
modal: true,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide()},
buttons : [{
text : 'SAVE',
class : 'dialogbutton',
click : function() {}
},
{
text : 'CANCEL',
class : 'dialogbutton',
click : function() {
}
}
]
});
I call the dialog with this small code sample.
If 'Yes', everything is ok, but if not, I want to rename the button to 'REDO'.
if ($(this).text()=="Yes") {
$( "#neueFrage" ).dialog( "open" );
} else {
//Rename the button 'SAVE' to 'REDO' before open dialog
$( "#neueFrage" ).dialog( "open" );
}
How can I change the button´s name in else?
try this:
buttons : [
{
text : 'SAVE',
class : 'dialogbutton',
click : function() {},
id:"savebtn"
},
{
text : 'CANCEL',
class : 'dialogbutton',
click : function() {
},
id:"cancelbtn"
}
]
});
if($(this).text()=="Yes"){
$( "#neueFrage" ).dialog( "open" );
}else{
$("#savebtn").find("span").text("whatever")
$( "#neueFrage" ).dialog( "open" );
}
I am using jQuery fullcalendar and jQuery fancybox plugins in my current MVC project, My Issue is that, I want to open fancybox popup on my calendar event click, I able to open the popup by following snippet.
function openFancybox(object)
{
$.fancybox({
transitionIn: 'elastic',
transitionOut: 'elastic',
speedIn: 600,
speedOut: 200,
overlayShow: true,
type: 'inline',
content: '#dialogPopup',
onComplete: function () {
}
});
return false;
}
Here, openFancybox is function that called when somone click on calendar event.
Now, my issue is that popup comes blank on single click, but when, I again click it opens, Also, I lost all jQuery bindings that, I used for the other controls on the view i.e Dropdown change events, button click events etc.
Following is my snippet for popup div and ajax to fill PartialView data in div
<div id="dialogPopup" class="add-job-block">
</div>
$.get("/Events/LoadData", { id: object.id }, function (data) {
if (data != undefined && data != "") {
$("#dialogPopup").html("");
$("#dialogPopup").html(data);
//$.uniform.restore();
//$(".styled, input:radio, input:checkbox, .dataTables_length select").not('.no-uniform').uniform();
}
});
I have also used jQuery uniform plugin for styling the dropdown and other input controls.
The complete function snippet is as follows,
function openFancybox()
{
$.get("/Events/LoadData", { id: object.id }, function (data) {
if (data != undefined && data != "") {
$("#dialogPopup").html("");
$("#dialogPopup").html(data);
//$.uniform.restore();
//$(".styled, input:radio, input:checkbox, .dataTables_length select").not('.no-uniform').uniform();
}
});
$.fancybox({
transitionIn: 'elastic',
transitionOut: 'elastic',
speedIn: 600,
speedOut: 200,
overlayShow: true,
type: 'inline',
content: '#dialogPopup',
onComplete: function () {
}
});
return false;
}
I am calling function from calendar plugin call i.e.
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceDay,month,agendaWeek,agendaDay'
},
eventClick: updateEvent,
ignoreTimezone: true,
disableResizing: false,
disableDragging: false,
selectable: true,
selectHelper: true,
select: selectDate,
editable: true,
resources: "/Calendar/EventsResourceList",
events: "/Calendar/EventsList",
eventResize: eventResizedCompleted,
eventDrop: eventDragCompleted,
eventAfterRender: function (event, element, view) {
Date.prototype.formatMMDDYYYY = function () {
return this.getMonth() +
"/" + this.getDate() +
"/" + this.getFullYear();
}
var eventDate = new Date(event.start);
var todaysDate = new Date();
if (todaysDate.formatMMDDYYYY() === eventDate.formatMMDDYYYY()) {
setInterval(function () {
element.fadeOut(500).delay(300).fadeIn(400);
}, 2000);
}
}
});
function updateEvent(event, element) {
openFancybox({ id: event.id, jobid: event.JobID });
}
So, My issue is Popup comes on 2 clicks, also, I lost all jQuery bindings from controls, so anyone has any suggestion or tweak or solution or gone through this problem can be helpful to me.
I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.
Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred
I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.
This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.
Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;
Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip
I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?
Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'