Show/Hide Placeholder in JavaScript  
Author Message
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Hi,

I have a Placeholder with a calender control in it. When you click on a button im calling som javascript: (In the button property OnClientClick is advancedSearch_Click())

function advancedSearch_Click(){
var theElement = document.getElementById("myPlaceholder");
alert("HI");
if (theElement.visible == false)
{
theElement.visible = true;
}
else
{
theElement.visible = true;
}
alert("The End");
}

The alert HI is shown, but The end is not show, that is because something is wrong but what Can't I say visible on a placeholder

Thanks for the help

Best Regards

Kim




.NET Development34  
 
 
slackjaw





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Kim,

I'm not positive if you can set the visibility of a place holder but I think your script should look like this: theElement.style.visibility = 'visible';. I might be incorrect but I think Microsofts client side implementations of their server objects behave just as other javascript objects do.

HTH



 
 
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

1 var theElement = document.getElementById("myPlaceholder");

2 theElement.style.Visibility = 'visible';

3 alert("HI");

If Line 2 is there nothing happens, is line 2 is not there it says HI.

So it does not work using the theElement.style.visibility = 'visible';



 
 
slackjaw





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Kim,

According to MSDN the place holder control is designed so that you can dynamically add child controls to it at runtime. When you add child controls to it the place holder control no longer exists on the page so you shouldn't be able to get a reference to it and attempting to operate on it should cause an error.

What exactly are you tring to accomplish



 
 
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

What i'm trying to accomplish is that :

I have at control that i was adding to the placeholder dynamicly, from code behind. But now I want to make it possible for the user to click on a button that shows or hide the Placeholder or the control on the Placeholder. BUT it have to be done without post back because it takes to long time. Therefore I whant to create som Java script that takes the Place holder and makes it visible or not.

See what I meen

Thanks

Kim



 
 
slackjaw





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Kim,

Have you tried to show/hide the child control you're adding directly from your JS I think if you view source after your page is displayed you'll find that the control you added from server side exists in the html and that you can directly reference it.



 
 
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Hi Trevor,

That sounds like a great idea, could you show me how you would do that I tried to get a reference to it from JS but something is wrong. And i'm not sure how to get it right. Could you please give me an example.

Thanks

Kim



 
 
slackjaw





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Kim,

Here's an example of dynamically adding a control and then hiding that control when it's clicked:

Code Behind:

private void Page_Load(object sender, System.EventArgs e)

{

HtmlInputButton btn = new HtmlInputButton();

btn.Value = "click me";

btn.ID="bntNew";

btn.Attributes.Add("onclick","onClick();");

placeHolder.Controls.Add(btn);

}

 
 
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Hi Trevor,

Okay, we are getting closer.........

This control that I add to the place holder is an ASCX (UserControl), so what I do after reading you code is this:

Loading the Usercontrol giving it an ID name, and calling it from JavaScript. The 'Hi1' is coming up so the function is called, but the it stoppes.........

protected void Page_Load( object sender, EventArgs e )
{

Control MyControl = LoadControl("CalendarPicker.ascx");

MyControl.ID = "CalendarPicker";

myPlaceHolder.Controls.Add(MyControl);

}

 
 
slackjaw





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Kim,

A user control is made up of a group of html elements (usually a containing div and other elements that make up the control inside that div), so you won't necessarily be able to reference it by the id that you assign server side.

You should be able to view source after your page is rendered so you can see what asp.net as decided to name the individual controls and then either show/hide the containing control or individually show/hide the controls it contains.



 
 
Geetha Paul





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Hi Kim,

I am completely new to these things,but I have a suggestion regarding ur matter...

document.getElementById('CalendarPicker').setAttribute('vivibility', 'hidden');

I hope this will workout. Sorry if this doesn't work.

All the best

Regards

Geetha Paul


 
 
Kim Madsen





PostPosted: JScript for the .NET Framework, Show/Hide Placeholder in JavaScript Top

Hi Geetha Paul,

Thanks for your help, I found the solution juhuuuu :o)

function ShowHide(_ControlId)
{
var div = document.getElementById(_ControlId);
if ( div.style.display == 'none' )
{
div.style.display =
'block'
}
else
{
div.style.display =
'none'
}
window.
event.returnValue = false;
}