I've got a with an onClick event in it to link to another page with an id pulled from the listview row that is clicked.
<div class="LVitem" onClick="location='Links.aspx?id=<%# Eval("id") %>'">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</div>
The Eval works in the ItemTemplate to fill the listview but does not seem to return anything when used in the onClick event.
What I see in the browser is:
<div class="LVitem" onClick="location='Links.aspx?id='">
I've seen a number of references to the use of single and double quotes and have tried to change them but it's complicated with the Eval within the location within the OnClick. I also tried this but it actually returned nothing, not even the "Links.aspx?id=" string.
<div class="LVitem" onClick='<%# Eval("id", "Links.aspx?id={0}") %>'>
Would really appreciate a hand with this one. Thanks all.
Related
Hi I have a problem with my javascript within an ASP SharePoint web part page. The page is built the same as any other ASP page so the fact that its hosted within SharePoint shouldn't make any difference.
The problem is with my javascript within the page. I have Html Table made up of 8 cells. For each of these cells I am displaying a different div with different data within it onmouseover.
The problem comes with the ID for the Divs that I am trying to display. The Divs ID is changed at runtime but also changes daily so cant be inputted manually.
HTML:
<div id="Main" style="display: none;
<div id="hover1" runat="server" style="display: none">
Test
</div>
</div>
<table id="Table3" runat="server" >
<tr id="Tr8" runat="server" >
<td id="status1" runat="server" onmouseover="getDataXML('hover1')" onmouseout="hideDiv('hover1')">
Received
</td>
</tr>
</table>
The id 'hover1' at runtime is replaced with something like 'ctl00_m_g_6ddac285_ceb9_4b5a_9095_c4b216cf7dfd_ctl00_hover1'
Javascript:
function getDataXML(getID) {
document.getElementById('Main').style.display = "block";
document.getElementById(getID).style.display = "block";
};
The javascript works if I take the ID which is generated and hard code it but the ID changes daily meaning it becomes a problem. Any help I would greatly appreciate
Regards,
Set clientIdMode = static to the element
<div id="hover1" clientIdMode="static" runat="server" style="display: none">
you have to pass clientId like this:
onmouseover="getDataXML('<%=hover1.ClientID %>')"
or alternatively set ClientIDMode to Static, but in that case if you change div id in aspx, you have to explicitly change where you have used Id and it will be difficult to catch becuse there will be no compile time error.
I am having the following Radio butttons in my aspx file.
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption2" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption3" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption4" runat="server" GroupName="grpAnswers"/>
I want to set the text from javascript on a button's click.
Javascript code is as follows.
document.getElementById("rdoOption1").innerHTML = "sometext";
I've also tried with Text,nodevalue instead of innerHTML, no use. Plz help.
You need to use ClientID in javascript instead of using the server side id. As the server side id is changed when html is generated by asp.net. You also have : instead of semi colon at the end of javascript statement. Use value instead of innerHTML as that is not for input html elements.
document.getElementById("<%= rdoOption1.ClientID %>").value = "sometext";
If you have .Net Framework 4 and above then you can use Control.ClientIDMode="static" to keep the server id on the client side.
Edit The second thing you have to take care is to make sure the html element you are trying to access is already added to DOM. You can do this by putting the script after the html elements you are trying to access. The best place would be just before the ending body tag </body>
<script type="text/javascript>
document.getElementById("rdoOption1").innerHTML = "sometext";
</script>
</body>
Atlast I've found the solution for this.
Actually the asp:RadioButton is rendering in the browser as follows,
<input name="grpAnswers" id="rdoOption1" type="radio" value="rdoOption1"/>
<label for="rdoOption1">
Note: It'll generate label only if you specify some value for Text property of the asp:RadioButton.
So ,I have changed my code as follows,
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers" Text=" "/>
My Javascript code to set Text for that asp:RadioButton is as follows,
document.getElementById("rdoOption1").nextSibling.innerHTML = "someText";
This one worked for me.Thanks to all those who spent their valuable time in answering my question. :)
ASP.Net controls are server side controls and not client side controls like HTML.
Their actual ID's get generated during the run time not before hand.
So, your syntax should be some thing like:
document.getElementById("<%= rdoOption1.ClientID %>").innerHTML = "sometext";
Check out this post: how-to-change-the-text-of-a-radio-button.
I don't think you can change the text using innerText of a radio button.
I have two dropdown menus and a linkbutton:
<form name="OptionForm" method="post">
<p>
<label for="ddlLocJobPhOpt" class="ui-accessible">Location Job Phase</label>
<asp:DropDownList runat="server" ID="ddlLocJobPhOpt" data-mini="true"></asp:DropDownList>
</p>
<p>
<label for="ddlFrmnOpt" class="ui-accessible">Foreman</label>
<asp:DropDownList runat="server" ID="ddlFrmnOpt" data-mini="true"></asp:DropDownList>
</p>
<asp:LinkButton ID="lnkSelectOptions" data-icon="arrow-r" data-iconpos="right" runat="server" data-role="button" Class="custom-btn" data-inline="true" data-theme="c" data-transition="pop" UseSubmitBahavior="false" href="#" data-mini="true" OnClientClick="SelectOptions()">GO</asp:LinkButton>
</form>
When I click the linkbutton this function fires: SelectOptions()
I am trying to empty the second dropdown list when the button is clicked. But when I add:
var frmnDDL = $('#ddlFrmnOpt');
frmnDDL.html("");
or
var frmnDDL = $('#ddlFrmnOpt');
frmnDDL.empty();
and then renavigate to the OptionForm above the dropdown is still populated.
What am I doing wrong?
I can almost guarantee that frmnDDL.length is 0.
.Net renames controls to something like ctl00_MainContent_ddlFrmnOpt
You have two options
you can change your jquery selector to the actual generated name (inspect the rendered html)
you can change your selector to do a partial match with something like $("[id$=ddlFrmnOpt]") or $("select[id$=ddlFrmnOpt]")
After that there are many ways to empty the select
frmnDDL.empty();
frmnDDL.children().remove();
frmnDDL.find('option').remove();
//etc, etc
Secondly, I'm confused by what you mean when you say "and then renavigate to the OptionForm above the dropdown is still populated." If you are performing a postback, .net will reload the dropdown with it's data during it's page lifecycle. What you changed in the DOM was client side, and with the web being stateless, those changes aren't remembered between postbacks.
As #CaffGeek pointed out, your issue is the fact that ASP.NET uses the control's parent hierarchy to determine the rendered ID. You can continue using the Javascript and jQuery code you already have by using static IDs for your controls.
Try
<asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlLocJobPhOpt" data-mini="true"></asp:DropDownList>
and
<asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlFrmnOpt" data-mini="true"></asp:DropDownList>
As of .NET 4, adding
ClientIdMode="Static"
to any server side control tells ASP.NET to render the exact ID that you specified in your markup instead of rendering it based on its legacy rules.
See http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
Check this Fiddle
$('button').click(function(){
$('#mySelect option').each(function(){
$(this).remove();
});
});
I have Googled this to death and found lots of 'answers', but none of them will work for me, so maybe you clever people could give me a 'definitive' answer?
I have a Javascript function:
function enableSaveLink() {
document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}
This works fine, but obviously it is hard-coded to enable a particular control on my page. What I'd like is to be able to call this function from any control on the page, passing the name of the control I'd like to enable as a variable. So, in an ideal world, my Javascript function would look like this:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
And I'd call it like this:
<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />
I know the way I've passed the control name would never work, but I've tried passing it in all different ways and none work, so this is just for the purposes of illustration. Can anyone tell me how to actually make this work?
You need to use the ClientID property of the control.
This will help:
<asp:button id="btnTest" runat="server" Text="Click Me"
onclientclick="enableControl('<%= lblTest.ClientID %>') />
Use the this reference (more info here):
<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />
Then in your script:
function enableSaveLink(elem) {
elem.removeAttribute('disabled');
}
Here you are passing a reference to the object calling the function to the function, you can then just set the attribute on the element rather than finding it in the DOM.
EDIT - Just realised what your intended usage is. If you're looking to fire an event from a disabled element when clicked, then you can't do this from the element. It would need to be handled from some other enabled element. The above method works fine if you intend to disable the element when clicked - but not enable the element when clicked.
EDIT - Just to accompany my comment, if you have a uniform structure like this (i.e. where all inputs have a corresponding label - or even button) then:
<div>
<label onclick="activateSibling(this);">Input One:</label>
<input type="text" />
</div>
You could try this:
function activateSibling(label) {
label.nextSibling.removeAttribute("disabled");
}
I've made a jsFiddle demonstrating my concept in jQuery which seems to work fine.
EDIT - OK, last idea. What about custom attributes. You could add a target attribute to your clickable element which contains the Id you're going to enable, like so:
<label target="active_me" onclick="activate(this);">Click to activate</label>
<input type="text" id="active_me" disabled="disabled" />
And your script:
function activate(label) {
var inputId = this.getAttribute("target");
var input = document.getElementById(inputId);
input.removeAttribute("disabled");
}
Although, it's starting to feel like we're fighting against the technology a little and we're not too far removed from ctrlInput.ClientID. But I suppose this makes your markup a little cleaner and gives you a function that's bindable en masse.
Ok, I've cracked it. There are probably more ways than one to do this, but this is fairly elegant.
My Javascript function:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
My ASP.NET markup:
<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />
The key is the ClientIDMode property, which, when set to static, means that the control's client-side ID when it is rendered will match the ID you give it in markup. If it's within a naming container you may need to include that in the variable passed in the function call. See here for more info about ClientIDMode.
Anyway, this works for me! Thanks for your input, everyone.
ClientID is used for getting server side control on javascript.
var element=document.getElementById('<%=lblTest.ClientID%>');
This has been bothering me for quite some time. I'm simply trying to change the value of a textbox defined in asp.net, which normally works when it is not within a LoggedInTemplate.
I've searched everywhere on the net and even here, but the only thing I can find close to doing what I need is here Finding an asp:button and asp:textbox in Javascript. Unfortunately that doesn't work. Here's what I have so far:
<head id="Head1" runat="server">
<script src="../../scripts/webeffects.js" type="text/javascript" language="javascript"></script>
</head>
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
<div class="lotto_pick_container">
<table runat="server" id="tblLottoPick">
<tr><th colspan="3">Pick a Lotto Number</th></tr>
<tr>
<td><asp:TextBox ID="txt1stNum" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txt2ndNum" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txt3rdNum" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Button ID="cmdSubmitPick" runat="server" Text="Submit Lotto Number"
onclientclick="return validateLottoPicks()" /></td>
</tr>
</table>
</div>
</LoggedInTemplate>
</asp:LoginView>
Right now I'm trying to use an external js script to find a textbox and modify it with an arbitrary value of 12, just so that I know it can work:
function validateLottoPicks() {
document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}
When I debug this with Firebug it seems all my other code works, except for this one function. I have verified the function gets called, it's just this line that doesn't work. Can someone please provide some guidance? I'll send milk and cookies.
Update:
Thanks for all the help from everyone. This was my first time using Stack Overflow and I was definitely impressed by the quick responses.
It turns out my actual problem was that using <%= LoginView1.FindControl("txt2ndNum").ClientID %> does not work in external js scripts. I didn't know this. Once, I put the function in the header of my page everything worked. Now I'm going to avoid using ASP.NET controls because I don't want to deal with that again, and it makes more sense if I ever decide to use something other than ASP.NET.
The problem is that you have set visible=false on this line
<table runat="server" id="tblLottoPick" visible="false">
From that moment the controls are not rendered the javascript can not find this control. If you do not wish to show this table use css, for example style="display:none;" so its rendered but not visible. All the rest seems to me that working.
Update
From the comments also seems that this code is not inside the aspx page, so the ClientID can not work and not found. Add this somewhere in the header in the page that have this LoginView1 control.
function validateLottoPicks() {
document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}
Try
tblLottoPick.FindControl("txt2ndNum").ClientID instead.
Try putting this into a javascript string variable. What are you getting?
'<%= LoginView1.FindControl("txt2ndNum").ClientID %>'
Because you shouldn't have to do that. Can you just do this?
document.getElementById('txt2ndNum')
Also, check in firebug to see what the ID value is set to for that control (i.e. the rendered textbox). I mean see what it's rendered as. You just need to get the right id.