Develop Reference

Trigger <input type="file"> file select with angular programatically

Im using ngImgCrop as can be seen in this JSFiddle.
What I try to achieve is that the image selection box will open automatically when i show(using ng-if) the:
<div ng-if="showImageSelector">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
</div>
that is: i want to programatically open the image selection window, without even showing the user the:
<input type="file" id="fileInput" />
Iv'e tried put in the controller several variations of click event of the input, but none of them worked, so far iv'e tried:
1.
$timeout(function() {
angular.element('#fileInput').triggerHandler('click');
}, 0);
2.
angular.element(document).ready(function () {
angular.element('#fileInput').triggerHandler('click');
});
3.
setTimeout(function(){
angular.element('#fileInput').triggerHandler('click');
}, 1000);
4.
setTimeout(function(){
document.getElementById('fileInput').click();
}, 1000);

For trigger the file selector open programmatically, the answer is yes.
But you need to make sure this event was fired by THE USER.
For example, you have a button there, you attach the click event on it. After the user click this button, inside the event handler, you can trigger by javascript code e.g,document.getElementById('fileInput').click(). This should work.
However, if you want to simply run several lines of javascript code to open a file selector without user's click, that's not possible, because that violate the security policy.
So I added some code to your sample,
html,
<button ng-click='open()'>Open selector</button>
javascript,
$scope.open = function() {
document.getElementById('fileInput').click(); //this work
};
Hope this would solve your problem. : )

Ended up wrapping the ngImgCrop with my directive, in it iv'e placed that:
$timeout(function () {
angular.element(document.querySelector('#fileInput')).click();
$log.debug("poped it");
}, 250);
in the link function.
Aside the real element i show for the img selector, iv'e placed this at my index.html:
<div ng-show="false">
<my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select>
</div>
and it works.
without the extra invisible my-image-select in index.html, the file chooser only auto open from the second attempt.

Onclick of table not working

