Why does my dynamically confirm box only work once? - javascript

I have attempted to create a custom confirm UI dialog box, which works perfectly on the 1st attempt, and then on a second attempt of running it, I no longer get alerted of my choice as well as the window does not close. Why is that? What else am I doing wrong here that I perhaps overlooked?
Here is the HTML and Javascript in question:
<input type="button" id="Button" value="Click Me" />
$('#Button').click(function () {
confirmUI('is OK?', 'confirm', function () {
alert('click OK');
}, function () {
alert('click Cancel');
});
});
var confirmUI = function (text, title, callbackOkClose, callbackCancelClose) {
var $dialog = $('<div id="confirm_' + new Date().getTime().toString() + '"></div>');
$dialog.html('<div>' + title + '</div><div>' + text + '<div style="width:100%;"><input type="button" id="confirmCancel" value="Cancel" style="float:right;" /><input type="button" id="confirmOk" value="OK" style="float:right;margin-right: 10px" /></div></div>');
$('body').append($dialog);
var buttonString = '';
$dialog.jqxWindow({
minWidth: 300,
minHeight: 80,
draggable: true,
initContent: function () {
$('#confirmOk').jqxButton({
template: 'primary'
});
$('#confirmCancel').jqxButton({
template: 'default'
});
},
resizable: false,
closeButtonAction: 'close',
isModal: true,
okButton: $('#confirmOk'),
cancelButton: $('#confirmCancel')
});
$dialog.on('close', function (e) {
console.log('1');
if (e.args.dialogResult.OK) { //ok
if (callbackOkClose) {
callbackOkClose();
}
} else { //cancel or close
if (callbackCancelClose) {
callbackCancelClose();
}
}
});
return $dialog;
};
Here is a jsfiddle: http://jsfiddle.net/v0re8jeu/

Because you are creating that dialog for every button click, so things like $('#confirmOk') are no longer unique and return the selector for the button you clicked on first time. You should remove it from dom on close for the next one to work:
$dialog.on('close', function (e) {
console.log('1');
$dialog.remove();

Related

angular ng-click ou javascript evento click dentro do HTML SweetAlert2

I'm trying to do an implementation with SweetAlert2 where create some buttons inside the property "html". This is within a click function which in turn is within a Controller.
I tried to add in a setTimeOut () and within the $ apply () as code below:
setTimeout(function () {
$scope.$apply(function () {
swal({
title: "Lançamento por Código",
width: 400,
html: "" +
" <div>" +
" <input type='button' id='btn0' name='btn0' value='0' />" +
" </div>" +
showCancelButton: true,
confirmButtonColor: "#FFB200",
cancelButtonColor: "#FFB200",
colorHoverButton: "#5B2E90",
confirmButtonText: "Confirmar",
cancelButtonText: "Cancelar",
closeOnConfirm: true,
reverseButtons: true,
input: "text"
}).then(function () {
});
})
},0);
For this button I created, I try to create a click event as the code below:
setTimeout(function () {
$scope.$apply(function () {
$("input[name='btn0']").on("click", function () {
$scope.valorLancProduto += "0";
$('.swal2-input').val($scope.valorLancProduto);
});
})
},0);
I tried to put the same into the init () function and a click function. My problem arises now, click this event is not working, it is not called. How can I solve this?
Can change the call from my onclick event, was as follows:
$(document).on('click', "#btn0", function () {
Thanks.

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.
Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

tooltip inside popover stays after popover is closed - ZeroClipboard

I'm trying to add buttons to popover that will allow user to copy content.
I managed to build prototype: http://jsfiddle.net/Misiu/VUZhL/890/
but I have weird error when using tipsy inside popover:
After clicking on Click for action button I get popover with 2 buttons, they both have tooltips, sometimes after clicking on button tooltip stays visible.
My code:
$(function () {
$('#example').tipsy({
title: 'data-tipsy-title',
gravity: function () {
return this.getAttribute('data-tipsy-gravity') || 'n';
}
});
$(document).on('click', '#example, .tip', function (event) {
$(this).tipsy("hide");
});
$('#example').popover({
placement: 'top',
title: '',
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content no-padding"></div></div>',
content: '<div class="btn-group">' +
'<button type="button" title="link" class="btn btn-default tip number"><span class="fa fa-link"></span></button>' +
'<button type="button" class="btn btn-default tip" title="something else"><span class="fa fa-copy"></span></button>' +
'</div>'
});
$('#example').on('shown.bs.popover', function () {
//tipsy
$('.tip').tipsy({
gravity: 's'
});
//zero clipboard
var clip = new ZeroClipboard($(".tip"));
clip.on("copy", function (event) {
var clipboard = event.clipboardData;
var data = "";
if ($(event.target).hasClass("number")) {
data = "1st button"+new Date()
} else {
data = "second";
}
clipboard.setData("text/plain", data);
ZeroClipboard.deactivate();
});
})
//zero clipboard
ZeroClipboard.config({
hoverClass: "hover"
});
});
My questions:
1. How can this be fixed?
2. Is ZeroClipboard initialized in right place? I can't do that before, because buttons are added when popover is shown for first time.

Inside the jquery popup dialog asp button doesn't fire event

I have following snippets for popup dialog
$(document).ready(function () {
$('a#MainEdit').live('click', function (e) {
var page = $(this).attr("href")
$.fx.speeds._default = 900;
var $dialog = $('<div id="Editdialoge"></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 580,
width: 700,
resizable: false,
show: "fade",
title: 'Edit Employee Details',
open: function () {
$(":button:contains('Close')").hide();
$('.ui-dialog-buttonpane').hide();
},
buttons: {
"Close": function () { $dialog.dialog('close'); }
},
close: function (event, ui) {
__doPostBack('<%=updAccountObject.ClientID %>', '');
}
});
$dialog.dialog('open');
e.preventDefault();
});
This is my button
<asp:Button ID="btnAddEmployee" runat="server" Text="Add" CssClass="pms_btn" OnClick="btnSubmit_Click">
Button can not fire the click() event.
I need help to fire the server event.
Please make your question more clear.
Be any problem(ID or jquery), I guess this will fix your problem.
Don't use live function, it has been deprecated now.
Instead, use this line:
$('a#MainEdit').on('click', function (e) {
or
$(document).on("click", "a#MainEdit", function() {
I hope this works for you.
For buttons, i prefer to use:
$('<%=updAccountObject.ClientID %>').click();

Clicking on element from jQuery dialog generated by function

I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!

Categories

Resources