Can't find FileHiddenName from iframe - javascript

I am using an iframe to upload an image. So I have two files - the file for the iframe and the file that will display the image. When the link to display the iframe is clicked this code is run:
function ShowUploadImageOut(RecordID) {
$('#<%=hfPieceID.ClientID %>').val(RecordID);
$("#dvAddImageOutturn").html(
'<iframe id="iframeUpload" src="utilities/UploadPOD.aspx?id=uploadOutturn"></iframe>'
);
}
On the iframe is an upload button that saves the image to a folder on the computer and sets the image file name to FileNameHidden
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fuUpload.HasFile)
{
if (Request.QueryString["id"] == "uploadOutturn")
{
String Path = ConfigurationManager.AppSettings["PieceOutturnFolder"].ToString()
+ Company.Current.CompCode;
string FileName = fuUpload.FileName;
if (File.Exists(Path + "/" + FileName))
{
File.Delete(Path + "/" + FileName);
}
fuUpload.SaveAs(Path + "/" + FileName);
filename = FileName;
imgTemp.ImageUrl = "/thumbnail.ashx?ImgFilePath=" + Path.Replace("/", "\\")
+ "\\" + FileName + #"&width=200&height=400";
FileNameHidden.Value = FileName;
}
}
}
FileNameHidden has the property clientidmode set to "static":
<input type="hidden" id="FileNameHidden" runat="server" clientidmode="Static" />
Back on the page for displaying the image there is a save button. This button takes the value from FileNameHidden and sets it to a hidden field. This new hidden field is used to save the file name to the database:
<asp:HiddenField ID="hfUploadedPieceHubImageFile" runat="server" />
<div id="dvAddEditImageOutturn" class="dvdraggable">
<div id="dvAddImageOutturn"></div>
<asp:LinkButton ID="btnPieceHubUpdateImage"
onclick="btnUpdatePieceImage_Click"
OnClientClick="CloseUploadWindow();return GetPieceOutturnFilename();"
CssClass="btnSaveSmall"
runat="server"
></asp:LinkButton>
</div>
function GetPieceOutturnFilename() {
if ($('#iframeUpload').contents().find('#FileNameHidden').length > 0) {
$("#<%= hfUploadedPieceHubImageFile.ClientID %>").val(
$('#iframeUpload').contents().find('#FileNameHidden').val()
);
}
return true;
}
The problem is in the GetPieceOutturnfile function. $('#iframeUpload').contents().find('#FileNameHidden').length is always zero. It should be finding the FileNameHidden from the iframe.
Going through the code I can see FileNameHidden definitely gets set the name of the image:
<input name="FileNameHidden" type="hidden" id="FileNameHidden" value="test.jpg">
So I don't understand why it says the length is zero

The problem was with the btnPieceHubUpdateImage for the onClientClick:
OnClientClick="CloseUploadWindow();
return GetPieceOutturnFilename();"
It was closing the window first then trying to save the FileNameHidden from the Iframe. Swapping these around so it calls GetPieceOutturnFileName first solved the problem.

I got it working with this code. Make sure the content loaded into the iframe (child.html) is on the same domain or it will not work for security reasons. Also, it will not work running the files on your desktop. They need to be served from a server.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("#iframeUpload").load(function() {
var fileName = $(this).contents().find("#FileNameHidden").val();
console.log(fileName);
});
});
</script>
</head>
<body>
<iframe id="iframeUpload" src="child.html" />
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form>
<input name="FileNameHidden" type="hidden" id="FileNameHidden" style="display:none" value="test.jpg">
</form>
</body>
</html>
If this does not help solve your issue, you should provide files or a jsfiddle.

Related

How to detected Control is clicked OnClientClick in ASP.NET C#?

