How do I pass parameters in window.open method.
<table id="tblUsers" cellspacing="0" >
<asp:Repeater ID="repUsers" runat="server">
<ItemTemplate>
<tr><td> <a ID="hlUser" runat="server" Target="_new" onclick="return OpenWindow();" ><%# Eval("Username") %></a></td></tr>
</ItemTemplate>
</asp:Repeater>
</table>
function OpenWindow() {
var toUsername = document.getElementById("hlUser");
window.open("ChatWindow.aspx?username=" + toUsername.value, "ChatWindow", "width=350,height=250");
return null;
}
I don't know much about asp.net, but looks like you have a javascript problem. Isn't document.getElementById("hlUser") an <a> element? It has no value attribute.
If you want to get the text element inside the <a> you could query the text property, or innerHTML.
<a id="hlUser">somevalue</a>
document.getElementById('hlUser').text will return somevalue
UPDATE:
Having that <a> inside a repeater makes it impossible to know with confidence any id attribute inside it beforehand. I'd reccomend passing the <a> element, or this.text itself , or even the value using the same server-side script to the function.
UPDATE 2: I see this question might be a duplicate of How do I pass a variable using window.open()?
Just change the & to a +:
function OpenWindow() {
var toUsername = document.getElementById("hlUser");
window.open("ChatWindow.aspx?username=" + toUsername.value, "ChatWindow", "width=350,height=250");
return null;
}
At this level of code, you're working in Javascript rather than VB, and VB's use of & for concatenation is an oddity among programming languages.
Related
I have a custom anchor create function
public static Anchor Create(string name, object variant)
{
return new Anchor(string.Format("{0}{1}", (name.StartsWith("#") ? name : string.Format("#{0}", name)), variant).Replace(' ', '_'));
}
public static Anchor Create(string name)
{
return Create(name, string.Empty);
}
Which creates the anchor tags on the webpage. The following is the call on the .ascx control
<asp:DataList ID="_meterLinkBar" runat="server" RepeatDirection="Horizontal" CssClass="bodytext4" RepeatLayout="Flow">
<ItemTemplate>
<a href='<%# Anchor.Create("Meter", Container.ItemIndex + 1) %>' title='<%# Eval("Name", "{0} measurement results") %>'>
<%# FormatMeterName(Eval("Name") as string, Container.ItemIndex) %></a>
</ItemTemplate>
<SeparatorTemplate>|</SeparatorTemplate>
<FooterTemplate>
<hr style="height: 1px; border-width: 0; color: #006690; background-color: #006690;" />
</FooterTemplate>
</asp:DataList>
The following is the actual item with the anchor tag
<ItemTemplate>
<a id='<%# Anchor.Create("Meter", Container.ItemIndex + 1) %>'></a>
....
</ItemTemplate>
EDIT
Here is the toString method
public override string ToString()
{
return _name;
}
The following is the constructor
private Anchor(string name)
{
_name = name;
}
Now everything works in IE, but in the other browsers, the links are rendered properly but the actual anchor tag itself shows as ##whatever
Any suggestions?
Ideally, we probably need to see the HTML produced as well. It sounds like you are getting two # href="##name". If that is the case, then the Anchor's .toString() method probably also adds the # before the name of the anchor. So, in that case, if it works in IE, it's because IE ignores the repetition while other browsers do not ignore it.
Check the .toString() method and see what's in it. If it's also adding the #, then you'd need to change your code like so:
public static Anchor Create(string name, object variant)
{
return new Anchor(string.Format("{0}{1}",
(name.StartsWith("#") ? name.Replace('#','') : name),
variant).Replace(' ', '_'));
}
EDIT
Ah, I'm silly. I just realized, you are putting this in the "ID" of the <a> tag. You do NOT put # into the ID. You only put that into the href="#Meter", e.g.
<a id='Meter' name='Meter'></a>
<a href='#Meter'>Go back to Meter</a>
If your id='#Meter', then that would cause problems.
I am developing an application in which I have a asp.net form with a lot of textboxes.I need to use the same JavaScript function for all the textboxes to validate whether it contains any non alphabetic character in it. How can I use the same method for all the textboxes? I am stuck at how could I pass the id of the textbox to the JavaScript function.
<script type="text/javascript" language="JavaScript">
function CheckAlphabet(textboxId)
{
if (!document.getElementById('<%=textboxId.ClientId %>').value.match("/^[a-zA-Z]+/"))
return false;
}
</script>
asp.net code part is like this....
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="CheckAlphabet(TxtEmpFirstname)"
runat="server" MaxLength="100"></asp:TextBox>
The Javascript code gave an error. Please help with passing the id of the asp.net textbox. I need to use the same Javascript function for many textboxes to validate for non alphabet characters in the textbox. Please help.
Right approach would be carefully look at code and see what runs on server and what runs in the browser (i.e. print the code and mark in 2 colors)...
You onkeydown="CheckAlphabet(TxtEmpFirstname)" is mix of server side and client side intentions: you should construct client ID with server side code instead of TxtEmpFirstname and remove it from the function itself.
onkeydown="CheckAlphabet('<%=textboxId.ClientId %>')"
Try this:
function CheckAlphabet(textboxId)
{
if (!textboxId.value.match("/^[a-zA-Z]+/"))
return false;
}
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="javascript:CheckAlphabet(this)" runat="server" MaxLength="100"></asp:TextBox>
You're on the right track. Try something like this:
<script type="text/javascript" language="JavaScript">
function CheckAlphabet(textboxId){
if (!document.getElementById(textboxId).value.match("/^[a-zA-Z]+/")) return false;
}
</script>
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown='CheckAlphabet("<%=TxtEmpFirstname.ClientId %>")' runat="server" MaxLength="100"></asp:TextBox>
Notice that the client-side script only references the contents of the variable that is passed to it. When the TextBox is rendered to the page, the inline tag (<%=...%>) will be converted into the client-side ID of the input field.
Also take note of the quote usage. When you put an inline server-side command in the property of a server-side tag, you have to wrap the property with single quotes and then use double quotes to represent literal strings in what will be the final output.
use this:
function CheckAlphabet(textboxId)
{
if (!document.getElementById(textboxId).value.match("/^[a-zA-Z]+/"))
return false;
}
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="CheckAlphabet(this.value)" runat="server" MaxLength="100"></asp:TextBox>
javascript code will be complained after server side codes compiled
Simply I am trying to pass the client Id of one textBox 'txtPersonId' for the client-click event so that I can traverse to that textBox control and pass its jQuery wrapper to the loadePerson() function.
This is how I decalre it in the aspx mark-up:
<asp:Button ID="btnSearch" runat="server" Text="ARA" OnClientClick="loadPerson(jQuery('#<%=txtPersonId.ClientID %>'))"/>
But when I render it, the
<%=txtPersonId.ClientID %>
place holder stays as it is and it is not replaced with the rendered control's client Id.
Any idea why this happens and how should I overcome that?
When I've had issues like this I've resorted to wrapping the entire expression in the brackets and building the result as a string. I assume that it's because the parser doesn't recognize the render block syntax embedded inside the string property.
<asp:Button ID="btnSearch" runat="server" Text="ARA"
OnClientClick='<%= "loadPerson(jQuery(\"#" + txtPersonId.ClientID + "\"))" %>' />
I've long since moved on to keeping my javascript completely separate from my mark up, so I may be a little fuzzy on the exact details. If you wanted to separate your javascript from your mark up you could either add the handler with an explicit or relative DOM reference in a script block. Using the "ends with" selector matching on the id removes the need to find the explicit id, though you could also do that -- the example below shows both styles.
<script type="text/javascript">
$(function() {
$('#' + '<%= btnSearch.ClientID %>').click( function() {
loadPerson( $('input[id$=txtPersonId]') );
});
});
</script>
I don't know what it does your LoadPerson,but if you want write a function for your click event in Jquery you can make something like:
'#'+ '<%=txtPersonId.ClientID %>' to address your txtbox ID you can do the samething for your button $('#' + '<%=btnSearch.ClientID%>').click(function(){//click event process});
How can I get gridview HTML textbox value in .aspx.cs code?? E.g. :
<input id="Frequency" name="customerName" type="text" style="width: 44px" />
If i use the bellow code ,Then i can get the value on selectedIndex event.
string n = String.Format("{0}", Request.QueryString['customerName']);
I want to use bellow syntax.
TextBox_Label1 = (TextBox)e.Row.FindControl("Frequency");
i don't want to user the runat="server" on HTML control .
From Gridview i need to call a popup,Popup return a value ,I use the bellow code on javascript to do that
window.opener.document.getElementById("customerName").value = val;
window.close();
In my gridview .if i put the runat="server" then return value not set ,So i need to remove the runat="server".It also not work if i put the Asp:TextBox on Grid.Help me to Return popup value on gridview Asp:TextBox
Thanks!
Try a databinding expression:
<input id="Frequency" name="customerName" type="text" style="width: 44px"><%# String.Format("{0}", Request.QueryString["customerName"])%></input>
If you're having problems with this process and the difference is one is runat="server" and the other is not, I would suggest you need to look at your JavaScript to make sure that you have the proper element selection method. The rendered ClientID will be different from a standard html control ID. If you write your code so that the ClientID is injected into the JavaScript, you can keep the runat="server" and achieve your results. Standard html controls are not accessible from the code behind.
i have a series of rows that are generated using an asp:repeater:
<asp:repeater ID="itemsRepeater"
OnItemDataBound="itemsRepeater_ItemDataBound"
runat="Server">
<itemtemplate>
<tr>
<td>
<asp:HyperLink ID="linkView" runat="server"
Text="<%# GetItemText((Item)Container.DataItem) %>"
NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
</td>
<td>
<asp:HyperLink ID="linkDelete" runat="server"
Text="Delete"
NavigateUrl="<%# GetDeleteUrl((ActionItem)Container.DataItem) %>" />
</td>
</tr>
</itemtemplate>
</asp:repeater>
The repeater creates an HTML table, with each row containing a link to an item and (what is essentially) a "Delete" link. The above simplified example code generates HTML similar to:
<TR>
<TD>
<A href="ViewItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
AllisonAngle_SoccerGirl001.jpg
</A>
</TD>
<TD>
Delete
</TD>
</TR>
Now that all works, but i want to convert the "Delete" to client side. i want to be able click the link and it will, on the client javascript:
prompt an alert "Are you sure..."
have javascript issue server-hit to actually delete the item they want
remove the item from the client DOM tree
So there are four problems to be solved:
How to hook up javascript to the client-side click of the Delete link.
How to know what item the user clicked Delete
Prevent a post-back
Delete the row that the user clicked
That is my question.
From here on you will find my rambling attempts to solve it. Don't take anything below as relating in any way to any possible accepted solution. Just because i posted code below, doesn't mean any of it is useful. And it doesn't mean i'm anywhere within spitting distance of the best solution. And because i can't make anything below work - it must have gone down the wrong road.
My Attempts
Wiring Up Javascript
The first task is to convert the delete link HTML from something such as:
<A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
Delete
</A>
into something more javascripty:
<A href="#"
onclick="DeleteItem('DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}')">
Delete
</A>
and the add the script:
<script type="text/javascript">
//<![CDATA[
function DeleteItem(deleteUrl)
{
//Ask the user if they really want to
if (!confirm("Are you sure you want to delete INSERT NAME HERE?"))
{
return false;
}
//Call returns false if the server returned anything other than OK
if (!DoAjaxHit(deleteUrl)
{
return false;
}
//Remove the table row from the browser
var tableRow = document.getElementById("TODO-WHAT ID");
if (row != null)
{
//TODO: how to delete the tableRow from the DOM tree?
//document.Delete(tableRow) ?
}
//return false to prevent a postback
return false;
}
//]]>
</script>
What combination of ASP code can be used to create the above? i hear that asp:LinkButton has an OnClientClick event, where you can wire up a javascript function:
<asp:LinkButton ID="linkDelete" runat="server"
Text="Delete"
OnClientClick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem) %>);"/>
Problem is that the rendered HTML is literally containing:
<a onclick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem)) %>);" ...>
Delete
</a>
If i change the client click event handler to:
OnClientClick="DeleteItem('todo - figure this out');"/>
it works - as well as "todo - figure this out" can work.
Preventing Postbacks
The dummied down above javascript call actually happens (i can see my alert), but there's the next problem: Returning false from the javascript function doesn't prevent a postback. In fact, i can see that the href on the generated html code isn't "#", but rather
javascript:__doPostBack('ctl0....
i tried changing the ASPX code to include the OnClick handler myself:
OnClick="#"
OnClientClick="DeleteItem('todo - figure this out');"
But the compiler thinks the pound side is a pragma, and whines:
Preprocessor directives must appear as
the first non-whitespace character on
a line
Table Row Identity
The table rows don't have an ID, they're generated by the asp:repeater.
How can the javascript function know what triggered the click event? The javascript needs to be able to find the element, and remove it from the tree.
Note: i would of course prefer fade+collapse animation.
Normally you get an element by using
var tr = document.getElementById("the table row's id");
But the table rows don't have an easily knowable ID. Since there are multiple rows, the server generates the ID as it builds the table. i realize some solution is going to have to involve changing:
<TR>
into
<TR runat="server">
so that there will be server generated identity for each table row, but how do i reference the generated name from javsscript?
Normally i would have thought that the scripting problem would be solved by using multiple paramters:
function DeleteItem(tableRowElement, deleteUrl)
{
//Do a web-hit of deleteUrl to delete the item
//remove tableRowElement DOM object from the document tree
}
But the problem is just pushed elsewhere: How do you populate tableRowElement and deleteUrl for the call to the javascript function?
Such a simple problem: convert a click from a postback to client-side.
The volume of problems involved is getting quite idiotic. Which seems to indicate that either
the idea solution is something completely different
there is no solution
References
Stackoverflow: How do I fade a row out before postback?
Stackoverflow: Javascript before asp:ButtonField click
asp.net: Accessing repeater elements from javascript.
Stackoverflow: How to access repeater generated elements?
jQuery can dig out the tags for you:
$("[id$=linkDelete]").click(function() {
DeleteItem(this.href);
});
That code says "find all the DOM elements whose ID ends with 'linkDelete' and wire up the following click event handler".
I would recommend against implementing the Delete function through links in this way. Delete links are a security risk.
Rather, it's better to require a post to that url instead. If you want to be doing ajax, I would strongly recommend using a javascript framework so you don't have to deal with the differences in how different browsers implement XmlHttpRequests.
For instance, in jQuery you could do it like this:
$.post('Delete.aspx',{itemGuid:'{19a149db-5675-4eee-835d-3d78372ca6f9}'},
function(data, textStatus) {
if (textStatus == 'success') {
$(this).parents('tr:eq(0)').fadeOut();
}
});
which would do both the ajax call and the fadeout effect you want.
You could then access the item guid in Delete.aspx from Request.Form["itemGuid"], and this wouldn't be vulnerable to link attacks.
Preventing Postbacks
The server is generating a postback wireup because you're using a server control. Use a plain <a> tag without a runat='server' directive.
Table Row Identity
I usually do this by databinding an ID column of some kind and putting this in the repeater template:
<tr id='<%#Eval("ID")%>'>
P.S. I hate to sound like a fanboy, but jQuery will make all of these things an order of magnitude easier. You should really consider it if you can. Otherwise, you're going to be in a world of hurt trying to implement these features in a consistent way across browsers.
P.P.S. If the Delete.aspx and similar urls are only going to be called from javascript, I would recommend using ashx http handlers instead. You can do all of the same server logic without the needless overhead of a full-blown page.
mine usually comes out looking like
<asp:LinkButton runat="server" OnClientClick='<%# Eval("ID", "DeleteItem(this, \"{0}\"); return false;") %>' Text="Delete" />
that will make html that looks like
<a id="blah_blah_ctl01" onclick='DeleteItem(this, "{19a149db-5675-4eee-835d-3d78372ca6f9}"); return false;'>Delete</a>
I include the "this" reference so that you can have access to the dom and delete the link...or it's parent or whatever. From there it's pretty straight forward to use jQuery to actually do the posting and DOM manipulation. The "return false;" disables the postback.
The other answerers found various bits related to different aspects of the question. i managed to cobble together a complete solution. i've copy/pasted the relavent snippits here.
The first important change is the use of an asp:LinkButton which allows as OnClientClick event, which gives you direct access to the javascript OnClick event:
<asp:repeater ID="itemsRepeater"
OnItemDataBound="itemsRepeater_ItemDataBound"
runat="Server">
<itemtemplate>
<tr>
<td>
<asp:HyperLink ID="linkView" runat="server"
Text="<%# GetItemText((Item)Container.DataItem) %>"
NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
</td>
<td>
<asp:LinkButton ID="linkImpregnate" runat="server"
Text="Impregnate"
OnClientClick="<%# GetImpregnateUrl((Item)Container.DataItem) %>" />
</td>
</tr>
</itemtemplate>
</asp:repeater>
The code-behind manually builds presentation code (yay for separation of controller and view!) that contains a javascript call.
protected string GetNodeAcknowledgementClientClick(Item item)
{
if (!(item is HotGirl))
return ""; //this shouldn't be called for non-acknowledgements, but i won't fail
HotGirl girl = (HotGirl)item;
String szOnClientClick =
"return ImpregnateGirl(this, "+
Toolkit.QuotedStr(girl.GirlGUID.ToString()) + ", "+
Toolkit.QuotedStr(GetItemName(item))+");";
return szOnClientClick;
}
And finally in the aspx, i find a random spot to mash in some javascript:
<script type="text/javascript" src="Javascript/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
function DeleteItem(sender, girlGuid, girlName)
{
if (!confirm("Are you sure you want to impregnate "+girlName+"?"))
{
return false;
}
$.post(
'ImpregnateGirl.aspx?GirlGUID='+nodeGuid,
function(data, textStatus) {
if (textStatus == 'success')
{
$(sender).parents('tr:eq(0)').hide();
}
else
{
return false;
}
}
);
//return false to suppress the postback
return false;
}
//]]>
</script>
i would have made the jQuery do a post, as a security measure as guy suggested, but jQuery would give an error, rather than posting. Rather than care i chose to not care.