We Keep Coding

On Button Click, how do I change row with span to input and focus each input using angularjs

I have a table, with 2 labels/inputs (i use a ng-show/ng-hide which works with the edit button), and 2 buttons (1 button is edit, and 1 button is delete). What i want to do is when the user clicks the edit button, it should hide the spans and shows the inputs(textboxes) and focus on the first input. If the user clicks outside of either inputs, (in my opinion, loses focus which mean using blur method), then the inputs should turn back to span with the updated values. Here is what I have created, but I can't figure out the rest. New to angular so any help will be appreciated and voted.
This is the html code:
<table class="tableGV">
<tbody>
<tr>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data1">{{data1}}</span>
<input class="DataText" type="text"data-ng-show="showEditMode" maxLength="1" data-ng-model="editData1" ng-change="cs.ClassCode"/>
</td>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data2">{{data2}}</span>
<input class="DataText" type="text" data-ng-show="data2" maxlength="50" data-ng-model="data2" />
</td>
<td align="right">
<button type="button" id = "btnEditClassService{{$index}}" data-ng-click="edit(cs, $index)" class="editButton"></button>
<button type="button" id = "btnDeleteClassService{{$index}}" data-ng-click="delete(cs, $index)" class="deleteButton"></button>
</tr>
</tbody>
</table>
after this, i am not sure where to go. Thanks for anyone to help me.

you can check this plnkr. The solution is not elegant but I think it sastify your requirement.
function onEdit(){
vm.isEdit = true;
executeAfterDOMRender(function(){
document.getElementById('txt1').focus()
});
}
function onBlur(){
executeAfterDOMRender(function(){
var txtIds = ['txt1', 'txt2'];
var activeElementId = document.activeElement.id;
if(~txtIds.indexOf(activeElementId)){
//txt boxes is focued, do nothing here
} else {
vm.isEdit = false;
}
});
}
function executeAfterDOMRender(callback){
$timeout(callback);
}

Custom prompt box using javascript and CSS

I am working on a custom prompt box. So far I used a hidden div that is shown on a button click with javascript:
function openPromptBox() {
var pos = FindXY(document.promptForm);
var cont = $('promptContainer');
var searchBox = $('promptBox');
searchBox.style.left = (pos.x - 20) + "px";
searchBox.style.top = (document.body.scrollTop + 100) + "px";
cont.style.display = "block";
}
here is the div:
<div id="promptContainer">
<div id="promptBox">
<table>
<tr>
<td colspan="2">
<input type="text" name="result" id="result" size="25"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btnOK" value="OK" />
</td>
<td>
<input type="button" id="btnCancel" value="Cancel" />
</td>
</tr>
</table>
</div>
</div>
Now I need to return to the function openPromptBox the value of textbox result whenever btnOK button is clicked. Is there any way to do that?

No, this is impossible.
A prompt opens a modal dialog and blocks all further JavaScript (and interaction with the page) until one of the buttons is activated by the user.
When you insert form fields into an HTML document, there is no blocking (nor could there be, since that would prevent the user from filling in the form).
You need to bind an event listener to the form fields you have created and then handle the response going forwards just like any other asynchronous operation.

It seems like you are using jquery so here would be a solution:
$('#result').val()
Would take the current value (the text / number / etc) out of your input
now you can simply pass it to your function like so:
$('#btnOK').on('click', function() {
openPromptBox($('#result').val());
});
That's it.
In the definition of your function you should probably add a parameter which is then used in the function:
function openPromptBox(textFromInput){
alert(textFromInput);
}
JSFiddle: https://jsfiddle.net/01bkkgzd/2/
UPDATE:
Without JQuery it would be:
document.getElementById("result").value
which will get the value of the input
Example for the onclick action and the following function call
document.getElementById("btnOK").addEventListener('click', function() {
openPromptBox(document.getElementById("result").value);
});
JSFiddle: https://jsfiddle.net/01bkkgzd/5/

How can I target EVERY link and button on the page?

