I have a popover like this. And i need it to work as focus, the only thing when i click on quantity field it disappears, because the link is not focused.
Here is the code:
var popover = $("[data-toggle=popover]").popover({
trigger : 'focus',
placement : 'right',
container: 'body',
html: 'true'
}).on('show.bs.popover', function() {
product_id = $(this).attr('data-product-id');
popover = $(this);
$.ajax({
url : '/product/short_description/' + product_id,
success : function(html) {
popover_id = popover.attr('aria-describedby');
$('#' + popover_id + ' .popover-content').html(html);
}
});
});
Try this:
var popover = $("[data-toggle=popover]").popover({
trigger: 'manual',
placement : 'right',
container: 'body',
html: 'true'
}).on('show.bs.popover', function() {
product_id = $(this).attr('data-product-id');
popover = $(this);
$.ajax({
url : '/product/short_description/' + product_id,
success : function(html) {
popover_id = popover.attr('aria-describedby');
$('#' + popover_id + ' .popover-content').html(html);
}
});
}).click(function(e){
$(this).popover('show');
e.preventDefault();
}).addClass('mypopover');
Then :
$('html').click(function() {
$(".mypopover").hide();
});
$('.mypopover').click(function(event){
event.stopPropagation();
});
Related
I can't seem to get a reference to the on click events of buttons in the titlebar but if they are in the regular content area of the dialog I can click them. Can anyone point me in the right direction to be able to register click events from the buttons in the title bar?
// Define the player details window dialog
var dialog = $(".graph-container").dialog({
autoOpen: false,
modal: true,
show: {
effect: "clip",
duration: 1000
},
hide: {
effect: "explode",
duration: 2000,
complete: function () {
console.log('complete');
}
},
width: modalWindow.width,
height: modalWindow.height,
resizable: false,
beforeClose: function (event, ui) {
console.log('before close function');
},
position: {
my: 'center',
at: 'center',
of: window
}
});
// Override the undocumented _title property to allow HTML in the title
// More info: http://stackoverflow.com/questions/4103964/icons-in-jquery-ui-dialog-title
dialog.data("uiDialog")._title = function (title) {
title.html(this.options.title);
};
dialog.dialog('option', 'title', '<span class="left">Stats for ' + player.PlayerName + ' - Last ' + $scope.gameFilter + ' games</span>' +
'<span class="right"><div id="dateButtonDiv">' +
'<button class="dateButton">5</button>' +
'<button class="dateButton">25</button>' +
'<button class="dateButton">100</button>' +
'</div></span>');
$(".graph-container").dialog("open");
$('.dateButton').click(function () {
var btn = this;
console.log('Date button clicked');
});
Your elements are coming dynamically into the dom so the normal click event will not work for them. you have to bind the event on the document object and delegate it to the dynamic class.
following code might work, you can try it in your case
$(document).on('click', '.dateButton' , function() {
var btn = this;
console.log('Date button clicked');
});
I have a table in my website and when i hover over a link i create a tooltip, the issue is that when i move my mouse over the links quickly multiple tooltips will be displayed as seen in the screenshot below,
I need to have only one tooltip on screen at a time and remove it if the user is no longer hovering. I create the tooltips in side the success function of an ajax call so i will only display the tooltip if the controller returns a status of true. The code for this can also be found below. Any suggestions on how i can ensure only one tooltip is displayed at a time. Thank you for any help you can give.
function tooltip(){
$('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {
var id = $(this).attr('value');
var statusResponse;
var selector = $(this);
$.ajax({
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
dataType: "json",
success: function (Response) {
if(Response.status == true)
{
var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>";
$(selector).qtip({
content: {
text: html + Response.Response,
title: {
text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
}
},
position: {
target: 'mouse',
adjust: {x:5,y:5}
},
show: {
ready: true,
effect: function () {
$(this).slideDown();
}
},
style: {
//classes: 'qtip-dark'
classes: 'qtip-green'
},
hide: {
effect: function () {
$(this).slideUp();
}
},
api: {
beforeShow: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
},
beforeHide: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('enable');
}
}
}, event);
}
}
});
});
};
Again thank you for any help.
Right now your function is called on the event mouseenter.
Create another event mouseleave with a function that aborts the ajax call with storedAjax.abort(). However for this to work you need to store the ajax call in a global variable first.
Store the AJAX call in a global variable
requestAjax = $.ajax({ ... });
On the top of the function tooltip() just do
if(requestAjax) requestAjax.abort();
and then hide all the tooltips and and then proceed with the rest of the code.
and Add
$("#tblOrder").mouseleave(function(){
$(this).qtip("hide");;
});
I am using jquery ui Dialog box to create multiple notes in my Web Application. So there is a add-note button which clicks to open a note (dialog box at center).
User can open multiple notes (dialogs) together and fill content save, delete, etc on each.
Problem arises when multiple notes are opened and I start deleting some randomly. So on deletion the positioning of the opened dialog gets affected. The opened dialogs after deletion of any start moving upwards on the screen.
I have been trying to solve this from quite some time. Plz help.
My JS:
function createNote(note, noteContent, newNote){
var noteDiv = $('<div> <textarea class="note-textarea" style="width:100%;background-color:#D3D3D3;"></textarea> </div>');
noteDiv.clone(true).attr("id", noteId)
.dialog({
modal : false,
draggable : false,
resizable : false,
open: function(){
$("#"+ noteId).find('textarea').val(noteContent);
$("#"+ noteId).find('textarea').css({
'height': $("#" + noteId).parent().height()
});
}, create: function(){
// Create Title Textfield inside note top bar
$("<input type = 'text' placeholder='Title' class='note-title'></input>").appendTo($("#"+ noteId).prev(".ui-dialog-titlebar").find('span'));
$("#"+ noteId).prev(".ui-dialog-titlebar").find('input').val(noteTitle);
if(!jQuery.isEmptyObject(note)){
createLastModifiedSpan($("#"+ noteId), lastModified);
}
},
buttons : [ {
text : "Save",
disabled: true,
click : function() {
......AJAX CALL to SAVE
}],
beforeClose: function(event, ui) {
if(confirm('Are you sure you want to delete this note?')){
$.ajax({
type: 'POST',
url: "/common/deleteNote.action",
data:
{
'note.id.operatorId':$('#operatorId').val(),
'note.id.noteId':noteId
},
success: function(data, textStatus, jqXHR){
if(data.result == 'success'){
alert('Deleted Successfully');
numberOfNotesCreated--;
}else
alert('Error in Deleting. Contact Admin');
},
error: function(data){
alert("Error in DB!");
}
});
}else
return false;
},
resize: function(event, ui) {alert('dskjfsf')},
position:[10,100]
});
$("#"+ noteId).dialog('open');
$("#" + noteId).parent().draggable()
.resizable();/*.position({
my: "center",
at: "center",
of: window
});*/
//Fire event on Either textarea or note title
$("#"+ noteId).find('.note-textarea')
.add($("#"+ noteId).prev('.ui-dialog-titlebar').find('.note-title')).keydown(function(event) {
if($(this).val() != '') {
toggleSaveButton($( "#" + noteId ), "enable");
}
});
if(newNote){
elementCount++;
numberOfNotesCreated++;
}
prevNoteId = noteId;
}
EDIT: If I add notes in sequence say 1, 2, 3, 4 and start deleting from the recently added like 4, 3, 2.. the positiong does not give a problem, however when I start deleting randomly 2, 1.. then the other notes postioning gets disturbed.
Found this on the jquery form which solved my problem :
https://forum.jquery.com/topic/bug-when-closing-one-dialog-within-multiple-stacked-dialogs
Put this in close function of the dialog:
var widget = $(this).dialog("widget"), height = widget.height();
widget
.nextAll(".ui-dialog").not(widget.get(0))
.each(function() { var t = $(this); t.css("top", (parseInt(t.css("top")) + height) + "px"); });
i'm new here and didn´t find the solution for my problem.
i searched the web and tried tons of solutions but they didn´t work.
i use Jquery Tabs with the closable feature( http://jsfiddle.net/42er3/9/ )
Now i wanted to activate the latest created Tab. This doesn´t work ^^
Here is my Code:
$(function () {
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 1;
var tabs = $("#tabs").tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Send: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find("form").submit(function (event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = tabTitle.val(),
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "' class='rel'><p>" + tabContentHtml + "</p><hr /><div id='writebox'><form name='send' id ='sent'><textarea name ='msg' class='boxsizingBorder'></textarea><input type='submit' name='" + id + "' /></form></div></div>");
//after added the tab, active it
tabs.tabs({
active: tabCounter
}); // <---------------------------Here it is
//alert(panelId+"-"+tabCounter);
tabCounter++;
tabs.tabs("refresh");
}
// addTab button: just opens the dialog
$("#add_tab")
.button()
.click(function () {
dialog.dialog("open");
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
You can use the following code to programatically make a tab active
$( "#tabs" ).tabs( "option", "active", 2 );
I've updated the addTab() method in your Fiddle as follows:
function addTab() {
...
tabs.tabs("refresh");
tabs.tabs( "option", "active", tabCounter-1 );
tabCounter++;
}
As tab indexes start at 0 rather than 1, I've had to subtract 1 from tabCounter to get the index of the tab that was just added.
See here for a demo
I need to access a hidden field named 'partnerId' in my form data from this js code:
$(document).ready(function() {
showPartnerSettings = function(e) {
e.preventDefault();
var $dialogForm = $("<div />")
.attr("id", "partner-settings-form")
.append($loading.clone())
.load(envPath + "/partner/settings?partnerid="+e.data.partnerId, null, function(){ $("#partner-settings-form").css("display", "block"); })
.dialog({
title: "Partner Settings",
modal: false,
resizable: false,
width: 580, //CPB 04.11.13
position:['middle',130],
"close" : function(){
var dialogid=$(this).parent("div").attr("id");
$("#Tabs ul li."+dialogid).remove();
$(this).remove();
$("#alertmod").remove();
//$link.removeClass('preventclick');
},
})
.dialog("open")
.css("display", "block");
return false;
};
Is there any way to retrieve this value from the event object passed to showPartnerSettings()?
You're going to need to access it after it has been loaded into the DOM.
var $dialogForm = $("<div />")
.attr("id", "partner-settings-form")
.append($loading.clone())
.load(envPath + "/partner/settings?partnerid="+e.data.partnerId,
null,
function(){
/* access field here ... */
var field = $('#partnerId');
$("#partner-settings-form").css("display", "block");
}
).dialog({
title: "Partner Settings",
modal: false,
resizable: false,
width: 580, //CPB 04.11.13
position:['middle',130],
"close" : function(){
var dialogid=$(this).parent("div").attr("id");
$("#Tabs ul li."+dialogid).remove();
$(this).remove();
$("#alertmod").remove();
//$link.removeClass('preventclick');
},
})
.dialog("open")
.css("display", "block");