I am building a html5 Phone app using Cordova and in several pages I am using a table to act as a button. In every page but one this is working without issue but on one page the onclick event will not fire
Here is the HTML of the table
<div id="buttonHolder" class="MiniButtonGridHolder">
<table id="AddButton" class="ButtonGrid" >
<tr>
<td>
<p id="AddLink" class="clickableLinks">Add</p>
</td>
</tr>
</table>
</div>
Here is the JavaScript Used to set the onlick event
function SetButton()
{
console.log("next one");
var CurrentTable = document.getElementById("AddButton");
console.log($(CurrentTable).attr('id'));
CurrentTable.onclick = function () {
Console.log("set");
AddWorkItem();
};
console.log("NOW SET");
}
The AddWorkItem function
function AddWorkItem()
{
console.log("Started");
}
when I run this bit of code all the console.logs work except for the two that would execute when the button is clicked (IE Set and Started). The Jquery one even gets the correct table id.
I am sure the solution is something that will make me kick my self for not seeing it but at the moment I have spent about 3 hours trying to see where I have gone wrong with this and can't find anything.
Can anyone see where I am going wrong with this?
EDIT
I am calling this code here
$(document).on('pagecontainershow', function (event,ui) {
SetButton();
}
I have replicated the problem here:
http://jsfiddle.net/p4bR9/2/

You need to call SetButton() and it's console not Console
jsFiddle

Well, your button isn't clickable until the onclick event listener is added to it. And that isn't added until your SetButton() function is run. And in the code you posted, it doesn't get run.
Try:
$(document).ready(function(){
SetButton();
});

$('#AddButton').on('click',function()
{
alert("check");
});
fiddle demo

I'm not sure I understood. But trying to change this
Console.log("set");
in
console.log("set");
and call in the table with event onlick="SetButton();"

Javascript onClick image change

This is my first post here, so please bear with the formatting.
What I basically wanted to do was switch from an event to another with an onClick event.
It worked, so I wanted to add a loading image in between the 2 images.
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
It just waits for a while before changing the image, but the loading.gif does not load at all. On clicking the button, there is a delay, while the original image stays, and then the gerrard.jpg opens.
WHY IS THE LOADING.GIF BEING IGNORED ??
HTML, not really required here,but still
<img src="gerrard.jpg" id="details" name="details">
<br/>
<form id="change">
<input type="button" id="change" onClick="gerrard(details)" value="Gerrard"/>
PS- I'm new to JavaScript.

JavaScript is async language so if you want to set a delay you should use setTimeOut function instead of loop (cause loop will execute parallel with the following code) use like this:
function gerrard(details) {
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
//here we waiting fo 5 secs, and then changing image
setTimeout(
function(){details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';}, 5000)
}
In your case:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
//while loop still going execute the code go next and changing image
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
So if you want to do it without settimeout, and with loop you need to add changing image inside loop:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
if (a==999999999)
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
}

Show HTML objects

I wish to show out other objects when the onclick function is clicked. When i click that button, it will hide one object and show two other objects. I have already set the style.visibility to visible. But the show two object does not works.
Update Sample:
<input type="submit" id="show" name="show" value="show" onclick="RemoveDoc(); document.getElementById('docname').style.visibility='hidden'; document.getElementById('browse').style.visibility='visible'; return false;" />
//browse input
<input type ="file" name="browse" id="browse">
Method 2:
//Using my RemoveDoc() function, I want the button of browse being show out.
function RemoveDoc(Doc)
{
xmlhttp1=new XMLHttpRequest();
xmlhttp1.open("GET","functions/remove.php?Doc="+Doc,true);
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
{
//when i run debugging, it says that the style of null..
document.getElementById("browse").style.visibility='visible';
}
}
xmlhttp1.send();
return false;
}
</script>
I tried two methods which both also cant show the browse button.
It should call out my visible on browse object as it's visible.. kindly advise.

http://jsfiddle.net/y3Bad/
A few things: you should include the visibility code inside of your removeDoc function, and bind the handler from javascript, not in markup. Also, your variable xmlhttp1 is an implicit global. Your removeDoc function takes a parameter, Doc, but you never pass anything to it. Finally, removeDoc makes an ajax call, which is asynchronous, so your line of code to show the browse button will not execute immediately, and may never execute at all if your ajax calls fails.
HTML:
<input type="button" id="show" name="show" value="show" />
JS:
​document.getElementById('show').onclick = function () {
// use display instead of visibility if you don't want the hidden element to take up space
// setting visibility to empty string will show the element
document.getElementById('browse').style.visibility = '';
};​

I use these two functions:
function hide(objId) {
document.getElementById(objId).style.display="none";
}
function show(objId) {
document.getElementById(objId).style.display="";
}

Maybe you can try to use jQuery, something like this:
http://jsfiddle.net/7fJuu/

how do I overcome nesting in functions?

I'm pretty new to javascript and jquery, and have run into a problem that I have not yet found a solution for. I'll attempt to paint it in a fairly simple way.
I have a page that offers the user a few choices (its a game, so..) like attack or defend, what weapon to use. It then loads two html 's, each with a "commit" button. The commit buttons are tied to (separate) functions that pass data to ajax.
The problem I have is that I'm getting buried in nested functions. Does that make sense? My code looks something like this:
code:
$(function() {
$('#choice1').click(function() {
//do some stuff
});
$('#choice2').click(function() {
//do some stuff
});
$('#choice3').click(function() {
//do some stuff, including creating the choices below, and their submit boxes
$('#subChoice1').click(function() {
//send data with ajax to a php document. get result
//create some text on my document to display results
//create an input button, along with an id="subButton1"
});
$('#subChoice2').click(function() {
//send data with ajax to a php document. get result
//create some text on my document to display results
//create an input button, along with id="subButton1"
//(yes, feed both back to same func)
});
}); // end choice3
$('#subButton1').click(function() {
//my buttons in the subChoices do not call this function(!!??)
});
});
edit: link no longer works, sorry. And I've created a living example here.
Thanks for any tips or pointers. I'm almost certain that there is just something simple that I'm missing or unaware of that will get me on the right track.

You could always use normal named functions instead of inline anonymous ones. That might help if the mountain of functions is getting too tall.
Update:
Here's your working Case 1:
$('#button1').click(function(){
$('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>');
$('#div1').append('<input type="button" value = "Button 2" id="button2"/>')
$('#button2').click(function() {
$('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>');
$('#div1').append('<input type="button" value = "Button 3" id="button3"/>')
$('#button3').click(function() {
$('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>');
});
});
});
What I'm proposing is to update it like this:
function button3_click() {
$('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>');
}
function button2_click() {
$('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>');
$('#div1').append('<input type="button" value = "Button 3" id="button3"/>');
$('#button3').click(button3_click);
}
function button1_click() {
$('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>');
$('#div1').append('<input type="button" value = "Button 2" id="button2"/>')
$('#button2').click(button2_click);
}
$('#button1').click(button1_click);
That way the structure of the logic stays the same, but you can pull out the nested function definitions.

If you're consistently reusing classes or ids for the submit buttons you can leverage jQuery's live() method. It would allow you to create the bindings for $('#subChoice1') and $('#subChoice2') outside of the click handler for the parent choice, but still have them bind up properly when they're created.