I have an Image Button with OnClientClick event to load Ajax.
I want to detect that my Image Button is clicked. I'll try so hard but no luck.
This is my code:
ImageButton imgbtn = new ImageButton();
imgbtn.Height = 25;
imgbtn.CssClass = "light";
imgbtn.ID = "led" + i;
imgbtn.OnClientClick = "Turnon('" + table.Rows[i]["Url"].ToString() + "');";
//If i can detected that my imgbtn is clicked
//I will do something
Sorry if my question is unclear, but i'm try best to show you my idea.
Thanks!
Here's the solution
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Turnon(url)
{
alert(url);
}
</script>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
You need to add control to your form or any place holder on aspx page.
Code behind:
ImageButton imgbtn = new ImageButton();
imgbtn.Height = 25;
imgbtn.CssClass = "light";
imgbtn.ID = "led";
imgbtn.OnClientClick = "Turnon('" + "www.google.com" + "');";
form1.Controls.Add(imgbtn); //

Sending javascript variables into a frame

I'm trying to combine some dynamic parameters that are sent through the URL into a frame, but nothing works. Tried them inside the tags, outside, before, after... Can somebody shed a light on this?
URL on the top frame is http://www.someurl.com/someparameters.html?country=EN_US. The first script will get the language (EN) and market (US). Then, the frameset is built with another page and our target page, which should be called with the link "http://www.someurl.com/somefolders?LANGUAGE=EN&MARKET=US&somefixedparameters=123"
This is the source code of the frameset that isn't working.
<!DOCTYPE html>
<html>
<script type="text/javascript"><!--
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
}
</script>
<frameset rows="36px,*" frameborder="0">
<frame id="main" src="header_cgh.html?country=BR_OP" noresize="noresize" scrolling="no" border="1" bordercolor=white>
<frame id="flow" src="">
</frameset>
<script type="text/javascript"><!--
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123";
</script>
</html>
Thanks for your help!
UPDATE: After opening Chrome's Javascript console and inserting the command:
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123"
It returned the expected result. But it won't happen on its own.
Change your script to this:
window.onload = function() {
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
document.getElementById("flow").src = "/somefolders?language=" + language + "&market=" + market;
}
And put it in a script tag in your head.
Also, as a heads up: if someone requests the main frameset page without a query string, or without the country parameter in there, then indexOf returns -1, and you end up with nonsense in your language and market variables. You'll want to come up with a more robust way of getting that information.
Here is an example using postMessage. See if this handles what you're looking for:
<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>
<form name="form">
<input type="text" name="msg" value="Your message"/>
<input type="submit"/>
</form>
<script>
var win = document.getElementById("iframe").contentWindow
document.forms.form.onsubmit = function() {
win.postMessage(
this.elements.msg.value,
"http://a.JavaScript.info"
)
return false
}
</script>
From http://javascript.info/tutorial/cross-window-messaging-with-postmessage

websession lost while window.location.replace or href

I lost the web session when i tried window.location.replace("webform2.aspx") from webform1.
I tried href as well. Also I passed "/webform2.aspx" as a paramaeter.
However the session is lost on the redirection.
Can anyone help.
Webform1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function pageload() {
window.location.href("/webform2.aspx");
}
</script>
</head>
<body onload="pageload()">
<form id="form1" runat="server" >
</form>
</body>
</html>
WebForm1.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
string str = this.Session.SessionID;
}
Webform2.aspx just an empty form and having the aspx.cs as the above code to note session id by debugging.
Update:
I maanged to acheive using the below code. However I just keep this question open to know redirection with relative URL(without session id) lose the session. One more point here is I made cookieless as true hence only my url will have the session id.
var path = window.location.href;
var i = path.lastIndexOf("/") + 1;
var loc = path.substring(0, i ).concat("webform2.aspx");
window.location.href(loc);
I used cookieless session and hence a relative URL redirection doesnt have knowledge about session, hence a new session is initiated.
I used below code to overcome the problem.
var path = window.location.href;
var i = path.lastIndexOf("/") + 1;
var loc = path.substring(0, i ).concat("webform2.aspx");
window.location.href(loc);

Get text file content using javascript

