Select Text on click Using jQuery - javascript

I want to fix the following issue in Firefox
When i try to select the text inside the textbox using double click on mouse its not selecting the text the cursor goes to the start of the text.Any ideas how to fix this?but this works fine in googlechrome
i tried the following from this http://www.iwebux.com/demos/ajax/ i this link when you try to edit the price column you cant select the value.Thank you.
my code:
$(document).ready(function () {
$('td.edit').click(function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
$('#editbox ').focus();
});
$('td.edit').keydown(function (event) {
arr = $(this).attr('class').split(" ");
if (event.which == 13) {
$.ajax({
type: "POST",
url: "supplierprice/config.php",
data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
success: function (data) {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}
});
}
});
$('#editbox').live('blur', function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
});

Please use this code
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
}

You might want to use select() instead of focus().

I have modified your script a bit.
http://jsfiddle.net/dKn4W/
The problem is that the click event bubbles up from the #editbox input, so the $('#editbox ').focus(); is executed on every click, that prevent text selection.
Modify your code something like this
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
///// rest of code
}

Try using .select() function. This is used to select the text in the editable input elements.
In your case, try adding the line
$('#editbox').select();
below the line
$('#editbox ').focus();
Hope this hepls.

You need to stop the click events from propagating from #editbox to your td.edit. Try adding this:
$("td.edit").on("click", "#editbox", function(e) { e.stopPropagation(); });

Related

Why is event.stopPropagation not cancelling $('html').click?

I have an input field which has a focusout event on it. I also have a click event set on $('html') which transfers focus to a different input field. I wrote a click handler for my input field and put in event.stopPropagation(); but it doesn't seem to be working. What am I missing? What does $('html') refer to? My code:
p.replaceWith(
"<input class='memoryEditField' type='text' value=" + p.text() + ">"
);
var inputField = $(".memoryEditField");
inputField
.on("click", function(event) {
event.stopPropagation();
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
The other input field:
$("html").on("touchstart", function() {
MQInput.focus();
});
$("html").on("click", function() {
MQInput.focus();
});
Please provide all of code (what is p in Your code? Also editFieldLostFocus, editFieldKeyPressed).
I think You're missing something in methods editFieldLostFocus, editFieldKeyPressed and it makes illusion that stopPropogation does no work
In fact it works as expected:
$(function() {
$('p').each(function() {
var p = $(this);
p.replaceWith(
'<input class="memoryEditField" type="text" value="' + p.text() + '">'
);
});
function editFieldLostFocus() {
console.log('call editFieldLostFocus');
}
function editFieldKeyPressed() {
console.log('call editFieldKeyPressed');
}
var inputFields = $(".memoryEditField");
inputFields
.on("click", function(event) {
event.stopPropagation();
console.log('memoryEditField clicked');
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
$("html").on("touchstart", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
$("html").on("click", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>FIELD 1</p><br/>
<p>FIELD 2</p><br/>

.on("hover", ...) chaining not working

I have a js file that has .on("click" , ..) chaining happening that I would like to also add a hover event to. My code is:
}).on('hover' , '.tooltip' , function (e) {
if (e.type == "mouseenter") {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
}else{
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
}
});
I understand that I can really only pass one function this way so I am checking for the event type to trigger the appropriate behavior. This doesn't seem to be working for me. Any ideas?
I think this is what you want
}).on('mouseenter' , '.tooltip' , function (e) {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
}).on('mouseleave' , '.tooltip' , function (e) {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
You don't need if (e.type == "mouseenter") {
And hover is not a valid method to use with .on() - I am not sure about this though.. use mouseover or mouseenter
Use it as:
$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
Fiddle
You can bind several event handlers at once. In your case it will be:
.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });
As per jQuery source code, hover is not included in the event list that triggered leading to JQuery .on() because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave(). So, in short, you cannot use hover with .on() like below:
}).on('hover' , '.tooltip' , function (e) {...
So, your option is to use .mouseenter() and .mouseleave() like below:
.on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, '.tooltip');

Creating a clickable div within a div

for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?
Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});
You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});
It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});

Prevent jquery fadeIn many times

Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.

How to highlight first row of table JQuery on page load ?

My following code works fine if any row is clicked:
$(document).ready(function() {
$('#currentloc_table tr').click(function(event) {
$("#"+$(this).attr('id')+" input:checkbox")[0].checked = ! ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
});
Here is the CSS:
.selected td {
background: yellow;
}
What I need that on page load, first row of this table should get highlighted. How can i do that?
Try this
$(document).ready(function () {
$('#currentloc_table tr').click(function (event) {
$("#" + $(this).attr('id') + " input:checkbox")[0].checked = !($("#" + $(this).attr('id') + " input:checkbox")[0].checked);
if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
// Add these lines
var firstTr = $('#currentloc_table tr:first');
firstTr.addClass('selected');
firstTr.find("input:checkbox")[0].checked = true;
});
working demo
You can try this use .first() or :first() to select the target:
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected');
....
or:
$(document).ready(function() {
$('#currentloc_table tr:first').addClass('selected');
....
You can though take a look at these:
.eq() and :eq()
nth-child()
:first-child
read documentation
Trigger the function after load
$('#currentloc_table tr:first-child').trigger('click');
For this to work you should add this after binding click event with:
#currentloc_table tr
Seems like your code could be improved sligtly:
$('#currentloc_table tr').click(function (event) {
var check = $("input:checkbox", this)[0];
check.checked = !check.checked;
$(this)[check.checked ? 'addClass' : 'removeClass']('selected');
});
To select the first row:
$('#currentloc_table tr:first').click();
$(document).ready(function () { $('#currentloc_table').find('tr:first').addClass('selected');});
Try this ,
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected_f');
// rest of your stuff ....
And css
.selected_f {
background: yellow;
}
Your CSS class taking as default for selected class, so its not adding that class , and not able to see the effect
Try with this
$(document).ready(function(){
$("#currentloc_table tr:first"):css('background','yellow');
})
or else try with
$("#currentloc_table tr").eq(0):css('background','yellow');

Categories

Resources