We Keep Coding

JS/jquery - add textbox on doubleclick and update table field(s)

hello dear programmers,
i'm trying to update table fields with ajax.
doubleclick on a table cell, the cell content will be replaced with a textbox and after changing the text, it updates the cell value with the textbox value.
my problem is, the first change works fine, but after the second change, all table cells changed before are updated with the new value and not only the one clicked.
would be great if someone can help me out and point me to right direction.
you can find the whole thing to test on http://jsfiddle.net/bDxDX/3/
$(function () {
$(".doodleEdit").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
var mode = $(currentEle).attr('class').split(' ')[1];
if (mode == 'editDescr') {
alert("editDescr");
} else if (mode == 'addDate') {
alert("addDate");
} else if (mode == 'addVote') {
alert("addVote");
}
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
http://jsfiddle.net/bDxDX/3/
many thanks and best regards
costal

Does this solve your case ? Please check this jsfiddle -
http://jsfiddle.net/hellomaya/bDxDX/5/
$(function () {
$(".doodleEdit").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(e.target);
var value = $(e.target).html();
console.log($(e.target));
if ($.trim(value) === "") {
$(currentEle).data('mode', 'add');
} else {
$(currentEle).data('mode', 'edit');
}
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
var mode = $(currentEle).data('mode');
alert(mode);
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(this).parent().html($(this).val().trim());
$(".thVal").remove();
}
});
}
$(document).click(function (e) {
if ($(".thVal") !== undefined) {
if ($(".thVal").val() !== undefined) {
$(".thVal").parent().html($(".thVal").val().trim());
$(".thVal").remove();
}
}
});

I just did something very similar and thought this was a pretty concise way to do it. It assumes you want use the Enter key (key code 13) to write the input data back to the table cell, and Escape (code 27) to close the input without writing to the cell.
$("#table").on('dblclick', 'td', function() {
var cell_data = $(this).text();
$(this).replaceWith('<td><input id="temp_enter"></input></td>');
$("#temp_enter").keyup( function(event) {
if (event.which == 13) {
$(this).parent().replaceWith('<td>' + $(this).val() + '</td>');
} else if (event.which == 27) {
$(this).parent().replaceWith('<td>' + cell_data + '</td>');
}
});
});

Advancing Stage in jQuery

I have the following code, I'm relatively new to JavaScript, so can anyone tell me why it isn't advancing to stage 1 + show me how it's done?
var textContainer = '#text';
var inputLine = 'input';
var username = null;
var stage = 0;
$(function(){
if(0 == stage){
$(function(){
$(textContainer).text('What is your name?');
$(inputLine).focus();
$(inputLine).keypress(function(e){
if (e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
username = $(this).val();
$(this).val('');
stage = 1;
}
});
});
}
if(1 == stage){
$(textContainer).text('Hi there, ' + username + '.');
}
});

What you have there doesn't make much sense, so I'm guessing this is what you're trying to do :
$(function(){
var textContainer = $('#text'),
inputLine = $('input');
textContainer.text('What is your name?');
inputLine.focus().on('keyup', function(e){
if (e.which === 13) {
e.preventDefault();
textContainer.text('Hi there, ' + this.value + '.');
this.value = "";
}
});
});
FIDDLE
There is no way stage could be anything other than zero right after it's set to zero?
What happens inside the event handler, happens "later", so checking stage after the event handler still gives you ... wait for it .... zero ?

Removing images that a user has clicked on

I am working on a memory matching game. I have some code that checks if two images that the user clicked on have the same source and removes the images if they do have the same source.
(function compareClicked() {
var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src");
if( lastclicked == path) {
$('img').hide(1000, function () {
$(this).remove();
});
}
else {
if( lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
})();
However, as you can see, when they have the same source, it removes all of the images on the page - even if the user did not click any them. How can I change it so it only removes the two images that the user clicked on?

var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src"); // or this.src
if (lastclicked == path) {
$(this).hide(1000, function() {
// remove image with same src as lastClicked
$('img[src="' + lastclicked + '"]').remove();
});
} else {
if (lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
DEMO

How about something like
var lastEl = null;
$(document).ready(function(){
$('img').each(function(index){
$(this).attr('id','img-' + index);
});
$('img').click(function(){
if( lastEl ) {
if( ($(this).attr('src') == lastEl.attr('src')) && ($(this).attr('id') != lastEl.attr('id')) ) {
$(this).remove();
lastEl.remove();
}
lastEl = null;
} else {
lastEl = $(this);
}
});
});
Haven't tested that, but it's got to be pretty close
EDIT: Updated code in line with conversation below. JS fiddle here http://jsfiddle.net/joevallender/pc3Qa/3/
EDIT again: JS fiddle link should be correct now

If you got multiple time (more than twice) the same Src, I really suggest that you tag your clicked images to know which one should be hidden.
As mentionned you could use attr or special class for this purpose.

Switch between two textareas only when pressing Tab button

Normally when a user is visiting a web page and pressing TAB button on a keyboard, the selection moves from one element to another starting from the begining of the page.
I am looking for a solution to switch between two particular text areas by pressing TAB button on a keyboard with an initial focus on the first one when web page is loaded? All other elements on the page have to be ignored for this TAB key press event.
How can I achive this?
Thanx for your help!
= Update =
I have managed to make it work under Firefox 12.0 . IE and Chrome do not work properly. Asuming the text area IDs are #ICCID and #MSISDN, the Jquery looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$("#ICCID").focus();
});
var $inp = $('.cls');
$inp.bind('keydown', function(e) {
var key = e.which;
if (key == 9) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(".cls:eq(" + nxtIdx + ")").focus();
//Simulate Enter after TAB
var textInput = $("#MSISDN").val();
var lines = textInput .split(/\r|\r\n|\n/);
if (lines > 1) {
$("#MSISDN").on("keypress", function(e) {
if (e.keyCode == 9) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\n");
}, 1);
}
});
}
}
if (key == 9) {
e.preventDefault();
var nxtIdx = $inp.index(this) - 1;
$(".cls:eq(" + nxtIdx + ")").focus();
//Simulate Enter after TAB
$("#ICCID").on("keypress", function(e) {
if (e.keyCode == 9) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\n");
}, 1);
}
});
}
});
});
</script>

