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); //
Related
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.
I have a js rendered in HTML which would give a preview of the form. The code is functioning correctly but it gives me the output on the same page rather i want to open it in a pop-up window. I have tried using window.open () with no luck. Could you please help me out in how i can use window.open() for the below. The button ID is preview. When the button is clicked it executes a function similar to below
$("#preview").click(function() {
$("#formpreview").delete();
var fieldSet = ...................});
You can populate the html in the child window using the below example:
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="launch" value="Launch Child Window"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
var btnLaunch = document.getElementById("launch");
btnLaunch.onclick = function () {
var childWindow = window.open("", "", "height=500, width=500");
var html = "";
var theVariable = "Conent in Child Window";
html += "<p>" + theVariable + "</p>";
childWindow.document.body.innerHTML = html;
}
Store the popup as a variable, then set the popup's HTML to whatever you need.
$("#preview").click(function() {
var myWindow = window.open("", "Popup", "width=300, height=500");
myWindow.document.write("<html>This is where your content goes</html>");
});
Please help me to refresh periodically an image in a web form (asp.net).
Here is my code. The image is not refreshing. Thank you in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js">
$(document).ready(function () {
var refreshId = setInterval(function () {
var obj = document.getElementById("<%=Image1.ClientID%>");
var src = obj.src;
var pos = src.indexOf("?");
if (pos >= 0) {
scr = src.substr(0, pos);
}
var date = new Date();
obj.src = src + '?v=' + date.getTime();
return true;
}, 10000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/sOverview.png" />
</div>
</form>
</body>
</html>
and the code behind:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Image1.ImageUrl = Image1.ImageUrl + "?" + DateTime.Now.ToLongTimeString()
End Sub
A script element gets its script from either the text node inside it, or the URL of the src attribute. Not both.
If you want to load two scripts (one from a URL and on in the text node) then you need two script elements.
In my case i have
<input type="text"/>
And button, that on click add additinal inputs to page.
To add inputs i use this JavaScript:
var myBtn = document.getElementById('myBtn');
var qtyOfAdds = 0;
myBtn.addEventListener('click', function (event)
{
addField();
});
var form = document.getElementById('form1');
function addField()
{
var input = document.createElement('input');
input.id = qtyOfAdds;
input.name = qtyOfAdds;
input.type = "Text";
form.insertBefore(input, myBtn);
qtyOfAdds++;
document.getElementById('AddedFieldsCount').value = qtyOfAdds;
}
On server side i read post data, to get all field data input.
Using this C# code:
var context = HttpContext.Current;
List<string> fieldsList = new List<string>();
string hiddenFieldData = context.Request["AddedFieldsCount"];
int addedFieldsCount = 0;
Int32.TryParse(hiddenFieldData, out addedFieldsCount);
for (int i = 0; i < addedFieldsCount; i++)
{
fieldsList.Add(context.Request[i.ToString()]);
}
So, and html on .aspx page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<input type="text"/>
<button type="button" id="myBtn">ADD</button>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
<br />
<input id="AddedFieldsCount" name="AddedFieldsCount" type="hidden" />
</form>
<script src="JavaScript.js"></script>
</body>
</html>
Tell me please, can you advice more better way?
In my case using jQuery and Asp.Net MVC I'd approach it as follows (note, this is untested so there may be a few mistakes), I'm also unsure as to what the text boxes will be used for and what text they'll support.
Client side
$(document).ready(function(){
$('#myBtn').click(function(){
var $this = $(this),
$form = $('#form1'),
$inputs = $('input.tb');
$newInput = $('<input/>', { type: 'text', name: 'tb' + $inputs.length, class: 'tb' }),
$inputs.last().after($newInput);
}
});
Server side
HttpContext context = HttpContext.Current;
// Retrieve all keys
List<string> keys = from key in context.Request.Form.AllKeys
where key.StartsWith("tb")
select key;
Without knowing your exact requirements and end use there are as always many ways to achieve what you want and the way you've currently handled it is fine but the way above could also be used.
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);