Javascript function to hide HTML textbox on PageLoad - c#

So I have a search textbox at the top of my website in the Master Page that I wish to disappear when the user is transferred to my search page. My textbox is written like so:
<div class = "SearchBox">
<form action="javascript:searchSite()">
<input type="text" id="searchIn" />
</form>
</div>
The best way I could think to do this was to have some JavaScript run on the PageLoad event of my search page, like so:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "show", "<script>document.getElementById('searchIn').style.display = 'none'</script>");
}
}
I am fairly certain that the javascript works, because sometimes the textbox will disappear for a second or two. Regardless, it immediately comes back and won't remain hidden. I have a asp:Textbox that I can easily hide using:
Site1 m = Master as Site1;
m.OtherTextBox.Visible = false;
I don't understand why hiding the HTML textbox is so difficult. Any suggestions or thoughts on how to remedy this would be much appreciated!

Page_Load is a server-side event, but you have to also wait for the element to be loaded on the client side. You can wrap you js code in a window.onload handler:
this.ClientScript.RegisterStartupScript(this.GetType(), "show", "<script>window.onload = function() { document.getElementById('searchIn').style.display = 'none'; }</script>");
Also, use display: none as explained by SLaks.

display: hidden is not a valid CSS value.
You want display: none.

Related

Page_Load firing when following link to another page asp.net

I'm fairly new to ASP.NET, I've been reading a few questions related to this but I'm still unable to figure out what's wrong with my code, I have a default.aspx page with a menu on top created using a list (ul and li items) and putting the <a href=""> tag to create the links to other pages but after following a link to another page, the Page_Load event fires before leaving the page, I understand this would be the expected behavior with Response.Redirect, but I don't know how to avoid this using tags (if possible), this is the markup I'm using for the Default.aspx page:
<ul id="lista">
<li><strong>Inicio</strong></li>
<li><strong>Item</strong></li>
<li><strong>IK</strong></li>
<li><strong>Acerca de</strong></li>
</ul>
And this is the code behind I have for Page_Load:
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
ExcelUtility excel = new ExcelUtility();
dtDefault = excel.LeerExcel();
gridResults.DataSource = dtDefault;
gridResults.DataBind();
gridResults.VirtualItemCount = dtDefault.Rows.Count;
}
}
Basically, what I want to do is to follow the link to some other page without loading the default page before leaving, hope I make myself clear!
Edit: The root cause of this was having the default <form runat="server"> tag at the beginning of the body section, this was causing the Page_Load event firing again in the same page once the links were being clicked, placing the hyperlinks outside of the form tag did the trick.
Your HTML code should be inside some HTML tag or custom ASP control which contains the attribute runat="server". This is supposed to fire a PostBack request to the server.

ASP.NET/C# trying to use page_load method on a form with #A on end of web address through link

I am needing to use the same form for displaying multiple things and I realize that when I add links like:
A
it has the same form and web address, but with a #A at the end of the address.I thought I could use this for displaying multiple things on the same form. My idea is to have C# code in the page_load method to detect what the web address is and use a conatins method for the url string and detect if there is #A to change the content of the form. Here is an example:
C# code:
protected void Page_Load(object sender, EventArgs e)
{
string url = HttpContext.Current.Request.Url.AbsoluteUri;
if(url.Contains("#A"))
{
div1.Visible = false; //content 1
div2.visible = true; //content 2
}
}
asp.net code:
A
<div ID="div1" runat="server">
content 1
</div>
<div ID="div2" runat="server">
content 2
</div>
I have tried to put the Page_Load method in a script tag, but still didn't work. I guess since the url is different the cs code is not valid? I know it goes through the page_load method once, before I click on the link. Also I do use a method that gives me the controls of div1 and div2, so that is not the problem. I thank everyone in advance for your help! Also if my way is not the way to do the job then please tell me any way possible to achieve what I am trying to do.
edit: I can't use a button to replace a link... maybe a asp:hyperlink?
That's an HTML hyperlink you're using and it won't cause a postback thus page_load will never get called when you click it.
I would suggest if you want to show an hide divs that you use client side JavaScript. Alternatively you could (for example) use an asp.net button control which will cause a postback.
I would suggest scrapping the anchor with an href approach in favor of this:
Use the ASP.NET server controls, along with their click event handlers to manage the visibility of controls on your page.
In your Page_Load, make it so the page has an initial state of showing controls, like this:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
div1.Visible = false; //content 1
div2.visible = true; //content 2
}
}
Now instead of an anchor tag, you can use an ASP.NET Button or LinkButton to cause a postback to the server, like this:
<asp:Button id="Button1"
Text="Click here to change page to B"
OnClick="Button1_Click"
runat="server"/>
Now you have the event handler code which would change the visibility of controls, like this:
protected void Button1_Click(Object sender, EventArgs e)
{
div1.Visible = true; //content 1
div2.visible = false; //content 2
}