I have a shopping cart that contains a form field and a checkbox in each row. The form field controls the quantity, which can be edited, if the customer wants to modify the quantity of the product they order, and the checkbox selects the item, either to toss the item in a wish list, or to remove it. The Add To Wish list and Remove Functions are separated out of this particular question.
What, I am looking at doing, is detecting when the form has been changed, and then targeting EVERY anchor tag and button on the page, so if the items have been modified, the script stops the click through and pops up a bootstrap modal, alerting the user that something in their cart has been modified.
HTML (the shopping cart row, run through a JSTL forEach loop, but the markup is this):
<table>
<form id="shoppingCart" action="updateTheCart.action">
<c:forEach var="item" items="${shoppingCart.items}" varStatus="status">
<tr class="cart-row">
<td class="remove" data-label="Remove">
<label>
<input type="checkbox" name="removeFlag(<c:out value="${status.count}"/>)" value="true"/>
</label>
</td>
<td class="title" data-label="Title">
${item.value.sellableGood.name}
</td>
<td class="qty" data-label="Quantity">
<input type="num" class="form-control qty-input" name="quantity(<c:out value="${status.count}" />)" value="<c:out value="${item.value.quantity}" />"/>
</td>
<td class="subtotal" data-label="Line Total">
<fmt:formatNumber type="currency" pattern="$#,##0.00" value="${item.value.itemExtendedTotal}" />
</td>
</tr>
</c:foreach>
</table>
<p>Checkout</p>
<p><button type="submit" id="checkout">Update Cart</button></p>
<p><button id="addToWishlist" type="submit" id="wish-list">Add To Wish List</button></p>
<p>Chontinue Shopping</p>
</form>
JS:
$("#shoppingCart :input").change(function() {
$("#shoppingCart").data("changed",true);
});
I know I am missing a LOT, but I really don't know where to begin at this point.

You can try the onbeforeunload Event
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});

Javascript:
;[].forEach.call(document.querySelectorAll('a, button'), function(element) {
//do something with buttons and links, for example:
element.setAttribute('data-changed', true')
});
The jquery equivalent is:
$('a, button').each(function(element) {})
To watch the form for changes, I would use the blur event, it's the reverse of focus:
;[].forEach.call(document.querySelectorAll('#myForm input'), function(element) {
element.addEventListener('blur', function(event) {
//something has changed
})
});
Jquery:
$('#myForm input').on('blur', function(event) {})

When input type="image", onclick action was triggered by hitting enter from another input field

In my code, I made a JavaScript function which will delete the current row from a table. Then in HTML I put that function into an 'input' element which will trigger the function in an 'onclick' action. Everything works fine if I make the input type="button", but if I make it type="image" as you can see below, even with "return false;", whenever I press enter in any of the input field in the same row, it will trigger the delete function.
I don't know why.
function deleteRow(r)
{
var rowLength= document.getElementById("newOrder").rows.length; //get how many rows are in this table
if (rowLength == 2) //if there are only two rows (including header), then don't allow to delete a row
{
alert ("At least one row is needed to create an order.");
return;
} else //if row number is greater than 2, then delete a row is allowed
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("newOrder").deleteRow(i);
}
following is the HTML code
<tr>
<td class="item"><input type="image" onclick="deleteRow(this); return false;" src="img/delete.png" height="20" width="20" alt="delete"><input type="text" class="biginput, item" ></td>
<td class="detail"><input class="detail" type="number" ></td>
<td class="detail"><input class="detail" type="number" ></td>
</tr>

Use this: Demo Link
<form>
<input id="image" onclick="return deleteRow(this);" type="image" src="img/delete.png" height="20" width="20" alt="delete" />
</form>
Using pure javascript:
function deleteRow(instance) {
alert("delete");
return false;
}
Using jquery as you have tagged jquery in your post:
$('#image').click(function(event) {
event.preventDefault(); // yaa!
alert("delete");
});

jQuery, javascript: several forms same submit button text - how to determine value of closest hidden value box

I have several forms in HTML, each with a submit button and a hidden field. The same javascript function is called when any of the submit buttons are pushed. I want to know which submit button has been pushed. I think I can do this by finding out what the hidden field value is of the corresponding form - but I'm having difficulty with this. My HTML is:
<div id="existingPhotosList">
<table><tbody><tr><td>
<img src="./userPictures/IMG0001.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0001.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
<tr>
<td>
<img src="./userPictures/IMG0002.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0002.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
</tbody>
</table>
</div>
There may be more or less table rows with images and forms on them - depending on how many images are found on the server.
The javascript I have right now is:
$('.deleteFiles').submit(deleteFile);
function deleteFile() {
var myValue = $(this).parent().closest(".picture").val();
alert(myValue);
return false;
}
I'm currently getting undefined as the result of the alert.

I want to know which submit button has been pushed.
As each of your forms only has one submit, you don't have to change your code much.
this in your submit handler will refer to the form, and the element is within the form, so:
var myValue = $(this).find("input[name=picture]").val();
No need to go up to the parent, and closest goes up the ancestry (through ancestors), not down. find goes down (descendants).

the simplest way I think will be:
var myValue = $('input[name=picture]', this).val();

should be:
var myValue = $(this).closest(".deleteFiles").find("input[type=hidden]").val();

here is the demo http://jsfiddle.net/symonsarwar/963aV/
$('.deleteFiles').click(deleteFile);
function deleteFile() {
var me=$(this).closest('tr').find('td:eq(1) input').val();
alert(me)
}