How can I close all other jQueryUI tooltips when a user opens a new tooltip. I want to avoid littering the UI with open tooltips.
I did not want to clutter up what I thought was a straightforward question but my tooltips are customized to only show when a user has clicked on a help icon or field name as in the example below. In addition as in the example, the help triggers are not in the [label] tag associated to that input and so the tooltip can't count on the field focus. I suspect that is the issue.
function loadCSS(filename) {
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", filename);
document.head.appendChild(file);
}
loadCSS("https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css");
// Disable HOVER tooltips for input elements since they are just annoying.
$("input[title]").tooltip({
disabled: true,
content: function() {
// Allows the tooltip text to be treated as raw HTML.
return $(this).prop('title');
},
close: function(event, ui) {
// Disable the Tooltip once closed to ensure it can only open via click.
$(this).tooltip('disable');
}
});
/* Manually Open the Tooltips */
$(".ui-field-help").click(function(e) {
var forId = e.target.getAttribute('for');
if (forId) {
var $forEl = $("#" + forId);
if ($forEl.length)
$forEl.tooltip('enable').tooltip('open');
}
});
.ui-field-help {
text-decoration: underline;
}
input {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<table width=100%>
<tr>
<td for="A000" class="ui-field-help">First</td>
<td><input type="Text" id="A000" title="title #A000"></td>
</tr>
<tr>
<td for="B000" class="ui-field-help">Second</td>
<td><input type="Text" id="B000" title="title #B000"></td>
</tr>
<tr>
<td for="C000" class="ui-field-help">Third</td>
<td><input type="Text" id="C000" title="title #C000"></td>
</tr>
<tr>
<td for="D000" class="ui-field-help">Fourth</td>
<td><input type="Text" id="D000" title="title #D000"></td>
</tr>
<tr>
<td for="E000" class="ui-field-help">Fifth</td>
<td><input type="Text" id="E000" title="title #E000"></td>
</tr>
</table>
What I was asking for was unnecessary. If used correctly jQueryUI tooltips will automatically close themselves based on the focus/hover events.
If the tooltip is opened without triggering these events then there won't be any way for it to automatically close itself.
I had intentionally opened the tooltips via a click on a separate help icon. That click did not trigger the focus. By fixing my code to move the icon into the LABEL (for=) tied to the INPUT, it resulted in the INPUT receiving the focus which then gave the jQueryUI tooltip widget what it needed to manage the visibility.
Related
I've set up a html where: when you click on a journal button, you open a jquery modal dialog box with more information and the journal. All well and good. But I want audio to play when the dialog box is opened.
So far I have 11 dialog boxes and 11 separate audios for each respective one, but when the audio is set to 'autoplay' all the audios on the page start playing as soon as the page is loaded at once.
How can I make it so that the audio for each respective journal button only starts playing when the dialog box opening button is clicked?
Here's my code for one of the dialog boxes:
<div id="dialog-4" title="The brushwood platform"><p><span style=""><em>Kevin and Izzy worked on excavating the brushwood platform.</em></span></p>
<table width="688" height="390" align="center" class="dialog_form">
<tr>
<td width="320" height="189"><figure><img src="images/megaphone.png" width="250" height="320" border="0" alt="Illustration of Izzy and Kevin filler"/><figcaption>Illustration of Kevin and Izzy</figcaption></figure></td>
<th width="13"> </th>
<td width="631"><p>This is an area that had been created by laying down brushwood and then covering with worked timbers.</p></td>
</tr>
<tr>
<td height="142" style="text-align: center"><audio id="audio4" title="Spoken Journal" preload="auto" controls autoplay loop >
<source src="../Kizzy (brushwood, reed peat).mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>
</td>
<td> </td>
<td><p>The platform is on the lake edge and was likely used for stability on the boggy ground. Evidence of flint knapping has been found in and around the platform.</p></td>
</tr>
<tr>
<th height="251"><figure><img src="images/imgp2925-copy.jpg" width="300" height="190" alt="Brushwood"/><figcaption>Part of the brushwood platform excavated in 2015 at Star Carr.</figcaption></figure></th>
<th> </th>
</tr>
</div>
<button id="opener-4"></button>
</article>
var __adobewebfontsappname__="dreamweaver"
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
width: 950,
height: 600,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});
UPDATE: The third bullet below ("so I tried the following" section) is the closest I have come to a fix. I think I basically need to 1) disable the button, 2) add ui-disable, 3) jqm refresh, all within the data-bind or model.
I am trying to get one of the knockout demos to run with jqm in order to build something similar in my project. It mostly works except that the submit button does not disable goes disabled but does not appear grayed out if items = 0.
If you remove jqm, the example works fine and the button turns gray. I realize that jqm can conflict with knockout due to dom manipulation so I tried the following:
Triggering style refresh in the model methods: $('button').button(); or $('.ui-page-active' ).page( 'destroy' ).page();
Starting the binding after pageinit. This broke the entire thing.
As a test, I tried a data-bind to set ui-disable instead of disabling the button. It applies the class but jqm needs a refresh somehow. Can I put code into the data-bind to do the refresh?
<button data-bind="css: {'ui-disable': gifts().length > 0}" type='submit'>Submit</button>
Here is the fiddle I have been using to troubleshoot this: http://jsfiddle.net/wtjones/wkEgn/
What am I missing?
<form action='/someServerSideHandler'>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input class='required' data-bind='value: name, uniqueName: true' /></td>
<td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
The model code:
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function() {
self.gifts.push({
name: "",
price: ""
});
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
};
};
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"}
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
//$("form").validate({ submitHandler: viewModel.save });
Yep. If you change button properties via JS (or using KO to change these props), then you must call the refresh method to update visual styling.
$('button').button('refresh');
So I suggest to create custom binding instead of default enable that updates mobile button styling (if applied):
ko.bindingHandlers.mobileEnable = {
update: function(el) {
ko.bindingHandlers.enable.update.apply(el, arguments);
$.fn.button && $(el).button('refresh');
}
}
and...
<button data-bind='mobileEnable: gifts().length > 0' type='submit'>Submit</button>
Corrected fiddle: http://jsfiddle.net/wkEgn/2/
I have a table structure like this with out any ID and span has same text.
<table>
<tr>
<td>
<span>Name</span>
</td>
<td>
<span>Name</span>
</td>
</tr>
</table>
If i click on first span this will open a pop up. Pop up contains text box and Button.If i type some text and click the button, the clicked span should replace with newly entered text. how can i identify the clicked span and replace the text?.
The same way we need to do for second span.
Thanks
you can pass this to your function when you click on span like so:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
You will have to store the element so u can change it later when ure done with the popup.
function openPopup(el)
{
// open popup and if button pressed
el.innerHTML = yourNewText;
}
Here is a simple example of how to achieve this:
http://jsfiddle.net/ApsbC/7/
And the code snippet:
$(document).on("click","span",function(){
alert($(this).text());
// some popup code here
$(this).html("Some new Name");
});
EDIT:
I suggest though putting some class/id on those spans to have a better selector for the .on() method. So instead of having just span you could have something like span.spanClass
Try this:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
<script type="text/javascript">
function openPopup (o) {
var newText = prompt("Enter some text: ");
$(o).text(newText);
}
</script>
if you add a click event in your span, you will have the tag reference with "this". Then if you call .text() on it, the related tag will be updated.
like that :
$('span').click(function() {
$(this).text('new text');
})
Here is an example using jQuery Dialog widget to edit span text
http://jsfiddle.net/npch3/2/
I am using jqgrid grails plugin.
Column model for the column is:
{name:'id', index:'id', editable:true, align:'center', formatter:jobListLinkFormatter}
Custom formatter is:
function jobListLinkFormatter(cellvalue, options, rowObject){
var url = "${createLink(action:'jobListJSON')}" +"/"+cellvalue;
var link ="my link";
return link;
};
The link is produced correctly, however the text 'my link' only shows when moused over. What is the cause of this problem?
Add generate html: The text for the link only shows when mouse over on the row and 'ui-state-hover' is applied
<table id="configGrid" class="jqTable ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" role="grid" aria-multiselectable="false" aria-labelledby="gbox_configGrid" style="width: 1178px; ">
<tbody>
<tr class="jqgfirstrow" role="row" style="height:auto">
<td role="gridcell" style="height:0px;width:1178px;"></td>
</tr>
<tr id="4" role="row" class="ui-widget-content jqgrow ui-row-ltr">
<td role="gridcell" style="text-align:center;" title="my link" aria-describedby="configGrid_id">
my link
</td>
</tr>
</tbody>
</table>
try adding in your link
function jobListLinkFormatter(cellvalue, options, rowObject){
var url = "${createLink(action:'jobListJSON')}" +"/"+cellvalue;
var link ="<a href='" + url + "'"+" style='font-color:red' >my link</a>";
return link;
};
or class="ui-state-error-text"
if this will work that means that you have problems with css so in firebug inspect your link and see what styles are applied to this link and your font color is the same as background or font size is tiny or something like that.
I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?
Here is a snippet of the HTML for the dialog:
<div id="AppointmentDialog" style="display: none; font-size: 12px;">
<table>
<tr class="lesson notAvailable allDay">
<td>
Start
</td>
<td>
<input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
<input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
<input id="hidStartTime" type="hidden" value="" />
</td>
</tr>
<tr class="notAvailable allDay">
<td>
End
</td>
<td>
<input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
<input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
<input id="hidEndTime" type="hidden" value="" />
</td>
</tr>
</table>
</div>
Snippet of Javascript to initialise the dialog and datepickers:
$(document).ready(function() {
initDialogs();
});
function initDialogs() {
// Configure the New Appointment dialog
$("#AppointmentDialog").dialog({
autoOpen: false,
resizable: false,
width: 320,
modal: true,
title: 'Appointment',
buttons: {
"Close": function() { $(this).dialog("close"); },
"Save": function() {
// Function call
}
}
});
$.mask.definitions['h'] = '[012]';
$.mask.definitions['m'] = '[012345]';
$("#txtStartTime").mask("h9:m9");
$("#txtEndTime").mask("h9:m9");
// Init date pickers
$("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
$("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};
EDIT
I'm using jQuery 1.4.2 and UI 1.8.2
I've looked into it again. The bug has been reported with a workaround.
I'm using a minified version of jQuery UI so the code looks like this:
(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"
(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"
I had this exact problem, but the real issue turned out to be duplicate ids on the page. Once I removed the duplicate id the problem went away completely.
I wasn't allowed to touch js libraries, I added this line under onSelect handler.
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
so my code looked like
$('#txtDate').datepicker({
// other properties
onSelect: function (selectedDate) {
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
// other code
}
});
You need to override the "$" placeholder with "jQuery" if the text contain "#"