In this tutorial we will learn how to perform redirection from IFrame in asp.net. One of my friends has got a requirement; he has a webpage that contains the form containing username and password textboxes, one asp:button to validate and verify the username and password, after performing validation, it redirects the registered user to another page but problem was that the next page was being opened inside the iframe rather than in parent window because the webpage that containing the form was also in iframe. It became quite headache for us to solve the problem but finally we did it. Let's have a look over it how to do so

Redirection from iframe in asp.net

protected void btn_Submit_Click(object sender, EventArgs e)
{
//your code to verify username/password will come here
ScriptManager.RegisterStartupScript(this, this.GetType(), "redirect", "if(top!=self) {top.location.href = 'next-page.aspx';}", true);
}

Note:-
In case if this code is not working properly in IE9 then you have to give the absolute path of targeting webpage such as

if(top!=self) {top.location.href = 'https://www.yourwebsite.com/next-page.aspx';}", true);

Using the server side onClick event of asp:button, we are redirecting user to another page but now page will not be open inside the iframe because the javascript code that we have written in the server side onClick event of asp:button will take care that user must be redirected to next page within parent window rather than IFrame.


So this is the way to perform redirection from iframe in asp.net.

Read more...

In this javascript tutorial you will learn how to set focus to table object using javascript. Couple of days ago I got the requirement in which I have to focus the table that containing the data, after page loads. You can use same approach to set focus to div in javascript. So let's have a look over how I did this. Again it is one line javascript code.

How to set focus to table using javascript

Focus_table.aspx

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('tblFocus').focus();
};
</script>

You have to give the id to the table. When you will run this code snippet then focus will be set to the desired table but this code snippet will not work in firefox.
Now to solve the browser compatability issue you have to put any form field in the table that you want to focus and then using javascript code you have to focus that form field and due to that, focus will be automatically set to that table. So let's have a look over this solution

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("<%=txtFocus.ClientID %>").focus();
};
</script>

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtFocus" runat="server"></asp:TextBox>
</td>
</tr>
</table>

Now this code will run on almost all browsers but there is a drawback with it. The cursor will directly blink in the textbox and due to this you cannot go to previous page with the Backspace button of your keyboard. Also it is very awkward that cursor is blinking in textbox. But if you hide the textbox using css i.e; style="display:none;" and call the javascript function to focus the textbox then javascript function will throw an error.
Now to get rid of this issue, there is a solution and that solution is to use <a> tag. Let's have a look over it.

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('aFocus').focus();
};
</script>

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
<tr>
<td>
<a id="aFocus" href="#"></a>
</td>
</tr>
</table>

And this code snippet will work on all browsers and moreover you can go to previous page by using Backspace key on your keyboard. But I doesn’t recommend this method to set the focus to table/div using javascript. Why should we do extra things????? Let’s have a look over the solution that I strongly recommend, you don’t need to put any form field inside the table/div, and you don’t need to put any extra hyperlink tag near/inside the table/div. Just follow this code snippet.

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('tblFocus').scrollIntoView(true);
};
</script>

So this is the pretty line of javascript code that will solve your problem and set focus to the table. You can use these logic to set focus to div element as well. I hope you will like this article, any thing extra will be discussed in the comments :)

Read more...

In this tutorial you will learn how to disable the asp:Textbox using javascript. I will show you how to do so in just one and simple line of javascript code. Let's have a look over it.

disable the asp:Textbox using javascript

<script type="text/javascript">
function DisableTextBox()
{
document.getElementById("<%=txtName.ClientID %>").disabled="disabled";
}
</script>
<asp:TextBox ID="txtName" runat="server" EnableTheming="false" Text="Saira Khan"></asp:TextBox> <br/><br/>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" Style="cursor: pointer; font-size: 12px;" OnClientClick="DisableTextBox(); return false;" /> 

Using the OnClientClick event of asp:button i am calling the javascript function to disable the asp:textbox . So this is the way to disable the asp:textbox using javascript.

Read more...