Jquery announcement rolling + AJAX background to get data

Source: Internet
Author: User

Aspx Copy codeThe Code is as follows: <script src = "http://www.cnblogs.com/js/jquery/jquery.js" type = "text/javascript"> </script>
<Script src = "http://www.cnblogs.com/js/common/jquery.timers.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var myar1; var myar2;
Function Notice () {// popular timer promotions
Var pdata = "nameparam =" + document. getElementById ("nameparam"). value + "Limit m = 1 ";
$. Ajax ({
Url: "Util/MainUtil. aspx", // background processing class
Type: "POST ",
Data: pdata,
DataType: "html ",
Timeout: 10000,
Error: function (data ){},
Success: function (data ){
// Because AJAX is controlled by a timer, it will be automatically refreshed in the background every 5 minutes. Obtain the latest data.
// When reinstalling data, stop all actions on the data first.
$ ("# ScrollDiv1"). stop (true );
// Output data in the container
$ ("# ScrollDiv1> # ul1"). innerHTML = "";
// HTML (data) is a Jquery method. Parse and load the HTML code
$ ("# ScrollDiv1> # ul1" ).html (data );
// The setInterval () method can call functions or computation expressions according to the specified period (in milliseconds. <DIV class = spctrl> </DIV> the setInterval () method continuously calls the function until clearInterval () is called or the window is closed. The ID value returned by setInterval () can be used as a parameter of the clearInterval () method.
// Use the myar variable to control the number corresponding to the output. Then run the number to call the function. In this way, there is no sense that the rolling effect is stuck when data is replaced. Good visual effects.
// Although this may not start from the first latest announcement, it has advantages and disadvantages.
Myar1 = setInterval ('autoscroll ("# scrollDiv1") ', 2000)
$ ("# ScrollDiv1 "). hover (function () {clearInterval (myar1) ;}, function () {myar1 = setInterval ('autoscroll ("# scrollDiv1") ', 2000 )}); // when the mouse is put up, the scroll stops and the scroll starts when the mouse leaves.
// The HOVER method is used to move the cursor over a data scroll. Responds to the stop rolling action. You can click To Go To The superchain.
// The function in the background: If you move the mouse again, it will scroll from the variable number.
}
});
}
// Timer control. Update the content of a container every 5 minutes.
$ (Function (){
$ ("# Ul1"). everyTime (300000, function (I) {// run once every 5 minutes
Notice ();
});
});
// Note the loading sequence. It is only available after all data is loaded. That is, after AJAX is filled, it can be called. You can use either window. onload or ONLOAD in the BODY.
// But $ (<SPAN size = "-1"> <EM> document). ready </EM> differs from onload. $ (<SPAN size = "-1"> <EM> document). ready is executed after the DOM framework is loaded. We are waiting for AJAX. So it cannot be used here. </EM> </SPAN>
<SPAN size = "-1"> // This is $ (<SPAN size = "-1"> <EM> document). ready is relatively stable. </EM> </SPAN>
<SPAN size = "-1"> // jQuery. noConflict (); jQuery (document). ready (function () {}); <BR> </SPAN>
// But some people say
// $ (Document). ready (function (){
// Alert ("hello ");
//}); (1)
// <Body onload = "alert ('hello');"> (2)
// The above two sections of code are equivalent. But the advantage of code 1 is that performance is separated from logic. In addition, you can perform the same operation in different js files, that is, $ (document). ready (fn) can be repeated on a page without conflict. Basically, many plug-ins of Jquery use this feature. It is precisely because of this feature that multiple plug-ins are used together.
// Window. onload = function () {Notice ();}
Function Notice2 () {// popular timer promotions
Var pdata = "nameparam =" + document. getElementById ("nameparam"). value + "Limit m = 2 ";
$. Ajax ({
Url: "Util/MainUtil. aspx", // background processing class
Type: "POST ",
Data: pdata,
DataType: "html ",
Timeout: 10000,
Error: function (data ){},
Success: function (data ){
$ ("# ScrollDiv2"). stop (true );
$ ("# ScrollDiv2> # ul2"). innerHTML = "";
// Output data in the container
$ ("# ScrollDiv2> # ul2" ).html (data );
Myar2 = setInterval ('autoscroll ("# scrollDiv2") ', 2000)
$ ("# ScrollDiv2 "). hover (function () {clearInterval (myar2) ;}, function () {myar2 = setInterval ('autoscroll ("# scrollDiv2") ', 2000 )}); // when the mouse is put up, the scroll stops and the scroll starts when the mouse leaves.
}
});
}
$ (Function (){
$ ("# Ul2"). everyTime (300000, function (I) {// run once every 5 minutes
Notice2 ();
});
});
Function AutoScroll (obj ){
$ (Obj). find ("ul: first"). animate ({
MarginTop: "-25px"
},500, function (){
Vertex (this).css ({marginTop: "0px"}). find ("li: first"). appendTo (this );
});
}
</Script>
<Style type = "text/css">
Ul, li
{
Margin: 0;
Padding: 0;
}
# ScrollDiv1
{
Width: 300px;
Height: 25px;
Line-height: 25px;
Border: # ccc 0px solid;
Overflow: hidden;
}
# ScrollDiv1 li
{
Height: 25px;
Padding-left: 10px;
}
# ScrollDiv2
{
Width: 300px;
Height: 25px;
Line-height: 25px;
Border: # ccc 0px solid;
Overflow: hidden;
}
# ScrollDiv2 li
{
Height: 25px;
Padding-left: 10px;
}
</Style>
</Head>
<Body link = "#000000" vlink = "#000000" alink = "#000000" onload = "Notice (); Notice2 ()">
<% -- Header part -- %>
<Table style = "margin-bottom: 4px" cellspacing = "0" cellpadding = "0" width = "910" align = "center"
Border = "0">
<Tbody>
<Tr>
<Td width = "910" height = "100" background = "images/LOGO.jpg">
<P align = "center">
<B> </B>
</Td>
</Tr>
<Tr>
<Td valign = "bottom" background = "images/bar.jpg" height = "71">
<Table height = "71" cellspacing = "0" cellpadding = "0" width = "100%" align = "center" border = "0">
<Tbody>
<Tr valign = "middle">
<Td width = "8%" height = "33">
<Div align = "right">
<Font size = "2"> announcement: </font> </div>
</Td>
<Td width = "46%" style = "line-height: 145%">
<Div align = "left" id = "scrollDiv1">
<Ul id = "ul1">
</Ul>
</Div>
</Td>
<Td width = "46%" height = "33" style = "line-height: 145%">
<Div align = "left" id = "scrollDiv2">
<Ul id = "ul2">
</Ul>
</Div>
</Td>
</Tr>
</Tbody>
</Table>
</Td>
</Tr>
</Tbody>
</Table>
<% -- End of the header part -- %>
Background Util/MainUtil. aspx. cs outputs the corresponding HTML data
Using System;
Using System. Collections;
Using System. Configuration;
Using System. Data;
Using System. Linq;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Xml. Linq;
Namespace Web. Util
{
Public partial class MainUtil: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
Try
{
Int k = int. Parse (Request ["param"]. ToString ());
Switch (k)
{
Case 1:
ToOne ();
Break;
Case 2:
ToTwo ();
Break;
Default:
Break;
}
}
Catch {}
}
Private void toOne ()
{
Try
{
String st = String. Empty;
String companyName = Request ["nameparam"]. ToString ();
DataTable dt1 = DBUtility. dbHelperSQL. query ("select top (5) Title, Id from announcement table where TypeId = '2' And Creater = '" + companyName + "'order by CreatTime desc "). tables [0];
For (int I = 0; I <dt1.Rows. Count; I ++)
{
// Create an announcement as a hyperlink
St + = "<li> <B> <a style = 'color: #000000 'href = 'detail. aspx? Commp anyserver = 2 & Company = "+ companyName +" & id = "+ dt1.Rows [I] [" Id "]. toString () + "'target = '_ blank'> <font color = '# FF3300'>" + dt1.Rows [I] ["Title"]. toString () + "</font> </a> </B> </li> ";
}
ShowHtml (st );
}
Catch {}
}
Private void toTwo ()
{
Try
{
String st = String. Empty;
String companyName = Request ["nameparam"]. ToString ();
DataTable dt2 = DBUtility. dbHelperSQL. query ("select top (5) Title, id from announcement table where Id IN (select top 10 Id from announcement table where TypeId = '2' And Creater = '"+ companyName +" 'order by CreatTime desc) order by CreatTime asc "). tables [0];
// Create an announcement as a hyperlink
For (int I = 0; I <dt2.Rows. Count; I ++)
{
St + = "<li> <B> <a style = 'color: #000000 'href = 'detail. aspx? Commp anyserver = 2 & Company = "+ companyName +" & id = "+ dt2.Rows [I] [" Id "]. toString () + "'target = '_ blank'> <font color = '# FF3300'>" + dt2.Rows [I] ["Title"]. toString () + "</font> </a> </B> </li> ";
}
ShowHtml (st );
}
Catch {}
}
Private void showHtml (string st ){
Response. ContentType = "text/html"; // text/html, and application/json are both output formats.
Response. Write (st );
Response. Flush ();
Response. Close ();
}
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.