In my aspx page, I have two radio buttons and a table.. if one of the radio buttons is checked it should make the table visible if the other one is checked invisible.. but this line is giving me a "JS Object Required". I am firing this from code behind .cs.. it fires fine but then i get that error.
document.getElementById('tblnewpackinglogo').style.display = '';
See code below
JAVASCRIPT
<script language="javascript" type="text/javascript">
function ShowImage() {
var rdoImg = document.getElementById("<%=radImage.ClientID%>");
if (rdoCurrImage2.checked == true) {
document.getElementById('tblnewpackinglogo').style.display = 'none';
}
else {
document.getElementById('tblnewpackinglogo').style.display = '';
}
}
</script>
TABLES
<table id="tblImage" border="0" cellpadding="0" cellspacing="10" runat="server"
visible="true">
<tr>
<td>
<asp:Image ID="imgLogo" runat="server" />
</td>
<td>
<div class="FieldStyle">
Select an Option</div>
<asp:RadioButton ID="radImage"
Text="Keep Current Image"
runat="server"
GroupName="LogoImage"
OnCheckedChanged="radImage_CheckedChanged"
Checked="True" />
<asp:RadioButton ID="radNewImage"
Text="Upload New Image" runat="server"
GroupName="LogoImage"
OnCheckedChanged="radNewImage_CheckedChanged" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<table id="tblnewpackinglogo" border="0" cellpadding="0" cellspacing="0" width="100%"
runat="server" style="display:none;">
<tr>
<td style="height: 41px">
<div class="Style">
Select a Logo Image</div>
<div class="ValueStyle">
<asp:FileUpload ID="UploadImage"
runat="server"
Width="300px" />
</div>
</td>
</tr>
</table>
It's probably that you need to get the name-mangled ClientID of the table:
document.getElementById('<%= tblnewpackinglogo.ClientID %>').style.display = '';
You're already doing it with the radio button above.
Also, if you're injecting the script from the code-behind file, then you'll still need to use the ClientID, as the JavaScript will run on client-side.
That error means that something of the form (null or undefined expression).someproperty is occurring. Naturally there is no someproperty on null/undefined. For the line:
document.getElementById('tblnewpackinglogo').style.display = '';
It is most likely that the problem is getElementById is returning undefined which would be caused if there was no element with the id tblnewpackinglogo at the time it was invoked.
Since there is a tblnewpackinglogo then -- unless FishBasketGordo's answer is correct -- I suspect the issue may be that ShowImage is invoked before the DOM has been loaded. Either that or there is another trivial error that does not align with the above post.
Inspect the actual HTML to see what is generated and use a tool like FireBug to try getElementById manually. Both FireBug and MS Script Debugger also offer more detailed debugging support to inspect the state at the time of the exception.
Happy coding.
Related
I have this error - Control 'txtUserName' of type 'TextBox' must be placed inside a form tag with runat=server. I am unable to get rid of it, my text box is placed inside a form tag with runat=server.
The page which I am getting this on is my 'reset password' page I want the users to be able to enter their username and once they press the reset password button it takes them to a page which allows them to change their password.
Here is the code that I am currently working with.
<head runat="server">
<title></title>
</head>
<body>
<div style="font-family:Arial">
<table style="border: 1px solid black; width:300px">
<tr>
<td colspan="2">
<b>Reset my password</b>
</td>
</tr>
<tr>
<td>
User Name
</td>
<td>
<form action="ChangePassword.aspx" method="get">
<asp:TextBox ID="txtUserName" Width="150px" runat="server"
ontextchanged="txtUserName_TextChanged">
</asp:TextBox>
</form>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnResetPassword" runat="server"
Width="150px" Text="Reset Password" onclick="btnResetPassword_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</body>
</html>
As the error message says, you need to add a runat="server" in the form tag. This is just something ASP.NET demands to work.
The way ASP.NET handles events and postbacks forces this requirement. It tries to keep the page's state inside the actual page (called the 'view state'), and on form submission it sends it back. This was invented to make the stateless web stateful.
Just put in the runat="server" inside the form tag and you will be set.
<form runat="server" action="ChangePassword.aspx" method="get">
Add < form> tag like this...,
it will work..
I am using datatable JQuery plugin found on this site. http://datatables.net/
This is how I generated my table, which include three columns, checkbox column, program name and company name.
<script>
$(document).ready(function () {
var table = $('#tablePrograms').DataTable();
});
</script>
<div id="selectedProgramIds" runat="server"></div>
<asp:Repeater ID="RpPrograms" runat="server">
<HeaderTemplate>
<table id="tablePrograms" class="display">
<thead>
<tr>
<th></th>
<th>Program</th>
<th>Company Name</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:checkbox runat="server" ID="cbxProgram"/>
<asp:HiddenField ID="hdnProgramID" runat="server" Value='<%# Eval("ProgramID")%>' />
</td>
<td><asp:label runat="server" id="ProgramName" Text='<%#Eval("Program")%>'></asp:label></td>
<td><%#Eval("CompanyName")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
My question is, now that this is a 10 pages table with pagination, what is the best way to save the data so that checkboxes selected on 10 different pages can all be saved. Currently, the DOM only shows the elements of the pages that I am on. For example, if I am on page 1, DOM doesn't display the elements on page 2-10. What is the best way to perform saving is this case? Does datatable plugin has some kind of build-in saving feature? Thanks for your help.
Found the answer on their website. http://datatables.net/release-datatables/examples/api/form.html
A handy jQuery serialize() function can be used to string together the data.
What's the best way to send a username and password via ajax to the code behind page in .net.
I have an index.aspx page like so:
<asp:TemplatedWizardStep>
<CustomNavigationTemplate>
<div style="margin-bottom:7px;text-align:left;">To create an account, simply send us your e-mail address. A password will be sent to this address upon submission.</div>
<table border="0" cellpadding="3" cellspacing="0" style="width:99%;">
<tr>
<td style="text-align:left; vertical-align:middle;width:90px;">E-Mail:</td>
<td style="text-align:left; vertical-align:middle;">
<asp:TextBox ID="UserName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align:left; vertical-align:middle;width:90px;padding-top:5px;">Screen name:</td>
<td style="text-align:left; vertical-align:middle;padding-top:5px;">
<asp:TextBox ID="ScreenName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align:left; vertical-align:middle;"> </td>
<td style="text-align:right; vertical-align:middle;padding-top:5px;">
<asp:imagebutton ID="CreateUser" CommandName="CreateUser" Enabled="true" runat="server" AlternateText="OK" ImageUrl="powerstats/inc/img/ok_up.png"></asp:imagebutton>
<img src="powerstats/inc/img/cancel_up.png" style="cursor:pointer;" onmouseover="SwapImageIndex(this,'cancel_ov.png')" onmouseout="SwapImageIndex(this,'cancel_up.png')" />
</td>
</tr>
</table>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
I want the imagebutton to be clicked and send an ajax call with the username and screenname (and eventually password), to the back end page. If I do onClick=X the page refreshes. I want the page NOT to refresh and send an alert back if something is wrong.
You would need to use an UpdatePanel with a ScriptManager. If a submit happen inside the UpdatePanel, it's gonna return only what's inside the UpdatePanel itself through AJAX.
If you want to handle possible Error, you can use the AsyncPostBackError Event of the ScriptManager. See MSDN page for a complete exemple of error handling.
Code would look like (+ your error handling logic):
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TemplatedWizardStep>
<CustomNavigationTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
/* Your login controls here ...
Make sure to include all the fields
to be refreshed + the submit button */
</ContentTemplate>
</asp:UpdatePanel>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
I am developing one ASP.NET Web Page in that I Want to show data, as it is in the attached link. So Please go through it.
So I want the similar functionality in my We Page also.
As We can see here I have separate section for Store Details, POS Details, Registered Banks Details and so on. And If I click on +/- symbol, I should be able to maximize and minimize that particular section.
Actually I am very new to Asp.net, I have learned things by myself only so far, Nobody here to guide me.
So I have no idea how to do this?
What to do and what items I need to select from toolbox in Visual Studio.
I have idea about PAnel Control , but with panel control I am not able to get maximize and minimize functionality here.
Please help me out .
Thanks
!(http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png)
For this you can use AJAX Toolkit controls (ToolkitScriptManager and CollapsiblePanelExtender). And for that do following steps:
(1)Learn and Download AJAX Toolkit from http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/ or http://www.asp.net/ajaxlibrary/act.ashx or
http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
(2)Add toolkit into your project and create one example with any one control of the toolkit
(3)Try below example as you want
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlCPTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
POS DETAILS
</td>
<td align="right" valign="top">
<asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
<asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
TID :
</td>
<td>
abc...
</td>
<td>
Name :
</td>
<td>
xyz ...
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
TextLabelID="lblTop">
</cc1:CollapsiblePanelExtender>
In web config
<system.web>
<pages>
<controls>
<add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
I hope this may helps you. I suggest to first learn AJAX Toolkit and then add to tool box and then try above code.
Another way is using javascript like below:
javascript
<script type="text/javascript">
function funHide() {
document.getElementById('imgShow').style.display = 'block';
document.getElementById('trPOSDETAILS').style.display = 'none';
document.getElementById('imgHide').style.display = 'none';
}
function funShow() {
document.getElementById('imgShow').style.display = 'none';
document.getElementById('trPOSDETAILS').style.display = 'block';
document.getElementById('imgHide').style.display = 'block';
}
</script>
aspx or html
<table width="500px">
<tr>
<td colspan='3'>
POS DETAILS
</td>
<td align="right">
<img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
<img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
</td>
</tr>
<tr id="trPOSDETAILS">
<td>TID :</td>
<td>abc...</td>
<td>Name :</td>
<td>xyz ...</td>
</tr>
</table>
Please mark this answer useful if this solve your problem.
I've a simple page in one of our web applications, which has the following markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NewUpload.aspx.cs" Inherits="Mass_Upload.NewUpload" MasterPageFile="~/Master" Title="Document Mass Upload" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="Stylesheet" type="text/css" href="./../CSS/ScrollingTable.css" />
<script type="text/javascript" src="../Help/HelpPopup.js" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CenterH1" runat="server">
Document Mass Upload <img style="Border:None;" src="../Help/help_icon.gif" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CenterBody" runat="server">
<h3>Add New Upload</h3>
<table class="list">
<tr>
<td class="label" style="text-align:right;">Local File:</td>
<td class="normal">
<asp:FileUpload ID="fuFilename" runat="server" Width="405" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Text="*"
ErrorMessage="A file to upload is required"
Display="Dynamic"
ControlToValidate="fuFilename"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="text-align:right;">Document Description:</td>
<td class="normal">
<asp:TextBox ID="txtDescription" runat="server" Width="405" MaxLength="50" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" Text="*"
ErrorMessage="Document Description is a required field"
Display="Dynamic"
ControlToValidate="txtDescription"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="text-align:right;">Document Type:</td>
<td class="normal">
<asp:DropDownList ID="ddDocType" runat="server" Width="405"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Text="*"
ErrorMessage="Document Type is a required field"
Display="Dynamic"
ControlToValidate="ddDocType"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="vertical-align:top;text-align:right;">Customer Types:</td>
<td class="normal">
<asp:Label ID="lblSingleCustomer" Text="Specific Code:" runat="server" /><asp:TextBox ID="txtSingleCustomer" runat="server" Width="100px" /><br />
<asp:CheckBoxList ID="cblCustomerTypes" runat="server" Width="405px" RepeatDirection="Horizontal" RepeatColumns="5" RepeatLayout="Table" CellPadding="10" CellSpacing="0" />
</td>
</tr>
<tr>
<td class="normal" colspan="2"> </td>
</tr>
<tr>
<td class="normal" colspan="2"><asp:Label ID="lblError" runat="server" Text="" ForeColor="Red"/></td>
</tr>
<tr>
<td class="normal" colspan="2">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="BtnCancel_Click" CssClass="medium" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="BtnUpload_Click" CssClass="medium" />
</td>
</tr>
</table>
</asp:Content>
It USED to work fine, but now, and without apparent change to code/design, both the "Upload" and "Cancel" buttons no longer work.
Putting a breakpoint in the codebehind's Page_Load() method shows that it is only called when the page is initially loaded, and not when the button is pressed.
Similarly, putting a breakpoint in the "BtnUpload_Click" event shows it is never called.
This is now not working both on my own development machine AND on the client's server (both when browsing to the servers page from my machine AND from the server itself).
It's important to stress that, between this working and it now not working, I am 90% sure nothing has changed in regards to the code.
Any help would be greatly appreciated, as the customer is rightly anxious - and i'm clueless as to what's causing it!
EDIT #1
Here's the codebehind for one of the buttons:
protected void BtnUpload_Click(object sender, EventArgs e)
{
if (DataAccess.CheckIfMassUploadAlreadyExists(fuFilename.FileName))
{
lblError.Text = "A file with the specified name already exists within the system.";
return;
}
else
{
try
{
UploadFile();
}
catch(Exception ex)
{
lblError.Text = ex.Message;// +"\nUsername:" + System.Web.HttpContext.Current.User.Identity.Name;
return;
}
}
}
.
Here's the reason.. and it's a really annoying reason too!
THIS:
<script type="text/javascript" src="../Help/HelpPopup.js" />
Should be THIS:
<script type="text/javascript" src="../Help/HelpPopup.js"></script>
Whoever decided the script tag needs to be treated differently to every other HTML tag, needs to be locked in a room with Justin Bieber.
First off all you should check your Validators and perhabs, comment them out for a test.
Is it possible that there are JavaScript-Errors showing on your page?
An ASP-Button is calling a JavaScript-Funktion (WebForm_DoPostBackWithOptions), if there is a JavaScript-Error "before" this line, sometimes you can't press a button.
apparently a client side "return false" is preventing the callback, this could be one of two reasons:
1-the validators always return not valid
2-some client script being called on the button returns false;
At the risk of being down voted for posting an answer to the title question which does not appear to be the OP's problem... I will offer this suggestion which fixed my similar problem:
<body background="images/GlobeBg.png" bgproperties="fixed">
</body>
Problem is, 'bgproperties' is NOT a valid attribute name even though some guys on the internet said it was. Other than an unnoticed squiggle underline in VWD 2008 Express, no error was emitted and the page otherwise looked normal. Simply, the update button and other input controls didn't work.
The cause for this for me was that a validator on another view in the same page was being fired, due to it being apart of the same validation group.So this prevented the post back.