Sunday, April 17, 2016

How to perform postback operation in ASP.Net Webforms

Leave a Comment

I want to perform a postback to get data, when the <div id="roomTypeContainer"> is clicked.
So, wrapped it inside a LinkButton. When I click on the div, there is an error in the browser console.

Uncaught TypeError: theForm.submit is not a function

The repeater is in a user control

ascx:

<asp:Repeater ID="rpRoomTypes" runat="server" ItemType="Sitecore.Data.Items.Item"  OnItemDataBound="rpRoomTypes_ItemDataBound" OnItemCommand="rpRoomTypes_ItemCommand">    <ItemTemplate>      <sc:EditFrame ID="efRoomType" runat="server" >       <asp:LinkButton ID="lnkRoomType" runat="server" CommandName="cmd_RoomType">        <div id="roomTypeContainer" runat="server">           ..some html        </div>        </asp:LinkButton>     </sc:EditFrame>   </ItemTemplate>  </asp:Repeater> 

UPDATE: When I click the error link in browser console, this code is shown in console:

<script type="text/javascript"> //<![CDATA[ var theForm = document.forms['mainform']; if (!theForm) {     theForm = document.mainform; } function __doPostBack(eventTarget, eventArgument) {     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {         theForm.__EVENTTARGET.value = eventTarget;         theForm.__EVENTARGUMENT.value = eventArgument;         theForm.submit(); //error here     } } </script> 

The above code seems to be generated by Sitecore. mainform is the id of form in aspx page.

Ran the same script in console and here is the result enter image description here

7 Answers

Answers 1

Use name="mainform" instead of id="mainform" document.forms['something'] works using name, but not id

Answers 2

"Submit is not a function" error in JavaScript

"submit is not a function" means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.

When you name the button submit, you override the submit() function on the form.

Make sure that there is no name="submit" or id="submit" in the form.

Answers 3

Use

var theForm = document.getElementById("mainform"); 

Or use

var theForm = document.forms.namedItem("mainform"); 

Or use if it is the only form in the web page

var theForm = document.forms[0]; 

Or use if it is the only form in the web page

var theForm = document.forms.item(0); 

instead of

var theForm = document.forms['mainform']; 

Answers 4

Can you show browser HTML code generated by your repeater? I suspect that your UserControl sc:EditFrame generates iframe and your LinkButton works in context of a document loaded into this iframe (which doesn't contain form).

Answers 5

the form.onSubmit is an event listener for the submit event, if no handler is set during execution then form.onsubmit() will throw an error.

Answers 6

Your use case is pretty vague. Why do you want to put a div inside a LinkButton and that too within a repeater? Is it even clickable? Have you tested with an alert on click of the div?

Also please post the rpRoomTypes_ItemDataBound and the rpRoomTypes_ItemCommand methods.

Answers 7

Looking at this line in the generated JS:

var theForm = document.forms['mainform']; 

theForm is a global variable set at page load, but I wonder if the form element is not yet created at that time (or comes after the script block - that would cause the issue too). Then, when the function runs in the doPostback, theForm.submit function will not exist since, even though the form is now in existence, the variable referencing it is still null.

In the console, just type theForm and press enter (without assigning it in the console) and see what it is set to. If it's null/undefined, then that's what's happening, in which case more info is needed to diagnose the failure (for example, why is the form not yet created).

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment