asked on

Dynamically created div in updatepanel + hide/show div function won't work...

Hi,

I have an updatepanel which on page_load draws div's and populates them depending on how many results are returned from the database. There is 2 div's per record in the database, one that should always be visible but another I want to drop down from the first (or "show" when initially hidden on load) by perhaps clicking a little arrow (that contains furthur information). The problem is I don't seem to be able to exert any control over the showing or hiding of the divs. I have a js function which is being called on a click of the first div, (which is being reached as I've tried alert('divid') ect and it appears correct, see below). The code below doesn't seem to be able to grab the control id / make the change. Nothing happens anyway but I think I have the syntax right?

Also, since i have multiple divs, is there a way to hold the status of each div (different number of records per user) so that the js function knows weather that particular div is showing or not? (else sometimes 2 click will be required to show/hide a div, depending on the order the user presses the different records).

Any help would be great, I've being stuck on this for ages!

Thanks,
James

function divHideShow(divid){
 
    alert(divid);
	var divid = document.getElementById("divid");
	if(divid.style.display == "block") {
    		divid.style.display = "none";
  	}
	else {
		divid.style.display = "block";
	}

Open in new window

mverschoof

Is the div called "divid"? Is the div display set to "block" when created? If not you can either add that or change your if statement to the following:

if(divid.style.display != "none") {
... your code ...

Open in new window

krushy2008

ASKER

Hi,

No it's not called divid, I'm passing down the name of the div to be changed to the function, i've tried both " " around the variable and var divid = document.getElementById(divid); but it doesn't work either way. The div id is getting passed down tho as it correctly shows in the alert above it. My div's are set to display: none to make them initially hidden. If I set them to block, they do show, but the function still doesn't do anything. I'm baffled.

mverschoof

It doesnt work because the function can't find the element. you should change the "var divid" to an other name to avoid confusion. The quotes in var divid = document.getElementById("divid"); should be removed to.
And the argument given to the function "function divHideShow(divid)" is the same to the id of the element you want?

If you can send me an example so i can test it myself i could be more help

krushy2008

ASKER

Ok I've changed the name and got rid of the quotes (see below) but it still won't work.

function divHideShow(divid){
 
  var divToChange = document.getElementById(divid);
  
  if(divToChange.style.display == "block") {
    divToChange.style.display = "none";
  }
  else {
		divToChange.style.display = "block";
  }
}

Open in new window

mverschoof

I created a file where it does work. just check it out for differences with your site.
I copied the javascript from here so that didn't change.

Hope this helps

<html><head>
<style type="text/css">
.divv	{width: 50px; height: 50px; background-color: #EEEEFF;}
</style>
<script type="text/javascript">
function divHideShow(divid){
 
  var divToChange = document.getElementById(divid);
  
  if(divToChange.style.display == "block") {
    divToChange.style.display = "none";
  }
  else {
                divToChange.style.display = "block";
  }
}
</script></head>
<body>
<div id="1" class="divv" onclick="divHideShow(2);">1</div>
<div id="2" class="divv" style="display:none;">2</div>
<div id="3" class="divv" onclick="divHideShow(4);">3</div>
<div id="4" class="divv" style="display:none;">4</div>
</body>
</html>

Open in new window

jamescorry

Yes your example works on it's own exactly as I wish mine to. However, If i put that code in my updatepanel, it no longer works. (I've stripped out the html , body tags ect) but on clicking 1 and 3 nothing happens. I believe for some reason the getelementbyid isn't working on the div's when they are in an updatepanel??

mverschoof

what updatepanel? can you send me the page so i can get a closer look?

jamescorry

Basically, I am adding these divs on page_load via the code behind because I do not know how many will be needed as they will vary between users.

                Dim newDiv As New HtmlGenericControl ' add a div for each vehicle 
                Dim divString As New StringBuilder
 
                newDiv.ID = "div" + uniqueID
 
                divString.AppendLine("<div class=""Div"" onclick=""divHideShow('" + _
                                     "div2" + uniqueID + "')"">Details here : <br> <br></div>")
 
                newDiv.InnerHtml = divString.ToString()
 
                Dim divString2 As New StringBuilder
 
                divString2.AppendLine("<div class=""Div2"" style=""display: none"">Example info here : "</div>)
 
                Dim newDiv2 As New HtmlGenericControl ' add a sub div
 
                newDiv2.ID = "div2" + uniqueID
                newDiv2.InnerHtml = divString2.ToString()
 
 
                testUpdatePanel.ContentTemplateContainer.Controls.Add(newDiv)  testUpdatePanel.ContentTemplateContainer.Controls.Add(newDiv2)

Open in new window

jamescorry

Sorry for some reason the formatting didn't come out that well, but I'm basically adding a div that when clicked sends the div id of the second div as a param to the function (by this time both sets of div are created as this all happens in the page_load) , which should in turn show/hide the second div. But nothing happens.

mverschoof

does newDiv2.ID = "div2" + uniqueID work? And are the two uniqueID used in the code the same? Maybe you should use alerts right after the two declarations of the uniqueID's to verify this.

If they are different it explains why it doesn't work

jamescorry

Nope, UniqueID is a completely different value for each div retrieved from a database...I've used alerts and what comes through to divHideShow() matches each div. Your code didn't work in an updatepanel at all either, so i'm thinking it could be something to do with that?

mverschoof

I think there is a problem with all the quotes you use class=""Div"" translates in class="" | div | "" (i just use the | as a seperator between the bits). This also occurs in the onclick so that may be the reason that the function isn't called

jamescorry

I have to do that to use double quotes using the stringbuilder though. And the function is getting reached with the correct div id's because I'm using alerts in the function and they are showing up upon click.

mverschoof

then getElementById must be blocked somehow that you are not able to get the wanted element. I will think on this

jamescorry

Thanks for your continued help , it's got me stumped though

Albert Van Halen

Is your javascript in the updatepanel as well ?
If so, put it outside the updatepanel.

jamescorry

No, the script is in the <head> section of the page. It seems that div's in the updatepanel can't be accessed by getelementbyid but I have no idea why. It's really annoying because it should work, just doesn't

mverschoof

This probably won't work but you might wan't to try this just in case.

// this
document.getElementById(divid).style.display = "none";
 
//instead of
var divToChange = document.getElementById(divid);
...
divToChange.style.display = "none";

Open in new window

jamescorry

Nope it didn't work. Have you tried your example with the divs in an updatepanel? Does it work then?

mverschoof

No i haven't. I never worked with an updatepanel so i don't know how it works. Maybe you can try it?

Will probably be faster

jamescorry

Well I've used your example in one and it doesn't work :( Must be something about updatepanels stopping the getelementbyid working properly. I can't find any reference to this on the net though.

mverschoof

here's a possible solution to the problem. It's not identical, but it might work

http://sorin.serbans.net/blog/index.php/2008/05/08/updatepanel-documentgetelementbyid/

Albert Van Halen

Of course elements are accessible via getElementById via partial postback.

The 'divs' you are adding in code behind (via HtmlGenericControl) will be rendered as spans !
They are allready visible, but the innerHTML of each span contains the div which is hidden.

You better create Panels in code behind which are rendered as divs.
See my code below : please note that its C#, but you can figure it out what it is in VB.

Panel newDiv = new Panel();
StringBuilder divString = new StringBuilder();
 
newDiv.ID = "div" + uniqueID;
newDiv.CssClass = "Div";
newDiv.Attributes.Add("onclick", "divHideShow('div2" + uniqueID + "');");
 
divString.AppendLine("Details here : <br> <br>");
newDiv.Controls.Add(new LiteralControl(divString.ToString()));
 
Panel newDiv2 = new Panel();
newDiv2.Style.Add(HtmlTextWriterStyle.Display, "none");
newDiv2.CssClass = "Div2";
newDiv2.ID = "div2" + uniqueID;
 
StringBuilder divString2 = new StringBuilder();
divString2.AppendLine("Example info here :");
newDiv2.Controls.Add(new LiteralControl(divString2.ToString()));
 
updPostBack.ContentTemplateContainer.Controls.Add(newDiv);
updPostBack.ContentTemplateContainer.Controls.Add(newDiv2);

Open in new window

jamescorry

so your saying if I create a div in the innerhtml of the HTMLGeneticControl then it can't be reached? Because it's inside a span?

mverschoof

It shouldn't make a difference if it's in a span or not. You're targeting the div itself so it shouldn't matter what's around it

jamescorry

Yeh that's what I thought. AlbertVanHalen - I am creating div's inside the span of the HtmlGenericControl, so surely they can still be accessed?

jamescorry

fixed it - I've being making a stupid mistake. I've being giving the HtmlGenericControls ID's but they aren't the divs. I didn't actually name the div's with an id when creating them inside the HtmlGenericControls. I can't believe it was so simple, I was just seeing id given the controls id's and didnt realise I hadn't assigned the div id's inside them... thansk for your help guys , got there in the end.

SOLUTION

Albert Van Halen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

mverschoof

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial