We Keep Coding

Focus textarea on mobile from click event using jQuery .trigger()

Alrighty, I'm stuck.
I'm trying desperately to focus on a text area programmatically from javascript (jQuery) on mobile. I did my research, and learned that the only way to bring the keyboard up with .focus() is to use a click event. So I made a click event. And it works when I click on the element, except I need to trigger this from a touchhold on a different element. So naturally, I tried .trigger() and .triggerHandler() on the element. But neither of those things work.
TLDR; I need to be able to hold on an element from a list, and after a time, a div will slide down with a textarea and the textarea gets focus (with keyboard).
Any help is appreciated!
Here is my code:
<div class="quicknote" data-id="0">
<span>New Note</span>
<div class="name"></div>
<textarea class="text"></textarea>
<div class="toolbar">
<div class="left cancel">cancel</div>
<div class="right finish">finish</div>
</div>
</div>
jQuery
jQuery(document).ready(function($) {
var holdThresh = 800;
$(".row").on("touchstart", function(e) {
var id = $(this).attr("data-id");
var name = $(this).html();
$(this).addClass("down");
var timer = setTimeout(function() {
$(".quicknote").attr("data-id", id);
$(".quicknote .name").html(name);
$(".quicknote").addClass("open");
$(".quicknote").trigger("click");
e.preventDefault();
}, holdThresh);
$(this).one("touchend touchmove", function(event) {
$(this).removeClass("down");
clearTimeout(timer);
})
$(".quicknote .cancel").on("touchstart", function() {
$(".quicknote").removeClass("open");
})
$(".quicknote").click(function(event) {
$("textarea").focus();
event.preventDefault();
event.stopPropogation();
})
});

I figured it out! For anyone who finds this, here is my updated jQuery:
$(".row").on("touchstart", function(e) {
var id = $(this).attr("data-id");
var name = $(this).html();
var go = true;
var focus = false;
$(this).addClass("down");
var timer = setTimeout(function() {
go = false;
$(".quicknote").attr("data-id", id);
$(".quicknote .name").html(name);
$(".note").val("");
$(".quicknote, .overlay").addClass("open");
focus = true;
e.preventDefault();
}, holdThresh);
$(this).one("touchmove", function(event) {
go = false;
$(this).removeClass("down");
clearTimeout(timer);
});
$(this).one("touchend", function() {
if (go) window.location = "view.php?id=" + id;
else {
if (focus) {
$(".note").focus();
focus = false;
}
$(this).removeClass("down");
clearTimeout(timer);
}
})
})
I'm not sure exactly why this works, but instead of triggering a click on a third element to then focus on the textarea, I set a flag "var focus", and based on some conditions, was able to focus the textarea from the touchend event. Hope this helps someone! :)

Why doesn't javascript function update DOM on first run

I have a dynamic form in which users can add inputs by clicking a button. This works fine. However when clicking to remove the input the first click does not remove an input. Every click after removes inputs as expected. I can see that it runs the function on first click to remove but nothing is updated in the DOM so the field stays. Here is my HTML:
<button onclick="AddFileField()">Add File</button>
<br />
<br />
<form action="" method="post" enctype="multipart/form-data">
<div id="fileFields"></div>
<br />
<input type="submit" value="Upload" />
</form>
And the associated javascript:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
var FieldCount = 1; //to keep track of text box added
function AddFileField() {
var MaxInputs = 10; //maximum input boxes allowed
var InputsWrapper = $("#fileFields"); //Input boxes wrapper ID
var x = $("#fileFields > div").length + 1; //current text box count
if (x <= MaxInputs) //max input box allowed
{
$(InputsWrapper).append('<div class="fileInp"><label for="file' + FieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + FieldCount + '" />×</div>');
FieldCount++;
}
return false;
}
A fiddle showing issue. To duplicate add a couple fields then click an x. The first click does nothing, then proceeding clicks removes fields. How can I get the first click to remove the field as well?

It's because you are registering your event handler inside of another event handler.
http://jsfiddle.net/3e1ajtvo/11/
I removed your event handler and now, you pass the clicked element as elem into the function itself.
As a matter of fact you don't even really need the function, as long as jquery is exposed (it is in your case).
http://jsfiddle.net/3e1ajtvo/12/

A working fiddle is here
The issue lies in the function:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
When you click the X, this function is called, which adds a click event handler to the X to remove it; however, this event handler is not called until the next time you click it. (This is why clicking X twice works).
In the updated fiddle, you simply pass this to removeField as such:
//HTML
×</div>
//JS
function removeField(me) {
$(me).parent().remove();
return false;
}

The reason for this is because you are using onclick="removeField()".
Lets take a look at your function. When you click on the remove button the following script will run. This script then creates a click handler, that will activate on next click, because when you first clicked on remove the handler was not created
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
So you will need to replace this is another function. Since you are using jQuery you can learn to use .on() for dynamically generated elements.
$(document).on('click', '.removeclass', function () {
$(this).parent().remove();
});
http://jsfiddle.net/Spokey/3e1ajtvo/16/

I made your code a bit more modular and changed it to use jQuery more than you were. This is just another way to do it, the other answers are also valid.
http://jsfiddle.net/3e1ajtvo/19/
var fields = {
btnAdd: $('#addField'),
inputWrapper: $('#fileFields'),
maxInputs: 10,
fieldCount: 1,
init: function(){
this.inputWrapper.on('click', '.removeclass', this.removeInput);
this.btnAdd.on('click', this.appendField);
},
removeInput: function(){
//this will refer to the html element you clicked on
$(this).parent().remove();
},
appendField: function(){
//this will refer to the html element you clicked on
if ( fields.inputWrapper.children('div').length <= fields.maxInputs ){
fields.inputWrapper.append('<div class="fileInp"><label for="file' + fields.fieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + fields.fieldCount + '" />×</div>');
fields.fieldCount++;
}
}
};
fields.init();

You're not executing the code to remove the row on the first click, you're just adding the click handler to the link. It works after that because the $('.removeclass').click(... then fires as expected.

bpopup multiple

I'm using a lightweight jQuery popup plugin called 'bPopup'. I'm using it on my website at the moment to load multiple popup windows when clicked. I was recently told that my code was inefficient as I was loading multiple popups with multiple JavaScript 'listeners', i.e.:
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_1').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_32754925023').bPopup();
});
});
})(jQuery);
</script>
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_2').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_95031153149').bPopup();
});
});
})(jQuery);
^^ The multiple JavaScript 'listeners'. And, for the Popups:
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
He's probably right (sure of it), but not sure how to implement this, or whether this is even possible (small chance he's wrong).
Help? And thanks!

