I have a radiobutton column in a gridview, inside many nested asp tables. I want radios enable two buttons upon click. so I added this the following function an javascript but it cannot find my controls although I turned ClientIDMode="Static" for those buttons. It returns null.
<asp:GridView ID="gridView_stLists" runat="server" AutoGenerateColumns="False" CellPadding="3"
BorderStyle="NotSet" CssClass="table_layout" Width="500">
<RowStyle CssClass="table_body" />
<Columns>
<asp:TemplateField HeaderStyle-Width="20">
<ItemTemplate>
<input name="radioBtn_res" type="radio" value='<%# Eval("uri") %>' onclick="rdBtn_onClick()" />
</ItemTemplate>
<script language="javascript" type="text/javascript">
function rdBtn_onClick()
{
document.getElementById("btn_delete_list").enable=true;
document.getElementById("btn_showRes").enable=true;
}
</script>
can the problem be from the place of script tag? I put it under content tag.
Change your JavaScript to this
<script language="javascript" type="text/javascript">
function rdBtn_onClick() {
document.getElementById("<%= btn_delete_list.ClientID %>").disabled = false;
document.getElementById("<%= btn_showRes.ClientID %>").disabled = false;
}
</script>
I'm guessing that the problem is to do with INamingContainer changing the ids of controls in the rendered HTML sent to the client.
Where are the buttons in your markup? What does the HTML look like when you View Source?
can the problem be from the place of script tag? I put it under content tag.
No.
Where are the buttons? View the generated html source. Are the buttons there with the id you are looking for?
Also, it should be element.disabled = false, not element.enable = true
Related
I've been trying to find a solution for hours now.
asp:textbox 1:
<asp:TextBox runat="server" ID="code" placeholder="<%$ Resources:ErrorMessages, EnterCode %>" CssClass="enterCode"></asp:TextBox><br />
asp:textbox 2:
<asp:TextBox runat="server" ID="code2" placeholder="<%$ Resources:ErrorMessages, EnterCode %>" CssClass="enterCode"></asp:TextBox><br />
button:
<asp:Button CssClass="btn btn-primary" runat="server" ID="buttonEnable2" OnClick="buttonEnable_Click" Text="<%$ Resources:UserMessages, Enable %>" />
I'm trying to copy text from textbox 2 into textbox 1.
textbox 2 is embedded in a jquery accordion in a bootstrap popover.
I've tried:
the simple one within aspx.cs:
code.text = code2.text;
some jquery within a javascript file linked to the aspx file:
$("#buttonEnable2").click(function () {
$('#code').val($('#code2').val());
alert('test');
});
the code above doesn't seem to work at all, it doesn't even give me an alert.
The problem is that you're using an accordion inside of a popover which clones everything inside the popover, coping the ID of everything. So when you type a value into the textbox it attaches it to the clone of the textbox, not the actual textbox.
here's the solution:
function clickEnable2() {
var txtBox1 = this.parentElement.getElementsByClassName("enterCode")[0].value;
$("#MainContent_code").val(txtBox1);
$("#MainContent_buttonEnable").click();
}
$("#MainContent_buttonEnable2").click(clickEnable2);
This Code is in javascript
<script>
function Copy() {
var n1 = document.getElementById('code');
var n2 = document.getElementById('code2');
n2.value = n1.value;
}
</script>
and your button should be like
<asp:Button CssClass="btn btn-primary" runat="server" ID="buttonEnable2" OnClientClick="Copy()" OnClick="buttonEnable_Click" Text="<%$ Resources:UserMessages, Enable %>" />
Hope it will help.
Your textboxes are of asp.net which changes the ID of textboxes with respect to its ContentPlaceHolder. So jquery is unable to find the textboxes.
You can use ClientIDMode="Static" so that ID of textboxes will not change. Put this property for the other textbox as well.
<asp:TextBox runat="server" ID="code" ClientIDMode="Static" placeholder="<%$ Resources:ErrorMessages, EnterCode %>" CssClass="enterCode"></asp:TextBox>
Then use jquery to copy text from one textbox to other.
$('#code').val($('#code2').val());
If you are using master pages, update panels etc in asp.net, the ID of the text box will be automatically replaced with a dynamic ID, hence you may need to do the following, this will help if you do not want to change the ClientIDMode to Static
First declare a javascript variable and assign your textbox's dynamic id's to it, for which the JQuery will be
$(document).ready(function(){
var txtBox1 = <%=code.ClientId%>;
var txtBox2 = <%=code2.ClientId%>;
});
Now you can use these two variables to copy your text into one another
$("#buttonEnable2").click(function () {
$('#' + txtBox1).val($('#' + txtBox2).val());
});
You can also use the document.getElementById in the following way.
var n1 = document.getElementById(<%=code.ClientId%>);
var n2 = document.getElementById(<%=code2.ClientId%>);
I hope this will help you.
I am using a ASP .NET ListView with a MS SQL Database. I use the ListView to show the information and in the list view, there is an hyperlink which opens the editing window for the specific record in a jQuery Modal Dialog Box.
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div id="itemPlaceholder" runat="server"> </div>
</LayoutTemplate>
<ItemTemplate>
<!--More Items -->
<a name="Link" href="EditItem.aspx?id=<%# Eval("articleid")%>">Edit</a>
<!--More Items -->
</ItemTemplate>
</asp:ListView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:myConnectionString %>"
SelectCommand="SQL-SELECT-STATEMENT">
</asp:SqlDataSource>
<div>
And jQuery works by taking the link of each item which has the name "Link" and associating it with a dialog box.
<script type="text/javascript">
$(document).ready(function() {
$("a[name=Link]").each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: "Edit Article",
width: 500,
height: 550
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
Everything worked as it should. Earlier all the records could be shown in one go but as the number of records grew, I needed a paging solution. DataPager for the rescue!
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5">
<Fields>
<asp:NextPreviousPagerField />
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
But now the DataPager's controls are not working! I cannot go back,forward or click a page number as it will open the first data bound item's href in the ListView without a dialog box (Just like a normal page). But if i remove the jQuery code, the paging works as it should but I don't get the neat modal dialog box for my editing :(
Any ideas why these cannot exist with each other? Thanx a lot in advance :)
UPDATE: What doesn't work is that they cannot co-exist peacefully. If i remove the jQuery code, the DataPager works fine but I will lost my modal dialog box for editing. If i put the jQuery code back, the modal dialog box works fine but the DataPager doesn't :(
My guess is that link selector is probably selecting data pager links.
You can try $("a[name='Link']").each(.. note single quotes around attribute value.
Alternately, why don't you use id or class selectors. For example:
<a id="editLink" ...
and
$('a#editLink;).each(...
I have two asp:ListBox. The ID's are Authors and AuthorsSelected. Authors listbox is loaded with all the authors and AuthorsSelected is empty at first. Using Javascript code, I am moving items from Authors to AuthorsSelected.
Now, before submitting the form, I want to verify that AuthorsSelected listbox is not empty. I tried asp:RequiredFieldValidator and it's not workijng and giving error message.
Please let me know how to validate the AuthorsSelected listbox and make sure it's not empty before submitting the form. Thanks.
Look at this very simple example:
<p>
<script language="javascript" type="text/javascript">
function validateListbox() {
var listbox = document.getElementById("<%= ListBox1.ClientID %>");
if (listbox.length == 0)
alert("no items!");
return (listbox.length > 0);
}
</script>
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:ListBox>
</p>
<p>
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" OnClientClick="return validateListbox()" />
</p>
Please note ListBox1.ClientID usage; I use it in order to reference my listbox in JavaScript.
I have an label "test" comimg from .cs [c# code] text="data saved successfully" . but once I click the save button i need to clear its text
right now I have 3 required field validators. with message [cannot be blank, cannot be blank,cannot be blank,] as user as clicked the save button I need to clear the text of the label. But need to show the required fields validator message
any idea how to solve it
thank you
make a javascript function like:
<Script type="text/javascript">
function clearText(cntId) {
var cnt = document.getElementById(cntId);
cnt.value ="";
return false;
}
</script>
then on your submit button attach a client side event
<asp:Button id='btnSubmit' Text='Submit' onClientClick='clearText("<%this.lblLable.ClientId%>");' .... />
On the client-side use a script like this
<script type="text/javascript">
function clearLabelValue(){
var labelObj = document.getElementById("<%= myLabel.ClientID %>");
labelObj.value = "";
}
</script>
<asp:Label id="myLabel" runat="server" Text="Some text"/>
<asp:Button id="myButton" runat="server" Text="Submit" OnClientClick="clearLabelValue();return false;"/>
Didn't test it in detail, but should work.
It is not really clear what you want to achieve, although I have the feeling there may be a "better" (more standard compliant) way of achieving what you want. Maybe you could describe more clearly what you want, so we may be able to help you.
In these situations when a particular button has validation attached to it and also we need to fire some javascript what is done is to define a javascript function which is called on click of save button.
What this javascript function does:
This function will take your label and will set its value as blank so that the text is cleared.
Now in order to validate the page which happens internally (in case the javascript function is not written on the save button click) we need to explicitly call what asp.net call for client side validation.
There is a function page_ClientValidate which needs to be called from this javascript function so that validation is still done and we also do some other processing like clearing the label in this case.
<!--for cleaning to label ; -->
document.getElementById("MyLabel").innerHTML = "";
<!--and label is like;-->
<asp:Label ID="MyLabel" runat="server" ></asp:Label>
You can simply achieve this using below script:
<script type="text/javascript">
function clearLabelValue(){
document.getElementById("<%= myLabel.ClientID %>").innerText=""
}
</script>
<asp:Label ID="myLabel" runat="server" ></asp:Label>
<asp:Button id="myButton" runat="server" Text="Submit" OnClientClick="clearLabelValue();"/>
I had a bunch of controls that I displayed, hid, enabled and disabled based on actions in the web page. Everything worked until i put them into an accordian. Now I can't get the Javascript to be able to update their state. I have a small example
this is the Javascript
<script type="text/javascript">
var ctrl = document.getElementById('<%= btmRocp.ClientID %>');
function ShowPanel(control)
{
alert('<%= btmRocp.ClientID %>');
ctrl.disabled = true;
}
</script>
This is the Accordian
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="MyAccordion"
runat="Server"
SelectedIndex="0"
>
<Panes>
<cc1:AccordionPane ID="accordianPane0" runat=server>
<Header>Create New Report </Header>
<Content>a
<asp:Button ID="Button1" onmouseup="ShowPanel('') " runat="server" Text="Button" />
<asp:Button ID="btmRocp" runat="server" Text="Button" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="accordianPane1" runat=server>
<Header>Create New Report </Header>
<Content>b</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
I would love to know what i am doing wrong here the Alert prints out the right ID.
If i do something where i pass the "this" Object to the function i can disable that button but I truly need it to disable, or hide like 10 objects
Does anyone have an idea?
Sample Code at http://www.riconllc.com/accordian.zip
What is the default state of the Accordion? collapsed? I have no idea how the Accordion works, but I'm suspecting that it is modifying the HTML DOM such that when the page first loads "btmRocp" is not actually present on the page itself, until it becomes "visible". That is, it might be injecting controls into and out of the page, based on the accordion status.
Your best bet in figuring out this behavior is to insert "debugger;" statements into your page at appropriate points, to inspect the live DOM at those points in time.
<textbox id="debugbox" onblur="this.value = eval(this.value);"></textbox>
Is a good way to monkey with script on your page as well.