Solved

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

Posted on 2008-10-16
29
1,522 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:krushy2008
  • 12
  • 12
  • 3
  • +1
29 Comments
 
LVL 5

Expert Comment

by:mverschoof
ID: 22729225
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

0
 

Author Comment

by:krushy2008
ID: 22729286
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.
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22729363
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
0
 

Author Comment

by:krushy2008
ID: 22729492
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

0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22729781
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

0
 

Expert Comment

by:jamescorry
ID: 22730220
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??
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22730259
what updatepanel? can you send me the page so i can get a closer look?
0
 

Expert Comment

by:jamescorry
ID: 22730350
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

0
 

Expert Comment

by:jamescorry
ID: 22730362
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.
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22730401
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
0
 

Expert Comment

by:jamescorry
ID: 22730442
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?
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22730601
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
0
 

Expert Comment

by:jamescorry
ID: 22730770
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.
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22730807
then getElementById must be blocked somehow that you are not able to get the wanted element. I will think on this
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Expert Comment

by:jamescorry
ID: 22730843
Thanks for your continued help , it's got me stumped though
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 22734959
Is your javascript in the updatepanel as well ?
If so, put it outside the updatepanel.
0
 

Expert Comment

by:jamescorry
ID: 22738422
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
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22738448
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

0
 

Expert Comment

by:jamescorry
ID: 22738470
Nope it didn't work. Have you tried your example with the divs in an updatepanel? Does it work then?
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22738481
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
0
 

Expert Comment

by:jamescorry
ID: 22738519
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.
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22738594
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/
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 22738619
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

0
 

Expert Comment

by:jamescorry
ID: 22738684
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?
0
 
LVL 5

Expert Comment

by:mverschoof
ID: 22738698
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
0
 

Expert Comment

by:jamescorry
ID: 22738713
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?
0
 

Expert Comment

by:jamescorry
ID: 22738749
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.
0
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 50 total points
ID: 22738761
No, you CAN access the div, but you're accessing the span.
The span is allready visible, but the div inside is not.

And by the way, in your case you put a div inside a span!
Since span is an inline element, you can't put block level elements (i.e. a div) in that.

See articles below:
http://webdesign.about.com/od/htmltags/p/aaspantag.htm
http://webdesign.about.com/od/htmltags/p/aadivtag.htm
0
 
LVL 5

Accepted Solution

by:
mverschoof earned 75 total points
ID: 22738809
So you were accessing a already visible span instead of the hidden div?

And AlbertVanHalen is right of course. But if the span is provided by the updatpanel that makes it very difficult to do anything inside it. If you placed the span, i would advise to make it a div for valid html.

I'm glad you got it working though. I was running out of options :D
Good luck in your future efforts, Michael
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now