Since you are using jquery, you should use it's on() method to attach a single listener to the parent DOM element, and use the selector parameter to properly delegate the event to it's children (the button/popups).
If this sounds confusing, a simple example might help:
HTML:
<div id="parent">
Show popup 1
<div id="popup1" class="popup">1</div>
Show popup 2
<div id="popup2" class="popup">2</div>
Show popup 3
<div id="popup3" class="popup">3</div>
Non-popup link
</div>
JS:
$('#parent').on('click', 'a.button', function (event) {
event.stopPropagation();
event.preventDefault();
var popup = $(this).attr('href');
$('#'+popup).bPopup();
});
This adds a single event listener on the parent element, which only gets triggered if the child element which triggered the event matches the selector (in this case a.button). It determines which popup to show by retreiving the popup's id from the href attribute.
You can see this example working here.

The below function ( myFunction() ) takes the Id of anchor/div tag which is clicked and another id of div content to be display. And applies the same style for all popup models. And also it hides the old popup which already opened when u open new popup. All popup properties you can change.
Here i used only for two popups but you can use it for many as same did here.
<script type="text/javascript">
function myFunction(whId,whtDivContent,e) {
//var totWidth = $(document).width();
//var marTop = position.top;
var elt = $(whId);
var position = elt.position();
var marLeft = position.left - 130;
if(marLeft <= 1) {
marLeft = 10;
}
var openModal_profile ='#openModal_profile';
var openModal_menu ='#openModal_menu';
// Prevents the default action to be triggered.
e.preventDefault();
$(whtDivContent).bPopup({
position: [marLeft, 0] //x, y
,opacity: 0.9
,closeClass : 'b-close'
,zIndex: 2
,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative'
,follow: [false,false] //x, y
,onOpen: function() {
if(openModal_profile == whtDivContent) {
$(openModal_menu).bPopup().close();
}
else if(openModal_menu == whtDivContent) {
$(openModal_profile).bPopup().close();
}
$(whId).css({'background-color':"#DFDFDF"});
}
,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); }
});
}
;(function($) {
// DOM Ready
$(function() {
// From jQuery v.1.7.0 use .on() instead of .bind()
//$(id_menu).on('click',function(e) {}
var id_menu = '#id_menu';
var openModal_menu ='#openModal_menu';
$(id_menu).toggle(function(e) {
//$(id_menu).css({'background-color':"#DFDFDF"});
myFunction(id_menu,openModal_menu,e);
},function(e){
//$(id_menu).css({'background-color':""});
$('.close').click();
$(openModal_menu).bPopup().close();
});
var id_profile = '#id_profile';
var openModal_profile ='#openModal_profile';
$(id_profile).toggle(function(e) {
//$(id_profile).css({'background-color':"#DFDFDF"});
myFunction(id_profile,openModal_profile,e);
},function(e){
//$(id_profile).css({'background-color':""});
$(openModal_profile).bPopup().close();
});
//ENDS HERE
});
})(jQuery);
</script>

