PDA

View Full Version : javascript and detailsview



skat
Mar 14th, 2008, 09:44 PM
hi,

i have created some tables in a database and the information in there is being retrieved using the detailsview control in asp.net.

what i what would like to do is add a javascript method i have written so that each line being pulled out of the database will appear in a sequence, for example, after 2 seconds a line will appear, then after 5 secondsanother line will appear etc. its a timedtext method. does anyone know how i can apply it. i have pasted my aspx page and the javascript method i have written. please can some advise me how i can put the two togther as i am struggling. or if anyone knows another way i can achieve this with the details view without javascript, any advise would be very much appreciated

thanks for any help given, i wasnt sure if this is the right place to post it, hope it is

javascript function

function timedText() {

var t1=setTimeout("document.getElementById('displayDiv').innerHTML=''",2000);

var t2=setTimeout("document.getElementById('displayDiv').innerHTML=''",7000);

var t3=setTimeout("document.getElementById('displayDiv').innerHTML=''",12000);
}

aspx page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

<title>Untitled Page</title>

</head>
<body>

<form id="form1" runat="server">
<div id="displayDiv">

</div>
<asp: DetailsView ID="Detailsview" runat="server" AutoGenerateRows="False"

DataKeyNames="pageID" DataSourceID="SqlDataSource1" Height="50px" Width="202px">
<Fields>

<asp:BoundField DataField="point1" HeaderText="line1" SortExpression="point1" />
<asp:BoundField DataField="point2" HeaderText="line2" SortExpression="point2" />

<asp:BoundField DataField="point3" HeaderText="line3" SortExpression="point3" />
<asp:BoundField DataField="point4" HeaderText="line4" SortExpression="point4" />

<asp:BoundField DataField="pageID" HeaderText="Page" ReadOnly="True"

SortExpression="pageID" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />

<asp:BoundField DataField="lineOrder" HeaderText="lineOrder"

SortExpression="lineOrder" />
</Fields>

</asp: DetailsView>
<br />

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<&#37;$ ConnectionStrings:ConnectionString %>"

OldValuesParameterFormatString="original_{0}"


SelectCommand="SELECT [point1], [point2], [point3], [point4], [pageID], [title], [lineOrder] FROM [tutorialtext] ORDER BY [lineOrder]">

<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="tutorialID" SessionField="tutorialID" />

</SelectParameters>
</asp:SqlDataSource>

<p>
<asp:Button ID="nextButton" runat="server" Text="Next" />

</p>
</form>

<div id="displayDiv">

</div>

</body>
</html>

mjlorbet
Mar 14th, 2008, 10:16 PM
var currentTime = 2000;
var delayAmt = 5000;

var Elements = document.getElementById("sourceElements").innerHTML.split("<br />");
function setTimers(){
currentTime = (currentTime == 2000)?currentTime:0;
for(var a = 0; a < Elements.length; a++){
setTimeout("document.getElementById('displayDiv').innerHTML = '" + Elements[a] + "'", currentTime);
currentTime += delayAmt;}
}
setTimers();


this will change the contents of displayDiv to the ath line of sourceElements every 5 seconds, if you want to append each new line then use += on the innerHTML (inside the set timeout), also not that innerHTML isn't a DOM property, if you're looking to recycle the call then add setTimeout("setTimers", currentTime); to the end of the function

skat
Mar 15th, 2008, 08:45 AM
thanks for your reply, i really apprecaite the help, i tried your code but it doesnt seem to work because the lines being pulled out of the database still all appear at once rather then at diferent times, do you have any idea why its not working properly?

thank so much for your help

mjlorbet
Mar 15th, 2008, 08:51 AM
what are the lines being seperated by?, in the example i had it as the html <br /> tag but really that value should be whatever is actually breaking the lines/values. if it just looks like a new line without any formatting try \n

skat
Mar 15th, 2008, 12:50 PM
iv have used the detailsview control in asp.net to split to fields being retrieved from the database. if you look at the code in my first post then you can see the fields in the 'databound section' are seperated by the datafield. do u think it is possible to add this javascript functionality to this as i am struggling to work it out?

