We Keep Coding

Bootstrap Popover from Ajax

I created a jQuery plugin that loads data from AJAX and then display the data from popover. And when the user click the button again, the button will display the popover instead of reload the data from AJAX.
Here's the code (and this is the jsfiddle https://jsfiddle.net/petrabarus/spqdqqhL/)
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content})
.popover('show');
});
});
});
}
$('.my-button').myButton();
The popover loads, but the weird thing is that after the popover being displayed for the first time, I have to click twice to hide the popover. But after that the popover works fine: one click to display and one more to hide so on.
What is that happening and how to fix it?

Try this :
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content});
//.popover('show');
w.trigger( "click" ); // this is not proper way but it is working
});
});
});
}
$('.my-button').myButton();

Simplemodal: Form Submit vs Close in iFrame

Got a popup legal notice inside an simplemodal window (iframe) that's working exactly as I expect it to. There's a form in the iframe that when you submit it, the modal window closes and you continue on to your destination - in this case, a "mailto:" link.
Problem is - I need a separate "close" function that doesn't open the mailto link, just closes the modal. Currently, submitting the form OR clicking the "close" link both open the "mailto" link.
What I've got so far:
Inside my iFrame to handle the form submit:
$('#alertFORM').submit(function() {
window.parent.jQuery.modal.close(true);
});
And my functions handling everything else:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "<a href='#'>Close</a>",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});
I believe I understand the problem - both the form submit and the 'close' link call the onClose function. Haven't quite figured out ow to seperate the two yet so only the form submit opens the 'mailto' link.
I've tried changing the code in my iFrame:
$('#alertFORM').submit(function() {
parent.closeModal();
});
... and then back on the parent page at the top of my javascript above:
function closeModal() {
$("#modal").dialog("close");
}
... but that doesn't work.
Actively working on it. Suggestions most appreciated.

Got it finally! Inside the file in my iFrame:
$('#alertFORM').submit(function() {
window.showEmail = "true";
window.parent.jQuery.modal.close(true);
});
$( ".modalCloseImg" ).on('click', function (e) {
window.parent.jQuery.modal.close(true);
});
... and back on the parent page:
onClose: function (dialog) {
window.redirectEmail = window.legalFRAME.showEmail;
if(window.redirectEmail == "true")
{
window.location.href = mailto;
window.legalFRAME.showEmail = "false";
window.redirectEmail = "false";
}
$.modal.close();
}

jQuery button. Remove when clicking icon

Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.
Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed.
Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)
So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?
Code:
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).delegate("span.ui-icon-circle-close", "click", function () {
var btnId = $(this).closest("div").remove().attr("aria-controls");
$("#" + btnId).remove();
});
$('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}
function IconCloseClicked(value) {
$(value).parent().prop("disable", "true");
//alert($(value).parent().attr("id"));
alert("icon");
Remove($(value).parent());
}
function ButtonClicked(o) {
var test = $(o).prop("disable");
alert("div");
if ($(o).attr("disable") == undefined) {
Opendialog();
}
}
function Remove(value) {
$(value).remove();
}
function Opendialog() {
$("#dialog").dialog("open");
}
Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.
Updated(What I ended up with):
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).click(function (e) {
Opendialog();
});
$('.ui-icon-circle-close').click(function (e) {
$(this).parent().remove();
e.stopPropagation();
});
}
function Opendialog() {
$("#dialog").dialog("open");
}

I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()
$('.icon').click(function(e){
e.stopPropagation();
});

Detach and Attach div as a dialog in jquery

I have a div with some id that contains some buttons/labels. Its a container itself. I want to have a button that when user clicks on the button a dialog has to appear with the same div but the div has to disappear from the page. So when Detach button is clicked a dialog appears with that div and button changes into Attach. When attach is clicked dialog disappears and regular div appears on the page.
This is what i tried so far, it works only when Detach is clicked, if Attach is clicked dialog closes but regular div does not show up.
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
});
i know im missing a code in Attach part it only closes the dialog but i tried various things like appending to body again the div and so on but didnt work. Thank you

You could use jQuery's $.clone() to create a duplicate of the div and then show/hide it along with the dialog like this:
var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
$clone.dialog({
autoOpen: false,
width: 700,
});
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$original.hide();
$clone.dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$original.show();
$clone.dialog('close');
$(this).html('Detach');
}
});​
JSFiddle Here

Try this:
html:
<button id="button">Attach</button>
javascript (jquery):
$("#button").click(function() {
var button = $(this).html();
if (button === "Attach") {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
else {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
}
});
That should work :)

Try this:
HTML
<button class="content detach"></button>
CSS
.content.detach:after {
content: "Detach";
}
.content.attach:after {
content: "Attach";
}
JS
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$(".content, .ui-dialog-titlebar-close").on("click", function(){
if ($(".content").hasClass("detach")) {
$('.search_div_box').dialog('open');
} else {
$('.search_div_box').dialog('close');
}
$(".content").toggleClass("detach attach");
});
DEMO:
http://jsfiddle.net/n8Mbz/