I've tried use javascript to open text file and get his name and his content, so right now I'm stuck at string, because I used input - type file to get directory / path.
Anyway, my question what is wrong in the next code, and how can i get text file content using javascript?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Display Text Files</title>
<script type="text/javascript">
var str = document.getElementById('txt').value;
function display() {
if (str != "") {
var filename = str.split("/").pop();
document.getElementById('filename').innerHTML = filename;
}
}
</script>
</head>
<body>
<form method="get" action="#" >
<input type="file" accept="text/plain" id="txt" />
<input type="submit" value="Display Text File" onclick="display();" />
</form>
</body>
</html>
EDIT: I also wanna disable in input file the all files opition (*) to text files only (.txt).
Thanks!
Modern browsers implementing FileReader can do this. To test your browser check if window.FileReader is defined.
Here is some code I wrote only this morning to do just this. In my case I simply drag a file onto the HTML element which is here referenced as panel.in1 but you can also use <input type="file" /> (see the reference below).
if (window.FileReader) {
function dragEvent (ev) {
ev.stopPropagation ();
ev.preventDefault ();
if (ev.type == 'drop') {
var reader = new FileReader ();
reader.onloadend = function (ev) { panel.in1.value += this.result; };
reader.readAsText (ev.dataTransfer.files[0]);
}
}
panel.in1.addEventListener ('dragenter', dragEvent, false);
panel.in1.addEventListener ('dragover', dragEvent, false);
panel.in1.addEventListener ('drop', dragEvent, false);
}
It is the reader.onloadend function which gets the text of the file which you recover in the event handler as this.result.
I got most of the mechanism on how to do this from MDN : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

JavaScript display new page when submit HTML form

Suppose I have 2 html files: form.html and confirm.html
form.html just have a text field and a submit button, when you hit submit it will display what you just typed in text field.
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript">
function display(){
document.write("You entered: " + document.myform.data.value);
}
</script>
</HEAD>
<BODY>
<center>
<form name="myform">
<input type="text" name="data">
<input type="submit" value="Submit" onClick="display()">
</form>
</BODY>
</HTML>
Now I want that when hit submit button it will display entered value in confirm.html. What should I do? I mean what should be in confirm.html and how data from form.html be used in other location, do I need create a separate JavaScript file to store JS function so I can use it in both 2 html files. I am kind of new to all kind of stuff.
Note: No PHP or server side language or anything super here, just 2 html files in my Desktop and I want to test using FireFox.
Thank you!
You can try using localStorage or cookies. Check one of the 2 solutions found below...
1 - If you have HTML5, you can store the content of you input into the localStorage.
Try this example:
form.html:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into localStorage
localStorage.setItem("mytext", mytext);
return true;
}
</script>
</head>
<body>
<center>
<!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL -->
<form name="myform" onsubmit="tosubmit();" action="confirm.html">
<input id="mytext" type="text" name="data">
<input type="submit" value="Submit">
</form>
</body>
</html>
confirm.html:
<html>
<head>
<script>
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.write("passed value = "+mytext);
}
</script>
</head>
<body onload="init();">
</body>
</html>
2 - Also, as #apprentice mentioned, you can also use cookies with HTML standards.
Try this example:
form.html:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Function for storing to cookie
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into a cookie
setCookie("mytext", mytext, 300);
return true;
}
</script>
</head>
<body>
<center>
<!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL -->
<form name="myform" onsubmit="tosubmit();" action="confirm.html">
<input id="mytext" type="text" name="data">
<input type="submit" value="Submit">
</form>
</body>
</html>
confirm.html:
<html>
<head>
<script>
// Function for retrieveing value from a cookie
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into a cookie
var mytext = getCookie("mytext");
// Writing the value in the document
document.write("passed value = "+mytext);
}
</script>
</head>
<body onload="init();">
</body>
</html>
What you could do is submit the form using a get method (method="get"), and send it to your confirm.html page (action="./confirm.html").
Then, you could use jQuery to retrieve the values from the URL from your confirm.html page.
This website provides a method to do that: http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html .
Then, all you have to do is call your display() method.
Seams like a fit for persist.js, which will let you save and load data in the user's browser. After including its javascript file, you can save data like this:
var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');
And you can later retrieve the saved data in another html page like the following:
var store = new Persist.Store('My Application');
val = store.get('some_key');
You could also, instead of changing the page, change the content of the page. Upon submission just change the page using the innerHtml variable.

Categories