How to Select / Highlight text box content on first click only

Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..

The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.

Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});

function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />

Jquery/Javascript datepicker concept plugin

I'm trying to imitate the function of the datepicker on how the focus, blur, and click works.
focus: when the cursor is at the text field the datebox appear
blur: when the cursor is not in the text field the datebox disappear
click: when the user clicks the datebox disappear and new value in textfield
I'm trying to create a similar concept:
focus: when cursor is at the text field, a div with an icon will appear
blur: icon will disappear
click: when the icon is clicked, a certain logic code will be executed.
PROBLEM:
WHEN I TRY TO CLICK THE ICON, THE BLUR EVENT IS FIRST BEING CALLED, SO THE CLICK EVENT NEVER FIRES,
here is my code:
$(document).ready(function(){
$(".test").searchHelp();
$(".test2").searchHelp();
});
(function($){
$.fn.extend({
searchHelp: function(options){
return this.each(function(){
var $this = $(this);
var searchIcon = newSearchIcon();
var helpTable = newSearchHelpTable();
jQuery("body").prepend(searchIcon);
jQuery("body").prepend(helpTable);
var x = $this.position().left + $this.width();
var y = $this.position().top;
var once = false;
jQuery(searchIcon).css({position:'absolute',left:x,top:y});
$this.bind("focus",function(){
searchIcon.show();
});
$this.bind("blur",function(){
searchIcon.hide();
});
/*$(document).bind('mousedown',function(ev){
if(ev.target != searchIcon){
searchIcon.hide();
}
});*/
searchIcon.click(function(){
/*helpTable.show();
if(!once){
jQuery("tr",helpTable).dblclick(function(){
$this.val($(this).children("td._key").text());
helpTable.hide();
searchIcon.hide();
});
once = true;
}*/
alert("DO SOMETHING!");
});
});
function newSearchIcon(){
var icon = jQuery('');
icon.append("[#]");
icon.hide();
return icon;
}
function newSearchHelpTable(){
var helpSHTable = jQuery('');
helpSHTable.load("from.htm");
helpSHTable.hide();
return helpSHTable;
}
}
});
})(jQuery);
div.searchHelp table tbody tr:hover{
background:orange;
}
div.searchHelp table tbody tr:active{
background:red;
}
div.searchHelp table tbody tr td._key{
background:green;
}
I hope to get help from you guys, thanks

If you change your
searchIcon.click(function(){
to
searchIcon.mousedown(function(){
mousedown fires before focus is lost on the input. This will however still hide the icon after your mousedown runs. If you do not want the icon to disappear after it is clicked, have your mousedown set a flag, then have your blur check that flag. Something like this:
var iconClicked=false;
searchIcon.mousedown(function(){
...
iconClicked=true;
}
$this.bind("blur",function(){
if(iconClicked){
iconCLicked=false;
}else{
searchIcon.hide();
}
});
The only drawback is that this is on mousedown and not on click, but depending on what you're trying to do this may be acceptable.
EDIT: Found this, the first suggestion is an interesting one. jQuery Blur Fires Before href