I have developed an ASP.NET application to use in Facebook. It has a simple link button which is used to work as expected in older versions of Firefox.
<asp:LinkButton ID="lbtnLogOut" runat="server">Disconnect</asp:LinkButton>
Protected Sub lbtnLogOut_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lbtnLogOut.Click
Response.Redirect(Request.ApplicationPath & "/login.aspx")
End Sub
After upgrading Firefox to 8, I noticed Link Button is not working i.e the button is not causing Post Back. When I view the source code, the Javascript code for Link Button to cause Post Back is
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
I used Firebug to debug the above code but _doPostBack function is not firing when I clicked on Link Button. It is working in all other browsers (IE 9, Google Chrome, Safari) though.
Note: I am using this ASP.Net web application as App inside Facebook. Facebook basically displays this website inside it using iFrame.
There is a similar question here, but it does not provide any solution to me.
Wondering the issue is caused by Facebook iFrame or Firefox? Any help would be appreciated.
It doesn't look like you're assigning an event handler to the LinkButton.
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click" OnClick="LinkButton1_Click" />
The JavaScript you posted is the __doPostBack function, which is not exclusive to the LinkButton. You are correct in the sense that LinkButtons use __doPostBack to trigger postbacks, but the function won't be called unless you assign an event handler to the LinkButton.
For debugging purposes, I would also set CausesValidation to false, just to make sure that validation doesn't interfere with the click event.
Just use this code in your .master file or other appriopiate file just before the end </body> tag:
<script language="javascript" type="text/javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
theform = document.aspnetForm;
}
else {
theform = document.forms["aspnetForm"];
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
Replace 'aspnetForm' with your own.
Related
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
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).
Use name="mainform" instead of id="mainform"
document.forms['something'] works using name, but not id
"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.
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).
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.
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.
I have the following JScript on a page
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
and later
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click" OnClientClick="ProcessButtonDisable()" />
when running the page and firing off the button i get
Microsoft JScript runtime error: Unable to set value of the property 'disabled': object is null or undefined
and the dynamic page has converted it to:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $find("ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton");
button.disabled = true;
}
</script>
<input type="submit" name="ctl00$ctl00$BodyContentPlaceHolder$MainContentPlaceHolder$ProcessButton" value="Process All" onclick="ProcessButtonDisable();" id="ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton" />
as the control is clearly defined and the client id seems to be returning the correct id i don't know whats wrong
Any help?
ps in case this is not clear from the code the purpose of this is to prevent he user from clicking on the and resending the request before the page has time to reload after the initial click
-1 to all the previous answers for assuming JQuery. $find is a function defined by the Microsoft AJAX Library. It "provides a shortcut to the findComponent method of the Sys.Application class" which gets "a reference to a Component object that has been registered with the application through the addComponent method". Try using $get() instead, which "Provides a shortcut to the getElementById method of the Sys.UI.DomElement class."
This page explores both functions in detail: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions
$find is differ from $.find. The first one is provides a shortcut to the findComponent method of the Sys.Application class which defined by the Microsoft AJAX Library. while the second is API method from jQuery which get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
So, $find has to find Component not html DOM. and ajax Library has to be defined.
For more information:
http://msdn.microsoft.com/en-us/library/vstudio/bb397441(v=vs.100).aspx
http://api.jquery.com/find/
try this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $("#<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
[edit] or
<script type="text/javascript">
function ProcessButtonDisable() {
$("#<%=ProcessButton.ClientID %>").attr("disabled", "disabled");
}
</script>
You have to select what you are "finding" in first. For example, if you select document then use the method "find" you should have the result you want.
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $(document).find(("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
disabled is not a jQuery object property it is a DOM element property.
Try using either:
$('selector').get(0).disabled = true
, or
$('selector').attr('disabled','disabled');
You need to use the dot notation, as find() is a jQuery function, like this:
<script type="text/javascript">
function ProcessButtonDisable() {
var button = $.find("<%=ProcessButton.ClientID %>");
button.disabled = true;
}
</script>
Also, if you are going to take the trouble to look up the DOM element in your jQuery logic, then do not bother wiring up the OnClientClick on the server control; either wire up the click event via jQuery or pass the element itself to the JavaScript function:
Using jQuery to wire up the click event (recommended):
<script type="text/javascript">
$(document).ready(function() {
$("#<%=ProcessButton.ClientID%>").click(function() {
$(this).disabled = true;
});
});
</script>
Using the OnClientClick attribute to wire up the click event and pass the element (not recommended):
<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click"
OnClientClick="ProcessButtonDisable(this)" />
<script type="text/javascript">
function ProcessButtonDisable(elem) {
elem.disabled = true;
}
</script>
I have a popup in my page which I am trying to show on dropdownlist selected index changed event.
Here is register statement
ClientScript.RegisterClientScriptBlock(GetType(),"id", "ShowApplicationPopUp()",true);
Here is my javascript function
function ShowApplicationPopUp() {
$('#NewCustomerMask').show("slow");
$('#NewCustomerApplicationPopUp').show("slow");
}
Both of my divs are initially hidden by using display:none; statement.
The problem is when my dropdownlist is changed the popup is not seen at all.I tried putting an alert statement to check if the function is called , and the alert statement is fired.Any ideas as to what I am doing wrong.
Any suggestions are welcome.
Thanks.
When you use RegisterClientScriptBlock the Javascript code is inserted early in the page, so it will run before the elements are loaded.
Use RegisterStartupScript instead, which places the code at the end of the form.
I too could not get this code to work but thanks to the above I now have working code. Note, I have a linkbutton inside an Ajax Update Panel.
in my code behind aspx.cs page is:
protected void OpenButton_Click(object s, EventArgs e)
{
// open new window
string httpLink = "../newWindow.aspx";
ScriptManager.RegisterStartupScript(this, GetType(), "script", "openWindow('" + httpLink + "');", true);
}
in my apsx page is first the link to jQuery source, then second the JavaScript for the openWindow function:
<script src="../js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
function openWindow(url) {
var w = window.open(url, '', 'width=1000,height=1000,toolbar=0,status=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1');
w.focus();
}
</script>
and the link that makes it all happen:
<asp:LinkButton Text="Open New Window" ID="LnkBtn" OnClick="OpenButton_Click" runat="server" EnableViewState="False" BorderStyle="None"></asp:LinkButton>
Im not a jQuery expert and must attribute some of this to the following blog:
https://blog.yaplex.com/asp-net/open-new-window-from-code-behind-in-asp-net/
I'll try and be concise:
I have a dropdownlist with Autopostback set to true
I have an UpdatePanel that contains a Label.
When the downdownlist selection is changed, I want to update the label.
Problem: Focus is lost on the dropdownlist, forcing the user to click on the dropdownlist to reset focus back to the control.
My "solution": In the DropDownList_SelectionChanged event, set focus back to the drop down list:
dropdownlist1.focus()
While this works great in IE, Firefox and Chrome change the scroll position such that the control which was assigned focus is positioned at the bottom on the visible portion of the browser window. This is often a very disorientating side effect.
How can this be avoided so it works in FF as it does in IE?
Try MaintainScrollPositionOnPostback in one of these 3 ways
Programmatically - Page.MaintainScrollPositionOnPostBack = true;
Page declaration - <%# Page MaintainScrollPositionOnPostback="true" %>
In the web.config - <pages maintainScrollPositionOnPostBack="true" />
You may also need to add this javascript after the scriptmanager declaration:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(beginRequest);
function beginRequest()
{
prm._scrollPosition = null;
}
</script>
Velika - Sorry for the delay.
If you are using a master page add :
<asp:ScriptManagerProxy runat="server" ID="smp"></asp:ScriptManagerProxy>
Otherwise just add
<asp:ScriptManager runat="server" id="sm" />
Had the exact same issue and got the answer. Hope this helps :
http://forums.asp.net/p/1622050/4164858.aspx#4164858
<script type="text/javascript">
var xPos, yPos;
var postBackElement;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
prm.add_initializeRequest(InitializeRequest);
function EndRequestHandler(sender, args) {
if (postBackElement != null) {
document.getElementById(postBackElement.id).focus();
}
}
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
}
try this one
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(beginRequest);
function beginRequest() {
prm._scrollPosition = window.top;
}
</script>
public static void SetFocusByJavaScript(Page page, string clientID)
{
string uniqueScriptId = String.Concat("focusScript", clientID);
string scriptBody = String.Format("setTimeout(\"$get('{0}').focus();\", 100);", clientID);
ScriptManager.RegisterStartupScript(page, page.GetType(), uniqueScriptId, scriptBody, true);
}
This is how I have been getting around this issue. The example requires jquery, but you could rewrite if needed. Basically just delays the focus script.
I'm having a strange problem.
I have to use GetPostBackEventRefence to force a Postback, but it works the first time, after the first postback, the .NET function is not rendered... any ideas?
This is what I'm missing after the postback:
<script language="javascript" type="text/javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
theform = document.Main;
}
else {
theform = document.forms["Main"];
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
Well, following that idea I created a dummy function with the postbackreference, and it works... it still is weird though, because of it rendering correctly the first time
this.Page.RegisterClientScriptBlock("DUMMY", "<script language='javascript'>function dummy() { " + this.Page.GetPostBackEventReference(this) + "; } </script>");
The first thing I would look at is whether you have any asp controls (such as linkbutton, comboboxes,that don't normally generate a submit but requre a postback) being displayed on the page.
The __doPostback function will only be put into the page if ASP thinks that one of your controls requires it.
If you aren't using one of those you can use:
Page.ClientScript.GetPostBackClientHyperlink(controlName, "")
to add the function to your page