thank you

mjlorbet
Mar 15th, 2008, 03:09 PM
yes & i've helped others through a similar question before, but in order to break the items apart, you must determine what seperates them, it know it isn't specified in your code, but it will certainly appear in the generated source. view your page & then view the source, find the section of values loaded from your database & then find what token(s) come(s) between them, just newlines, commas, <br />s whatever's there

skat
Mar 15th, 2008, 04:11 PM
hi,
iv viewed the source and they are sperated in a table. is that what you mean? sorry i am a bit of a novice, i have pasted my source below if thats any help, thanks :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>
Untitled Page
</title>
<script type="text/javascript">
function timedText() {
var currentTime = 2000;
var delayAmt = 5000;

var Elements = document.getElementById("Detailsview").innerHTML.split("DataField");
function setTimers(){
currentTime = (currentTime == 2000)?currentTime:0;
for(var a = 0; a < Elements.length; a++){
setTimeout("document.getElementById('displayDiv').innerHTML = '" + Elements[a] + "'", currentTime);
currentTime += delayAmt;}
}
setTimers();
}
</script>
</head>

<body>

<form name="form1" method="post" action="tut1.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="1bbabKY0HhJMd7/KNR/4UpEdVPBEjgTQc8El15eocGbi09maBoCkZes8y6AvVozWLtbplre+j+AssP6jUVCUr+Ems703HCKIl3SEAse1Zi+GQWlqpSqeX7Y zqefSntCR4UjLAj1uq9aVkPWkqSIUPPZ6bNqc6ptkUSFUclLX9+JiUNVpvBPp0HemZEX5c4CeiMkhP/9sheDYJ+zIQCUEPsS/oR0t4xY+iPoCS7DQ7oKvKoaflHvw7lc4nUMHra2UTxnHGTlVWkgK5Qsx2zC5iE8MbAXw1H4PmyNN6qtlbXtbK0tziNBa/uo4x3lS2kWN4BTeS9vXCORy4mSIcGITkcq73tRcjl4dcQgCFxPfQIlqQwe7+dFy8u7fonb4Sdj68t3OfvhAkNG2oaKagTSX0If2E gpl85prz2BHMmuZmswSqMBZpmck7P+/Z27kAWnnPuGLehVoFmhgYzxdsO/OGw==" />
</div>


<div id="displayDiv">
<div>
<table cellspacing="0" rules="all" border="1" id="Detailsview" style="height:50px;width:202px;border-collapse:collapse;">
<tr>
<td>line1</td><td>point1</td>
</tr><tr>
<td>line2</td><td>point2</td>
</tr><tr>
<td>line3</td><td>point3</td>
</tr><tr>
<td>line4</td><td>point4</td>
</tr><tr>
<td>Page</td><td>1</td>
</tr><tr>
<td>Title</td><td>mw</td>
</tr><tr>
<td>lineOrder</td><td>1</td>
</tr>
</table>
</div>

<br />



<p>

<input type="submit" name="nextButton" value="Next" id="nextButton" />

</p>
</div>

<div>

<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="Wi3wxfyBfMBSXGqKIctXKOtStznjDmXUlclmyipGUes=" />
</div></form>

</body>

</html>

mjlorbet
Mar 16th, 2008, 01:01 AM
var currentTime = 2000;
var delayAmt = 5000;

var contents = document.getElementById("displaydiv").innerHTML;
var Elements = contents.replace("</tr><tr>", "\n").replace("</td><td>", "</b>").replace("<td>", "<b>").replace("</td>", "").split("\n");
function setTimers(){
currentTime = (currentTime == 2000)?currentTime:0;
for(var a = 0; a < Elements.length; a++){
setTimeout("document.getElementById('displayDiv').innerHTML = '" + Elements[a] + "'", currentTime);
currentTime += delayAmt;}
}
setTimers();