We Keep Coding

JavaScript works differently in various browser

In my ASP.NET code I have two controls:
<asp:Button ID="UpLoadFile" runat="server" Text="File Selection"onclientclick="fireFileClick()" onclick="ControlHasFile" CssClass="FileSelection" />
<asp:FileUpload ID="UpLoadButton" runat="server" />
Additionally I have a script in order to isolate the FileUpload button and set in use another regular button.
The Script I use is in this form:
<script type="text/javascript">
function fireFileClick() {
var objfile = Object;
objfile = document.getElementById("<%= UpLoadButton.ClientID %>");
objfile.click();
}
</script>
The script is working just fine on Internet Explorer.
But when I'm tying to use any other explorer is not working.
That means the "selected File" is not passed to the FileUpload control.
Under the Chrome browser (with F12 pressed) Opens the debugger and what I see there surprises me allot.
Which means.
When the debugger is on and stops in a line after the objfile.click(); then the file uploads on the Fileupload control and the all processes goes fine.
But when the debugger is off (nowhere stops) then the selected file it is not uploaded to the control.
Is someone to solve that mystery?

Well... it looks like "various browsers - various behavior".
But the solution found it in my answer how to assign values from Java script to a Property in a system class
Thank all for your assistance.

Retrieve variable name from an HTML site

I am trying to retrieve simple javascript variable (which is written to a File Systems Object) from a website which is served by an apache host on my ubuntu laptop.
So I have the function that writes the variable set up as follows:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("/home/lex/Downloads/goal.txt", true);
s.writeline(document.passForm);
s.Close();
}
</script>
and the section that takes the user input from the html website is
<div id="bot-right">
<form onsubmit="WriteToFile(this['goal'].value)">
<a align = "left"> <b><Strong>Enter a Goal name</Strong></b></a><br>
<input type="text" name="goal"> <br>
<input type="submit" value="Send Zeus">
<br>
</form>
</div>
For some reason, when I type in variable names to the form on the website, the file goal.txt gets created in the directory, /home/lex/Downloads/, but nothing gets written to it.
I also noticed that when I delete the goal.txt file and rewrite the variable from the html website, the file doesn't always get created.
I am not a JavaScript person and I am at a loss as to what I may need to fix this.
My intention is to get the variable written to the text file and have a processing c++ file process the variable.
Would someone be kind enough to lend an insight?
Thanks!

one way to do it is just calling the function without parameters and just getting the input value like this:
adding and id or a class to your input to get that specific value:
document.getElementById('goal').value
document.getElementByClass('goal').value
Or getting the value by name:
document.querySelector('[name="goal"]').value;
EDIT1
You could add a console.log to check if the value is beign passed correctly like this:
var inputValue = document.querySelector('[name="goal"]').value;
console.log(inputValue);
And if the value is being passed then the problem is your writeline or in the creation of the document
EDIT2
I just tested it and retrieving the value works just fine, so the problem must be in your document writing method, please check this documentation it can help you and i think is a better solution:
http://www.html5rocks.com/en/tutorials/file/filesystem/

dojox.form.Uploader never receives onComplete event, and behaves strangely

I am using dojo 1.7.2 I have bee trying to get the file uploader to work with a REST service in PHP.
Here is my function:
dojo.connect(dijit.byId("CNCFileUploader"), "onComplete", function(dataArray){
alert("onComplete Fired!");
dojo.forEach(dojo.isArray(dataArray) ? dataArray : [dataArray], function(resp){
console.log("display:", resp.file, resp.duplicates);
});
});
This is my markup:
<div data-dojo-type="dijit.Dialog" id="addCncIdsFileDialg" >
<form method="post" data-dojo-type="dijit.form.Form" id="addCncIdsFileFrm" enctype="multipart/form-data" action="CartService.php/cart/156568/cncidfiles">
<fieldset>
<legend>Upload File(s) with CNC_IDs</legend>
<div align="center">
<input type="file" multiple="true" name="CNCFileUploader" id="CNCFileUploader" data-dojo-type="dojox.form.Uploader" uploadOnSelect="false" /> <br/>
<button data-dojo-type="dijit.form.Button" type="submit" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFSubmitBttn">OK</button>
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFCancelBttn" >Cancel</button>
</div>
<div id="CNC_IDfiles" dojoType="dojox.form.uploader.FileList" uploaderId="CNCFileUploader"></div>
</fieldset>
I never see the alert. For IE9 I see that the file is uploaded and processed. Interestingly while I select a single file, the logs show a second file with a null name and error=4. Also while the onComplete never happens, IE9 prompts me if I want to save cncidfiles from local host. The upload will only work the first time after that it does nothing and never again after that.
When I changed the multiple flag to false, the uploader stopped working entirely. With the following written to the JavaScript console:
TypeError: Unable to get value of the property 'value': object is null or undefined
TypeError: Unable to get value of the property 'value': object is null or undefined
A second problem is that when I use Google Chrome, the file is sent every time, but what I see on the server is very different from what dojo has documented in their Uploadfile.php.
I believe that dojox.form.Uploader is severely broken in 1.7.2 in several significant ways!
Out of frustration, I tried using dojo.io.iframe.send but while Chrome works fine, IE9 still acts like it wants to download cncidfiles and also only works the first time.

Ahuh... Poor uploader widget... :)
Well, check out http://clubajax.org/the-new-dojo-html5-multi-file-uploader/ and see if there's a comment here (on html5 uploader authors post).
Your question does not state how you do this, but you need to extend your uploader either of the plugins, IFrame / HTML5 or Flash or the onComplete is not an API hook.. In other words, its not defined in dojox/form/Uploader. You should use a sniff method, determining if it is IE or 'other'. For IE extend it with Flash and any other, use HTML5 (which has IFrame as fallback)
e.g.;
// this must be BeFore dojo.ready (and before parser runs)!
if(dojo.isIE) dojo.require("dojox.form.uploader.Flash");
else dojo.require("dojox.form.uploader.HTML5");

Find script that changed the value attribute of a <input /> tag

<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?

Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.

Javascript code working in IE but not working in Firefox?

I have this code :
<a href="javascript:document.forms['form1'].student_pic.click()">
<img src="images/mypic.png" alt="" width="161" height="29" border="0" style="margin-top:10px" />
</a>
<input style="display:none" type="file" name="student_pic" id="student_pic" />
This code is working successfully in IE but it's not working in FF.
off course there is form on my page called form1
When the user click the image, select file window will let the user select image and put it in hidden file element.
What is the proplem?
Thanks

Your problem is simply that .click() to open the file chooser dialog does not work on all browsers. I'm not aware of any workaround.

Common way around is have the file input in place but with opacity of 0 which actually means it's hidden, and over it place your custom image or text. Make sure the "browse" button is exactly where your text/image is and it will work - clicking the custom text/image will actually click the browse buttton.
I have such code somewhere so if you won't be able to achieve this I'll search for that code.

Not supported in Gecko yet:
Gecko 2.0 note(Firefox 4)
Starting in Gecko 2.0 , calling the click() method on an <input> element of
type file opens the file picker and lets the user select files.
from https://developer.mozilla.org/en/HTML/Element/input#File_inputs