I'm currently trying to make a function to highlight text, then insert into a textarea only what's selected. It's working bar one thing: if I keep selecting text, then selecting something else, it will just add it all together and I can't figure out why.
code to get selected text (along with positioning)
// selected text
function getSelected()
{
var return_text = '';
if (window.getSelection)
{
return_text = window.getSelection();
}
else if (document.getSelection)
{
return_text = document.getSelection();
}
return return_text;
}
Then the code to show a box to insert that text into a textarea, making sure it only allows text from within a comment area...
var quote_box = $('#selective-quote');
$(document).on('mouseup', ".comment-body div", function(e)
{
if ($('#comment').length) // only do this if comment box exists (logged in)
{
var selection = getSelected();
var selectedText = selection.toString();
if (typeof selection !== undefined && selectedText.length > 0 && selection.anchorNode.nodeName == '#text')
{
var container = $(this);
var r=selection.getRangeAt(0).getBoundingClientRect();
var relative=document.body.parentNode.getBoundingClientRect();
// show the quote button box
quote_box.css('position','absolute');
quote_box.css('top',r.bottom -relative.top - 45);
quote_box.css('left',r.left);
quote_box.css('height', 'auto');
quote_box.show();
var text_to_insert = '';
$(document).on('click', "#insert-selective-quote", function(e)
{
var username = container.parent().parent().children('.comment-meta').find('.username').text();
text_to_insert = '[quote='+username+']' + $.trim(selectedText) + '[/quote]';
console.log(text_to_insert);
var current_text = $('#comment').val();
$('#comment').val(current_text + text_to_insert);
quote_box.hide();
});
}
else
{
quote_box.hide();
}
}
});
So if I had text with "this comment here" and I repeatedly highlighted "here" say 4 times (clicking off it each time), it would store it 4 times...I'm so confused. So I click the insert button and then it inserts it 4 times. Why?
It's supposed to only insert what's highlighted there and then, nothing else. Not anything previously highlighted like it seems to do now.
Every time the mouse button is released, you create a new click listener, since the creation of the click listener happens inside of the mouseup handler:
$(document).on('mouseup', ".comment-body div", function(e) {
/* ... */
$(document).on('click', "#insert-selective-quote", function(e) {
/* ... */
})
/* ... */
})
So, at the first mouseup event, the first click listener is installed. On the second mouseup event, the first click listener still exists (since it's never removed) and a second listener is installed as well, and so on.
So after 4 times, you already have 3 click listeners installed from before and install a 4th one. And on clicking the button, all the 4 listeners fire, since they all listen on the same event.
You should either install one listener globally, or remove the existing listener before installing a new one. You can remove any existing click listener using $(document).off('click', '#insert-selective-quote'), just add that before you do the $(document).on('click', '#insert-selective-quote', ...).
Related
I'm trying to handle a middle mouse button click event with JQuery on a DataTable (https://datatables.net/). Here is my code.
var tbl = document.getElementById("entries");
$(tbl).on('mousedown', function (e) {
e.preventDefault();
if (e.which == 2) {
var table = window.table_entries;
var data = table.dataTable.row($(e.detail)).data();
window.open("/plugin/Changes/#Model.Revision/" + data.BuildId, '_blank');
}
});
I'm always getting the same BuildId (284), no matter where I click. How can I get the correct row?
I also have another code snippet, which works perfectly fine
tbl.addEventListener("cdt.click", function (e) {
var table = window.table_entries;
var data = table.dataTable.row($(e.detail)).data();
window.open("/plugin/Changes/#Model.Revision/" + data.BuildId, '_blank');
window.location("/plugin/Changes/#Model.Revision/" + data.BuildId);
});
Thanks in advance!
if you want to check de middle button click with jquery check this code
$("#foo").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
From this question Triggering onclick event using middle click
And if you want to check downmouse you can check this other #KyleMit answer
Detect middle button click (scroll button) with jQuery
#Jordi Jordi (because I can't comment right now) : Based on JQuery's documentation, click & mousedown both works.
$('h1').on('mousedown', function(e) {
alert(e.which);
});
Will display 1 for LClick, 2 for Middle, 3 for RClick. But this isn't the question.
If you're getting the same BuildId, it's because your selector isn't the good one.
If you're searching to get an exact row, you should change your selector like this :
$('td').on('mousedown', function (e) {
e.preventDefault();
if (e.which == 2) {
// Here you should get the row like this :
var row = $(this).parent();
}
});
Now it's your job to do what you want with this. The var "row" will contain the TR, meaning the row you just give a click.
EDIT : Note that your second code snippet doesn't include e.preventDefault(). Maybe it's the reason this second one works ?
Using AG-Grid, I need to be able to hit the tab key and have the focused element change from the grid/cell currently selected, to the next element on the page outside of the grid. The problem is that the tab key seems to be locked within the grid, and will not move outside of the data table to the next element.
I have an even listener on the cells that stores the last focused cell (used to store the last location to be able to tab back into the grid to the previously focused cell), but need to have the next focused cell be outside of the data grid:
const cells = document.getElementsByClassName('ag-cell');
[...cells].map(cell => {
cell.addEventListener("keydown", function(e) {
if(e.key === "Tab") {
let lastCell = cell.attributes[2].value;
console.log("Last Cell Focused: ", lastCell)
}
})
})
How can I remove the focus selection from the grid on keypress to the next focusable page element?
Here's a plnkr link to the current grid: Link
=====================================================
UPDATE
I've updated my code, and instead of attaching an event listener to every cell, it's now looking for the event triggered on the document. However, I'm still running into the issue that it's not getting the last_cell value and seeing the focus-visible class on hasFocusVisible.
//on arrow right if last_call === header that has 'focus-visible', set focus to first cell in body
const headerCells = document.getElementsByClassName('ag-header-cell-label');
const last_cell = headerCells[headerCells.length-1].attributes[2];
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
document.addEventListener("keydown", function(e) {
if(e.key === "ArrowRight") {
// if(hasFocusVisible && last_cell) {
console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
//if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
const bodyCell = document.getElementsByClassName('ag-cell')[0];
// }
}
});
UPDATED Plnkr: Link
====================================================
UPDATE 2
I've updated the element selector to the following:
const last_cell = document.querySelector('.ag-header-cell:last-child');
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('.focus-visible');
document.addEventListener("keydown", function(e) {
console.log('document.activeElement', document.activeElement)
const activeElement = document.activeElement;
if(e.key === "ArrowRight" && activeElement) {
if(last_cell) {
console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
//if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
const bodyCell = document.getElementsByClassName('ag-cell')[0];
}
}
else if(e.key === "ArrowDown"){
//look for first child in first row with same id as header and set focus
document.querySelector('.ag-cell').focus();
}
});
however, the hasFocusVisible variable is always coming up false when logging out the div that has the focus-visible class. I'm not sure if I have my logic incorrect, or its not able to get the focus-visible class on the ag-header-cell-label when the event listener is fired.
If tab works within the cells, don't add a listener to every cell, just add a single one to your document, and make it move focus to whatever you know is next on the page manually. For instance:
var b = document.querySelector('button');
b.passThrough = true;
b.update = pass => {
b.passThrough = pass;
b.textContent = "click me to " + (b.passThrough ? "block" : "allow") + " tabbing";
}
b.addEventListener('click', e => b.update(!b.passThrough));
b.update(b.passThrough);
var focussable = Array.from(
document.querySelectorAll([
'button',
'[href]',
'input',
'select',
'textarea',
'[tabindex]:not([tabindex="-1"])'
].join(','))
);
// let's pretend this is your last cell.
var p = document.querySelector('p');
// make it kill off keydown events, BUT, also have it redirect focus
// to "the next focussable element", so you can see what that code looks like.
p.addEventListener('keydown', e => e.preventDefault());
document.addEventListener('keydown', e => {
if (b.passThrough && e.target === p) {
var next = focussable.indexOf(p) + 1;
focussable[next % focussable.length].focus();
}
});
<button>toggle</button>
<p tabindex=0>first</p>
second
third
Run this snippet, click the button, hit tab, notice that the tab event is now trapped (like in your cells). Now, click the button again, hit tab, hit tab again: notice it seems like the event is no longer trapped, when it fact it is: the event for the element itself is getting killed off, but the event listener for the document now explicitly moves focus for us.
I'm having this webpage
http://pocolocoadventures.be/reizen/
And it should filter (with isotope.js) the travelboxes on the page.It does in safari, chrome, firefox, opera, .. but in IE, the filter doesn't work. Even worse, JS doesn't react at all at a click event on te span.
This is the piece of js
// Travel Isotope
var container = $('#travel-wrap');
container.isotope({
animationEngine : 'best-available',
itemSelector: '.travel-box ',
animationOptions : {
duration : 200,
queue : false
},
});
$(".filters span").click(function(){
var elfilters = $(this).parents().eq(1);
if( (elfilters.attr("id") == "alleReizen") && elfilters.hasClass("non-active") )
{
$(".label").each(function(){
inActive( $(this) );
});
setActive(elfilters);
}
else{
//set label alleReizen inactive
inActive( $("#alleReizen") );
if( elfilters.hasClass("non-active") ){
setActive(elfilters);
}
else{
inActive(elfilters);
}
}
checkFilter();
var filters=[];
$(".search.filters").children().each(function(){
var filter = $(this).children().children().attr("data-filter");
if( $(this).hasClass("non-active") ){
filters = jQuery.grep(filters, function(value){
return value != filter;
});
}
else{
if(jQuery.inArray(filter,filters) == -1){
filters.push(filter);
}
}
});
filters = filters.join("");
filterItems(filters);
});
function filterItems(filters){
console.log("filter items with filters:" + filters);
container.isotope({
filter : filters,
}, function noResultsCheck(){
var numItems = $('.travel-box:not(.isotope-hidden)').length;
if (numItems == 0) {
$("#no-results").fadeIn();
$("#no-results").css("display", "block");
}
else{
$("#no-results").fadeOut();
$("#no-results").css("display", "none");
}
});
}
function setActive(el){
el.removeClass("non-active");
var span = el.find('i');
span.removeClass("fa-check-circle-o").addClass("fa-ban");
}
function inActive(el){
el.addClass("non-active");
var span = el.find('i');
span.removeClass("fa-ban").addClass("fa-check-circle-o")
}
function checkFilter(){
var filterdivs = $('.filters span').parent().parent();
if( filterdivs.not('.non-active').length == 0 ){
setActive( $("#alleReizen") );
}
var filterLabels = $(".filters .label");
if( filterLabels.not('.non-active').length == 0){
setActive( $("#alleReizen") );
}
}
function noResultsCheck() {
var numItems = $('.item:not(.isotope-hidden)').length;
if (numItems == 0) {
//do something here, like turn on a div, or insert a msg with jQuery's .html() function
alert("There are no results");
}
}
Probably something small and stupid; but I can't find it..
Thanks in advance!
On your website you've build the buttons like this:
<button>
<span>
</span>
</button>
Now the button element is designed to be a button. It differs from the input button. In the latter you'd set the caption using value. In the button element you set it as a text node. The button element can contain elements like a span. The spec isn't very clear about whether or not you should have event handlers on the children of the button element. It's a browser developers interpretation of allowing it or not.
This problem has been posted here before (a few times)
span inside button, is not clickable in ff
Missing click event for <span> inside <button> element on firefox
It seems that Firefox is allowing it, based upon your findings. IE isn't. So to be on the safe side: use the button the way it was intended.
Wrap the button inside a span (not really logical)
Put the click handler on the button.
$(".filters button").click(...);
played around in the console a bit, and this seemed to work well.
$(".filters").on('click', 'span', function(){
// foo here
console.log('foo');
});
Maybe the filters are manipulated by one of your js files after page load?
.on will allow you to select a container which listens on changes that happen inside it, passing the element you want the actual action to work on.
If it's ok for you, I'd suggest to use the <button> element, instead of the <span>.
Let me know if that works for you.
I want to be able to press tab once the .editbox is clicked and it take the focus to the next .editbox. I have been messing with the code for an hour now and cannot "find" the next element.
Here is my code to do it. For help you will likely need more context. I made a jsfiddle to elaborate on what I am dealing with.
//on tab
$(".edit_tr").on('keydown', '.editbox', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var focus = $(document.activeElement);
//console.log(focus);
focus.closest('td').siblings('.editbox').focus();
console.log(focus.parent().next('.editbox'));
}
});
On line #41 you have to go with:
focus.closest('td').next().find(".editbox").show().focus();
This will go back to the current td, look for the following td tag, search for .editbox and before you can focus() on it you have to show() it (make it visible) first.
This solution will only work for 1 line. If you want to move between different lines with the tab key you'll have to do the following:
var nextEditbox = focus.closest('td').next().find(".editbox");
//check if there are still .editboxes on the same line
if(nextEditbox.length){
//go for it and focus the next edit box on the same line
nextEditbox.show().focus();
}
else {
//move to the next line and search for the next editbox
nextEditbox = focus.closest('tr').next().find(".edit_td:first").find(".editbox");
//show and focus
nextEditbox.show().focus();
}
//this will end the focusing and the .change() (which is defined above) will fire and do the ajax
focus.blur();
You'll have to do the hiding of the .text elements yourself.
Edit: Here's the Savebutton-Solution. I didn't test it, but I think it should work.
var changes = [];
$(".editbox").change(function(){
changes.push({ id : $(this).attr("id"), changed : $(this).attr("name"), data : $(this).val() });
});
$(".savebutton").click(function(){
//AJAX SENDING THE changes VAR TO THE PHP FILE
});
It seems that
$(".edit_tr").on('keydown', '.editbox', function(e) {
Should be
$(".edit_td").on('keydown', '.editbox', function(e) {
Besides, JQuery editTable may meets your requirements.
I have a bunch of radio buttons that are below. These radio buttons are part of a larger form and are optional, so If a user clicks on one, then decides he/she doesn't want the option selected, there is no way to undo this.
I was wondering if there was any jQuery etc, that, when clicking a link for example, clear any radio selection, based on the group name in the HTML?
Thanks
var group_name = "the_group_name";
// if jquery 1.6++
$(":radio[name='" + group_name + "']").prop('checked', false);
// prev than 1.6
// $(":radio[name='" + group_name + "']").attr('checked', false);
Working demo: http://jsfiddle.net/roberkules/66FYL/
var Custom = {
init: function() {
checkAllPrettyCheckboxes = function(caller, container){
// Find the label corresponding to each checkbox and click it
$(container).find('input[type=checkbox]:not(:checked)').each(function(){
if($.browser.msie){
$(this).attr('checked','checked');
}else{
$(this).trigger('click');
};
});
};
uncheckAllPrettyCheckboxes = function(caller, container){
// Find the label corresponding to each checkbox and unselect them
$(container).find('input[type=checkbox]:checked').each(function(){
$('label[for="'+$(this).attr('id')+'"]').trigger('click');
if($.browser.msie){
$(this).attr('checked','');
}else{
$(this).trigger('click');
};
});
};
I have created it in an init function, and adter then i called the init.
}
window.onload = Custom.init;
I have created a solution like roberkules' solution, except mine clears the radiobutton if you click the radiobutton itself while it's checked. Use this if you don't want to add an extra "Clear" button to your layout.
http://jsfiddle.net/P9zZQ/6/
// Requires JQuery 1.4+ (possibly earlier)
$(function () {
// Turn off a radiobutton if clicked again while on
var checkOff = function (event) {
var target = $(event.target);
if (target.is('label')) {
// deal with clicked label
if (target.attr('for')) {
// label has 'for' attribute
target = $('#' + target.attr('for'));
} else {
// label contains a radiobutton as a child
target = target.find('input[type=radio]');
}
}
if (target.is('input:checked[type=radio]')) {
event.preventDefault();
window.setTimeout(function () {
target.attr('checked', false);
}, 200);
}
}
// Find all radiobuttons and labels inside .radio-clearable containers
$(
'.radio-clearable input[type=radio], ' +
'.radio-clearable label').mousedown(function (event) {
// When clicked -- clear if it was checked
checkOff(event);
}).keydown(function (event) {
// When receiving space, escape, enter, del, or bksp -- clear if it was checked
if (event.which == 32 || event.which == 27 || event.which == 13 || which == 46 || which == 8) {
checkOff(event);
}
});
});
Usage: For any radiobutton you want to be clearable in this manner, wrap it in a container with class "radio-clearable".
The code is triggered by clicking or sending a key (Space, Escape, Enter, Del, BkSp) to the radiobutton element or to its label.