AnandM, thanks for your code, I've slightly altered it to fit my purposes. It works in part. When the page is first loaded I'm presented with links on the first field and when I click on them I get the modalpopup with the correct text, the thing is when I scroll down to get the next lot of data the hperlinks are not on the new data and the fields are populated with the column headings.
I've included the altered code, I've checked every line and if theres a mistake I cant see it. I'd be gratful if you could cast your eye over my code and tell me what I've done wrong please.
Regards
Mick
<%@ Page Title="" Language="VB" MasterPageFile="~/Masterpages/UllixMasterPage.master" AutoEventWireup="false" CodeFile="movie2.aspx.vb" Inherits="Video_Movies_movie2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ChildContent1" Runat="Server">
<asp:Panel ID="Panel1" height="300" runat="server">
<!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">
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding: 5px;
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align: left;
}
.Grid td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family: Arial;
line-height: 200%;
cursor: pointer;
width: 100px;
}
.Grid th
{
background-color: #3AC0F2;
color: White;
font-family: Arial;
font-size: 10pt;
line-height: 200%;
width: 100px;
}
</style>
<body>
<form id="form1">
<table class="style2">
<tr>
<td class="style3">
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table style="width: 100%">
<tr>
<td style="width: 28px">
</td>
<td>
<table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 1180px;
border-collapse: collapse;">
<tr>
<th scope="col" style="width: 420px;">
Movie Title
</th>
<th scope="col" style="width: 80px;">
Movie Genre
</th>
<th scope="col" style="width: 165px;">
FilmSeries
</th>
<th scope="col" style="width: 142px;">
Film Studio
</th>
<th scope="col" style="width: 60px;">
Film Year
</th>
<th scope="col" style="width: 63px;">
File Ext
</th>
<th scope="col" style="width: 40px;">
ID
</th>
<th scope="col" style="width: 40px;">
mediatype
</th>
</tr>
</table>
<div id="dvGrid" style="height: 565px; overflow: auto; width: 1200px">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CssClass="Grid"
Width="1180px" Font-Names="Verdana" Font-Size="XX-Small" Font-Bold="True" OnRowDataBound="gvCustomers_RowDataBound">
<Columns>
<asp:BoundField DataField="title" HeaderText="Movie Title" ItemStyle-CssClass="name" ItemStyle-Width="400"
HeaderStyle-Width="400" >
<HeaderStyle Width="400px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="name" Width="400px" />
</asp:BoundField>
<asp:BoundField DataField="genre" HeaderText="Movie Genre" ItemStyle-CssClass="genre" ItemStyle-Width="80"
HeaderStyle-Width="80" >
<HeaderStyle Width="80px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="genre" Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="filmseries" HeaderText="Film Series" ItemStyle-CssClass="filmseries" ItemStyle-Width="160"
HeaderStyle-Width="160" >
<HeaderStyle Width="160px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmseries" Width="160px" />
</asp:BoundField>
<asp:BoundField DataField="studio" HeaderText="Film Studio" ItemStyle-CssClass="studio" ItemStyle-Width="130"
HeaderStyle-Width="130" >
<HeaderStyle Width="130px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="studio" Width="130px" />
</asp:BoundField>
<asp:BoundField DataField="filmyear" HeaderText="Film Year" ItemStyle-CssClass="filmyear" ItemStyle-Width="60"
HeaderStyle-Width="60" >
<HeaderStyle Width="60px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmyear" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="fileext" HeaderText="File Ext" ItemStyle-CssClass="fileext" ItemStyle-Width="60"
HeaderStyle-Width="60" >
<HeaderStyle Width="60px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="fileext" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="recid" HeaderText="recid" ItemStyle-CssClass="recid" ItemStyle-Width="40"
HeaderStyle-Width="40" >
<HeaderStyle Width="40px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="recid" Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="mediatype" HeaderText="mediatype" ItemStyle-CssClass="mediatype" ItemStyle-Width="40"
HeaderStyle-Width="40" >
<HeaderStyle Width="40px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="mediatype" Width="40px" />
</asp:BoundField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;"
runat="server" />
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<asp:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel3" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" Style="display: none">
Modal PopUp was Called By
<asp:Label ID="lblContactName" runat="server" /><br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
</div>
<br />
<br />
<br />
<br />
<%--<script type="text/javascript" src="jquery-1.11.3.js"></script>--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function() {
$(".name").click(function() {
$('[id*=lblContactName]').html($(this).html());
$('[id*=btnShow]').click();
});
});
//Load GridView Rows when DIV is scrolled
$("#dvGrid").on("scroll", function(e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
GetRecords();
}
});
//Function to make AJAX call to the Web Method
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
if ($("[id$=gvCustomers] .loader").length == 0) {
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
row.addClass("loader");
row.children().remove();
row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
$("[id$=gvCustomers]").append(row);
}
$.ajax({
type: "POST",
url: "Movie2.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
},
error: function(response) {
alert(response.d);
}
});
}
}
//Function to recieve XML response append rows to GridView
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
$("[id$=gvCustomers] .loader").remove();
customers.each(function() {
var customer = $(this);
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
$(".title", row).html(customer.find("name").text());
$(".genre", row).html(customer.find("genre").text());
$(".filmseries", row).html(customer.find("filmseries").text());
$(".studio", row).html(customer.find("studio").text());
$(".filmyear", row).html(customer.find("filmyear").text());
$(".fileext", row).html(customer.find("fileext").text());
$(".recid", row).html(customer.find("recid").text());
$(".mediatype", row).html(customer.find("mediatype").text());
$("[id$=gvCustomers]").append(row);
});
//Hide Loader
$("#loader").hide();
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table class="style2">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
</asp:Content>
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Collections.Generic
Partial Class Video_Movies_movie2
'Inherits System.Web.UI.Page
Inherits BasePage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
gvCustomers.DataSource = GetCustomersPageWise(1, 40)
gvCustomers.DataBind()
End If
'If Page.IsPostBack = False Then
' MyBase.LogActivity("Movies")
' Title = ConstClass.saveHitsNewToggleAdmin("Movies", "movies New", Request.UserHostAddress, True)
'End If
End Sub
Public Shared Function GetCustomersPageWise(ByVal pageIndex As Integer, ByVal pageSize As Integer) As DataSet
Dim constring As String = ConfigurationManager.ConnectionStrings("ClubConnString").ConnectionString
Using con As New SqlConnection(constring)
Using cmd As New SqlCommand("GetMoviesMulti")
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", pageSize)
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
sda.Fill(ds, "Customers")
Dim dt As New DataTable("PageCount")
dt.Columns.Add("PageCount")
dt.Rows.Add()
dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
ds.Tables.Add(dt)
Return ds
End Using
End Using
End Using
End Using
End Function
Protected Sub gvCustomers_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim drv As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
Dim mylink As New HtmlAnchor()
mylink.Attributes("class") = "name"
Dim strid As String = e.Row.Cells(0).Text
mylink.HRef = "#"
mylink.InnerText = e.Row.Cells(0).Text
e.Row.Cells(0).CssClass = ""
e.Row.Cells(0).Controls.Add(mylink)
End If
End Sub
Protected Sub ShowPopUp(ByVal sender As Object, ByVal e As EventArgs)
mp1.Show()
End Sub
<WebMethod()> _
Public Shared Function GetCustomers(ByVal pageIndex As Integer) As String
'Added to similate delay so that we see the loader working
'Must be removed when moving to production
System.Threading.Thread.Sleep(2000)
Return GetCustomersPageWise(pageIndex, 40).GetXml()
End Function
End Class