the usercontrol inside updatepanel problem

i have a usercontrol inside an updatepanel. when i click some button this usercontrol will be
loaded. and the usercontrol itself has anither button in it. the problem is that the
usercontrol code behind is never executed and when the button is clicked the usercontrol
disappears.
i know this is a common problem. but i have not found a good detailed solution.
i appreciate it.
In your user control, just use a standard HTML button like this:
<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>
this will invoke the javascript method "clickTheButton" which can look like this:
<script type="text/javascript">
function clickTheButton() {
var Sender = window.event.srcElement;
//here you can go gather any other values that you need to support the post back
var PostBackData = textboxCity.value + "|" + selectState.value
if(confirm("are you sure?"))
{
__doPostBack(Sender.ID, PostBackData)
}
}
</script>
So now you are going to invoke a postback from Javascript, identifying the Sender Control and command arguments. These values are passed with the post back as __EventTarget and __EventArgument and are available from the httpRequest in the page load like:
protected void Page_Load(object sender, EventArgs e)
{
string controlName = Request.Params.Get("__EVENTTARGET");
string[] commandArguments = Request.Params.Get("__EVENTARGUMENT").split('|')
}
Once you are in page load with whatever values you accumulated into commandArguments you should be capable of invoking whatever additional methods you desire.
This should get you pointed in the right direction.
Cheers,
CEC
Loading user-control dynamically in update-panel is tricky .
The Best solution is to save it in ViewState , Here is a tutorial and sample application .

load content inside iframe using ajax

I have iframe that works at the server side :
<iframe frameborder="0" runat="server" style="width: 100%; height: 700px; background-color: #bacad3;" id="I1" name="I1" src="Page.aspx"></iframe>
and I change the content dynamically with this code :
protected void Button1_Click(object sender, EventArgs e)
{
I1.Attributes["src"] = "Page.aspx";
}
I want to implement it with ajax in the following way:
when user click out side of iframe dont postback page and change the src of iframe
I want to show the progress inside the progressupdatepanel
I mention it I dont want to run any postback just loading page inside the iframe with ajax by calling outside of iframe for example there is a button in the page and it is handled by update panel and it loads the content of other page inside the iframe.
Could anybody help me ?
With onClientClick and mmke sure you return false to cancel the postback.
window.frames["frameName"].src = "http://example.com";
//or
document.getElementById("iframeId").src = "http://example.com";
If you are using runat=server you may need to use the client id
document.getElementById("<%= iframeId.ClientID %>").src = "http://example.com";
I found out it is not possible using this method you can not remove postback it needs proxing method like google mail (gmail) when you click inbox it apears in the right without postback but we can not implement with this method.

Button disable function after clicking on it

i have save button in around 150 pages. when ever the user clicks on save button i should disable the button after the click. so that user does not keep clicking on save button again.
protected void Button1_Click(object sender, EventArgs e)
{
// right now once the user clicks the save button
Button1.Enabled = "false"
}
right now i am doing like this. is there any better solution u can provide me to improve codeing here would be great.
thank you
I think the best option to accomplish this is using javascript. If you are using jQuery (which I can even start to recommend enough) then you can put the javascript in your masterpage. You just need to find a way to create a selector for your save buttons. Like this:
$(document).ready(function(){
$('.saveButton').bind("click", function(e) {
$(this).attr("disabled", "true");
return true; //causes the client side script to run.
});
});
In this example, I assumed that all the save buttons would have the css class ".saveButton", but you can find your own way to select the button.
Cheers!
You can also try disabling it via Javascript.
You need to use JavaScript to alter the link once it's clicked to prevent future click handling, before allowing the page to proceed with the postback. A naive attempt would be,
<asp:LinkButton runat="server" id="button" OnClientClick="this.href='#'">
Click - doesn't quite work
</asp>
This successfully prevents successive clicks from triggering the postback, but it also prevents the first click from triggering the postback. A little more logic is required to make this work correctly. In the codebehind, I grab the actual postback JavaScript snippet and work it into some logic.
protected void Page_PreRender(object sender, EventArgs e)
{
button1.OnClientClick = string.Format(
"if(this.getAttribute('disabled')) return false; {0}; this.setAttribute('disabled','disabled'); return false;",
Page.ClientScript.GetPostBackEventReference(button1, null));
}
In the HTML template:
<asp:LinkButton runat="server" id="button" >
Click - does not allow multiple postbacks
</asp>
You can spruce this up with some CSS, and at that point I would advise including jQuery, so your code is more concise (due to its command chaining).
What you have to do is use some JavaScript and disable it when its clicked on the client side.
That click event fires on a postback.
Simplest way of attaching javascript to disable the button after user click would be this (in page onLoad event):
myButton.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSave, null) + ";");
But if button is repeated on many pages, you can maybe create nested master page and put save button there, or inherit you page from class that implements this disable functionality. Also, you can "scan" for control you want to disable after click!

Categories

Resources