betul Posted December 3, 2010 Share Posted December 3, 2010 Hi,I have a dynamic datalist and a JS function as below. When the link in the datalist is clicked, it calls the JS function and shows the row underneath it. If I click on a second link I want the first row disappear but I can't do it because the row id is dynamic. Could you please help me? Any help will be appreciated.Datalist; <asp:DataList ID="dlQuestions" runat="server" Width="607"> <ItemTemplate> <table width="607" cellspacing="0" cellpadding="0"> <tr runat="server"> <td width="15"> </td> <td valign="top" class="sssTD"> <a href="#" class="BlackButton" onclick="java script:showMe('<%# DataBinder.Eval(Container.DataItem, "id")%>')"> <%# DataBinder.Eval(Container.DataItem, "question") %></a> </td> </tr> <tr id="<%# DataBinder.Eval(Container.DataItem, "id")%>" class="tdAnswer" style="display:none;"> <td> </td> <td bgcolor="White" class="sssAnswer"> <br /> <%# DataBinder.Eval(Container.DataItem, "answer") %><br /> <br /> </td> </tr> <tr> <td></td> <td><img src="images/line2.gif" /></td></tr> </table> </ItemTemplate> </asp:DataList> JavaScript Function; <script type="text/javascript">function showMe(layer){var myLayer = document.getElementById(layer);if(myLayer.style.display=="none"){myLayer.style.display="block";} else { myLayer.style.display="none";}}</script> Link to comment Share on other sites More sharing options...
thescientist Posted December 3, 2010 Share Posted December 3, 2010 Why not just save the ID of the row you are selecting to a "currently_showing" variable. Then just hide that on the next click, show the new ID, then save the new ID to the currently showing variable for the next click. Link to comment Share on other sites More sharing options...
betul Posted December 4, 2010 Author Share Posted December 4, 2010 Thank you, but how will I save the dynamic ID to a variable? Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 aybe it was a mistake to refer to it as in ID. This case we would want to save the element to a variable, which you are already doing. You are passing some sort of unique element each time you call the function in order to get the row you want to show. Just save that to some sort of (might have to be global) variable and then use that each time the function is clicked (by making sure it's set first) and hiding it. a simple example might look like this: //eleToHide might need to be a global variable. try it both waysfunction showHide(ele){ var eleToHide, eleToShow; //hide the last item showed, if it exists //so the function doesn't break the very first time its run if(eleToHide){ eleToHide.style.display = "none" }; //show the new item selected eleToShow = document.getElementById(ele); eleToShow.style.display = "block"; //save the new item to be the last item //for the next time the function is run eleToHide = eleToShow;}; Link to comment Share on other sites More sharing options...
betul Posted December 5, 2010 Author Share Posted December 5, 2010 ok, I tried saving the element with onload and oninit functions, but nothing happened. First I tried this;in aspx;<a href="#" class="BlackButton" onload="java script:firstHide('<%# DataBinder.Eval(Container.DataItem, "id")%>')" oninit="java script:firstHide('<%# DataBinder.Eval(Container.DataItem, "id")%>')" onclick="java script:showMe('<%# DataBinder.Eval(Container.DataItem, "id")%>')">in javascript;function firstHide(item){ var i=document.getElementById(item); i.style.display="none";}that didn't work. assuming onload() works only in <body> tag, <body onload="java script:firstHide('<%# DataBinder.Eval(Container.DataItem, "id")%>')"> will not work either, because DataItem works only between the <ItemTemplate></ItemTemplate> tags. And if I create a global variable, without any function, var item=window.document.getElementById() , I dunno what to type as a parameter to refer to the datalist's row. Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2010 Share Posted December 5, 2010 um, the script I gave you was just supposed to replace the script you have. Did you read my explanation of it? It was supposed to build off what you're already doing. all you have to do in order to have a global variable is define it outside the function but within the script tags. Link to comment Share on other sites More sharing options...
betul Posted December 6, 2010 Author Share Posted December 6, 2010 thank you very much for the script. these were my attempts to create the variable, althought it looks reverse because placing var eleToHide=window.document.getElementById('<%# DataBinder.Eval(Container.DataItem, "id")%>') at the top of your script does not work, that's why I tried it with onload() and oninit() functions and I was going to return the function "firstHide" to the variable. anyway, I also tried it this way; <script type="text/javascript"> function showHide(ele){ var eleToHide, eleToShow; if(eleToHide){ eleToHide.style.display = "none" }; eleToShow = document.getElementById(ele); eleToShow.style.display = "block"; eleToHide = eleToShow;};</script><asp:DataList ID="dlQuestions" runat="server" Width="607"> <ItemTemplate> <script type="text/javascript"> var eleToHide=window.document.getElementById('<%# DataBinder.Eval(Container.DataItem, "id")%>'); </script> <table width="607" cellspacing="0" cellpadding="0"> <tr runat="server"> <td width="15"> </td> <td valign="top" class="sssTD"> <a href="#" class="BlackButton" onclick="java script:showHide('<%# DataBinder.Eval(Container.DataItem, "id")%>')"> <%# DataBinder.Eval(Container.DataItem, "question") %></a> </td> </tr> <tr id="<%# DataBinder.Eval(Container.DataItem, "id")%>" class="tdAnswer" > <td> </td> <td bgcolor="White" class="sssAnswer"> <br /> <%# DataBinder.Eval(Container.DataItem, "answer") %><br /> <br /> </td> </tr> </table> </ItemTemplate> </asp:DataList> And still no luck. How can I make JS see my DataItem globally? Link to comment Share on other sites More sharing options...
thescientist Posted December 6, 2010 Share Posted December 6, 2010 hmm, yeah I could see that now. I guess just try checking for eleToHide.display.style instead and make eleToHide global. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.