Jquery UI autocomplete combobox button click event

I'm experiencing weird behavior with jquery ui autocomplete when using it to create a combobox. Whenever I click on the scrollbar to scroll through the list of results AND then click on my combobox button to close the results the results list closes and then opens again. I expect it to close the menu.
Steps to Repro
open jsfiddle demo
Type 'i' in the autocomplete OR hit the dropdown button.
Click on the vertical scroll to scroll the results
Click on the dropdown button
Script to Create Button
this.button = $("<button type='button'> </button>")
.attr({ "tabIndex": -1, "title": "Show all items" })
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function () {
// when i put breakpoint here, and my focus is not on input,
// then this if steatment is false????
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
CSS (force long results menu to scroll)
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
My solution could be closing the widget even if focus is transferred to widget itself and not the input element?
Any ideas how to modify this code so it behaves this way?

Based on issues with the various click and mouse events for the automplete widget, I came up with this: jsFiddle example.
jQuery:
var input = $('#txtComplete');
var data = [];
var isOpen = false;
function _init() {
for (var idx = 0; idx <= 100; idx++) {
data.push('item: ' + idx);
};
input.autocomplete({
source: data,
minLength: 0,
open: function(event, ui) {
isOpen = true;
},
select: function(event, ui) {
isOpen = false;
}
});
}
function afterInit() {
var button = $("<button type='button'> </button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function(event) {
input.focus();
if (isOpen) {
input.autocomplete("close");
isOpen = false;
} else {
input.autocomplete("search", "");
event.stopImmediatePropagation();
}
});
}
$(window).click(function() {
input.autocomplete("close");
isOpen = false;
});
$(function() {
_init();
afterInit();
});​

The problem is because of a work around in jquery ui autocomplete. There is a mousedown event setup to close the menu under certain conditions. In one of the conditions it checks to see if the item that raised the mousedown is part of the autocomplete widget. If not, it closes the menu. Since you are tacking on combobox behaviour and your button is not part of the autocomplete widget, a click on the button is closing the menu because of this event.
You can see the offending condition with the reason why it is there starting at line 205 in the autocomplete source on github. It is probably worth raising the issue on the jquery ui forums since their combobox demo has this bug too.
UPDATE
This replacement event is based off of jquery-ui 1.8.18. This event has changed and will very likely change again. You might need to update this code manually with each release if you go this route.
You can patch the mousedown event to not close the menu if it was your combo button that was clicked by running the following after you create your autocomplete (jsfiddle demo).
var input = $('#combotextbox').autocomplete(/*options*/);
input.data('autocomplete').menu.element.unbind('mousedown').mousedown(function(event) {
var self = input.data('autocomplete');
event.preventDefault();
// clicking on the scrollbar causes focus to shift to the body
// but we can't detect a mouseup or a click immediately afterward
// so we have to track the next mousedown and close the menu if
// the user clicks somewhere outside of the autocomplete
var menuElement = self.menu.element[0];
if (!$(event.target).closest(".ui-menu-item").length) {
setTimeout(function() {
$(document).one('mousedown', function(event) {
var t = $(event.target);
if (event.target !== self.element[0] && event.target !== menuElement && !$.ui.contains(menuElement, event.target) && !t.hasClass('ui-combo-trigger') && !t.parent().hasClass('ui-combo-trigger')) {
self.close();
}
});
}, 1);
}
// use another timeout to make sure the blur-event-handler on the input was already triggered
setTimeout(function() {
clearTimeout(self.closing);
}, 13);
});
This removes the current mousedown event and then adds it back in with an added check to see if the element that triggered the event or its parent (button clicked or ui-icon inside the button is clicked) has a class ui-combo-trigger.
The code to create your button is relatively unchanged. We just need to add the new class ui-combo-trigger.
var button = $("<button type='button'> </button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon ui-combo-trigger").click(function(event) {
// when i put breakpoint here, and my focus is not on input,
// then this if steatment is false????
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
event.stopImmediatePropagation();
});

Try this jsfiddle. I think it ll help you.
var input = $('#txtComplete');
var data = [];
var openCheck = false;
function _init() {
for (var idx = 0; idx <= 100; idx++) {
data.push('item: ' + idx);
};
input.autocomplete({
source: data,
minLength: 0,
open: function(event, ui) {
openCheck = true;
},
select: function(event, ui) {
openCheck = false;
}
});
}
function afterInit() {
var button = $("<button type='button'> </button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function(event) {
if (openCheck) {
input.autocomplete("close");
openCheck = false;
} else {
input.autocomplete("search", "");
}
});
}
$(function() {
_init();
afterInit();
});

Brian explained the problem very good. With jquery ui 11 you can do something like:
wasOpen = false;
$button
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// Close if already visible
if ( wasOpen ) {
return;
}
see example at http://jqueryui.com/autocomplete/#combobox