Develop Reference

Why does my dynamically confirm box only work once?

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();

Toggle between images in javascript or jquery

I need to toggle between "edit.png" and "ok.png" . Initially web page loads the page contains "edit.png" image buttons. Like in the screen shot below
My requirement is, once i click on the edit.png it should be remains as edit.png image state. And once again i click on the edit.png it should changed to "ok.png". So how can i do this anyone help me.
What i tried is
$(function(){
$('.edit').on('click',function(){
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
})
$('#projectsTable').Tabledit({
url: '#',
deleteButton: false,
buttons: {
edit: {
class: 'btn btn-primary secodary',
html: '<img src="/concrete5/application/images/animated/btn_edit.png" class="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" class="ok" style="display:none" />',
action: 'edit'
}
},
columns: {
identifier: [1, 'Projects'],
hideIdentifier: true,
editable: [[1, 'Projects'], [2, 'Subprojects'],[8, 'Project Status', '{"1": "Open", "2": "Closed"}']]
},
onDraw: function() {
console.log('onDraw()');
},
onSuccess: function(data, textStatus, jqXHR) {
console.log('onSuccess(data, textStatus, jqXHR)');
console.log(data);
console.log(textStatus);
console.log(jqXHR);
},
onFail: function(jqXHR, textStatus, errorThrown) {
console.log('onFail(jqXHR, textStatus, errorThrown)');
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
onAlways: function() {
console.log('onAlways()');
},
onAjax: function(action, serialize) {
console.log('onAjax(action, serialize)');
console.log(action);
console.log(serialize);
}
});
$(function(){
$('.edit').on('click',function(){
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
})

Use a click counter, so when you click on the button the second time, it shows the "edit" button and resets the counter back to 0.
When you then click on the "ok" button it changes back to the "edit" button, and because you now have done the first edit, next time you click on the button it changes to "ok" right away.
$('.edit').each(function() {
var clickCounter = 0, // Sets click counter to 0 - No clicks done yet
firstEdit = false; // Sets first edit to false
$(this).on('click', function() {
clickCounter++;
if( clickCounter == 2 || firstEdit == true ) {
$(this).toggle();
$(this).next('.ok').toggle();
clickCounter = 0; // Reset counter
firstEdit = true;
}
});
});
$('.ok').on('click', function() {
$(this).toggle();
$(this).prev('.edit').toggle();
});
Working Fiddle

$(window).ready(function(){
$('.edit').each(function(){
var counter=0;//add a counter to each edit button
this.on('click',function(){
counter++;//increase counter
console.log(counter);
if(counter===2){//if button clicked twice
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
counter=0;//reset counter
}
});
});
});
or taking pure ES6:
window.onload=function(){//when the page is loaded
var imgs=[...document.getElementsByClassName("edit")];//get all edit imgs
imgs.forEach(img=>{//loop trough images
var counter=0;//add a counter for each image
img.onclick=function(){
counter++;//onclick increase counter
if(conter===2){//if img was clicked twice
this.src="ok.png";//replace the img
counter=0;
}
}
});
};

You can use one class to control and change the state of your button:
$('.edit').on('click',function(){
if ($(this).hasClass('is-state1')) {
$(this).next(".ok").toggle();
$(this).toggle();
}
$(this).toggleClass('is-state1');
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
Also I'm thinking you are wrong in ok button event as you want change your previous and not your next button:
$('.ok').on('click',function(){
$(this).toggle();
$(this).prev(".edit").toggle();
});

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.

How can I close / dismiss Bootstrap Popover when clicking the popover trigger element?

jsFiddle: http://jsfiddle.net/kAYyR/
Screenshot:
Here's what works:
Open popover on button click
Close popover on click outside popover
Close popover on click of .close button
BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.
Duplicate it yourself here.
How can I accomplish this?
HTML:
<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>
JS:
$('#popoverId').popover({
html: true,
title: "Popover Title",
content: function () {
return $('#popoverContent').html();
}
});
var isVisible = false;
var clickedAway = false;
$('.popoverThis').popover({
html: true,
trigger: 'manual'
}).click(function (e) {
$(this).popover('show');
$('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">×</a>');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function (e) {
if (isVisible & clickedAway) {
$('.popoverThis').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});

Do you want work like this ?
http://jsfiddle.net/kAYyR/3/
$('#popoverId').popover({
html: true,
title: 'Popover Title<a class="close" href="#");">×</a>',
content: $('#popoverContent').html(),
});
$('#popoverId').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('#popoverId').popover('hide');
}
});

I use this:
$('[data-toggle="popover"]').popover({html: true, container: 'body'});
$('[data-toggle="popover"]').click(function (e) {
e.preventDefault();
$('[data-toggle="popover"]').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function (e) {
if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
$('[data-toggle="popover"]').popover('hide');
}
});

it can simply done by using this code
<div id='content'>something here</div>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
return $('#content').html();
}
}).click(function (e) {
$('[data-toggle=popover]').not(this).popover('hide');
});

This simple code will hide all popovers on the page
$('.popover').popover('hide');