Catch the keydown action using jQuery, determine which textarea has focus, and then use the focus() method to set the focus to the other textarea.
Supposing that your textareas have id="textarea1" and id="textarea2". First you can set focus to the first textarea when the page loads by doing : $('#textarea1').focus();
$("body").keypress(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
switch(code)
{
case 9:
if($("#textarea1").focus()){
//First one has focus, change to second one
$("#textarea2").focus();
}
else if($("#textarea2").focus()) {
//Second one has focus, change to first one
$("#textarea1").focus();
}
}
});

Ok I have found the solution for for my task! It also includes the simulation of ENTER key just after the TAB key event, so user do not need to hit ENTER to go to the new line. Tested with IE9, FF12, Chrome 18.0.x
Here it is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event - START -->
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$("#ICCID").focus();
});
var $inp = $('.cls');
$inp.bind('keydown', function(e) {
var key = e.which;
if (key == 9) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(".cls:eq(" + nxtIdx + ")").focus();
//Simulate Enter after TAB
var textInput = $("#MSISDN").val();
var lines = textInput .split(/\r|\r\n|\n/);
if (lines > 1) {
$("#MSISDN").on("keyup", function(e) {
if (e.keyCode == 9 || e.which == 9) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\r\n");
}, 1);
}
});
}
}
if (key == 9) {
e.preventDefault();
var nxtIdx = $inp.index(this) - 1;
$(".cls:eq(" + nxtIdx + ")").focus();
//Simulate Enter after TAB
$("#ICCID").on("keyup", function(e) {
if (e.keyCode == 9 || e.which == 9) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\r\n");
}, 1);
}
});
}
});
});
</script>
<!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event - END -->

What about this.... Im to bored at work i think..
http://jsbin.com/uqalej/3/
HTML:
<input/>
<textarea id="t1"></textarea>
<textarea id="t2"></textarea>
<input/>
<button onClick='window.toggleBetween=true;'>Init</button>
<button onClick='window.toggleBetween=false;'>Destroy</button>
JS:
var d = document,
t1 = d.getElementById("t1"),
t2 = d.getElementById("t2"),
nodeType, nodeTypes = [],
i, iLen,
y, yLen;
nodeTypes.push( d.getElementsByTagName("textarea") );
nodeTypes.push( d.getElementsByTagName("input") );
nodeTypes.push( d.getElementsByTagName("select") );
i = 0;
iLen = nodeTypes.length;
for ( ; i < iLen; i++ ) {
nodeType = nodeTypes[i];
y = 0;
yLen = nodeType.length;
for ( ; y < yLen; y++ ) {
if ( nodeType[y] != t1 && nodeType[y] != t2 ) {
nodeType[y].onfocus = function() {
if ( window.toggleBetween )
t1.focus();
};
}
}
}

Using javascript on page load:
document.getElementById("textarea1").focus();
document.getElementById('textarea1').tabIndex="1";
document.getElementById('textarea2').tabIndex="2";

how to call another function in javascript?

how do i call the doSubmit() function from the conFirmUpload() when the confirm msg box is true?
<script type="text/javascript">
function confirmUpload() {
if (confirm("Are you sure want to upload '" + document.getElementById("txtWS").value + "' ?") == true) {
return true;
}
else
return false;
}
function doSubmit(btnUpload) {
if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) {
return false;
}
btnUpload.disabled = 'disabled';
btnUpload.value = 'Processing. This may take several minutes...';
<%= ClientScript.GetPostBackEventReference(btnUpload, string.Empty) %>;
}
</script>

var btnUpload = document.getElementById('buttonId');
doSubmit(btnUpload);
Put that in your if-block. Make sure the button has an ID.

Without knowing more What about this?
function confirmUpload(btnUpload) {
if (confirm("Are you sure want to upload '" + document.getElementById("txtWS").value + "' ?") == true) {
doSubmit(btnUpload);
}
else
return false;
}

function confirmUpload() {
if (confirm("Are you sure want to upload '" + document.getElementById("txtWS").value + "' ?") == true) {
var btnUpload = document.getElementById('<%= btnUpload.ClientID %>');
doSubmit(btnUpload);
}
}

Change the method prototype as
function confirmUpload(obj) {
//Do some thing
}
Where obj the the button you are clicking on
Call this method as
**onclick="javaScript:confirmUpload(this)"**
Now in that if part call another method like
if (confirm("Are you sure want to upload '" + document.getElementById("txtWS").value
+ "' ?") == true) {
doSubmit(obj);
}