Please help i have added a photo upload control on my webpage but when i open the modal popup it does not show please help
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="StudentSearch.aspx.vb" Inherits="SMIS2022WEB.StudentSearch" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
function Showalert() {
alert('Call JavaScript function from codebehind');
}
</script>
<script type="text/javascript">
$(function () {
GetCustomers(1);
$("body").on("keyup", "[id*=txtSearch]", function () {
GetCustomers(parseInt(1));
});
$("body").on("click", ".Pager .page", function () {
GetCustomers(parseInt($(this).attr('page')));
});
});
function SearchTerm() {
return jQuery.trim($("[id*=txtSearch]").val());
};
function GetCustomers(pageIndex) {
$.ajax({
type: "POST",
url: "StudentSearch.aspx/GetCustomers",
data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
var row;
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
if (row == null) {
row = $("[id*=SearchGrid] tr:last-child").clone(true);
}
var footer = $("[id*=SearchGrid] tr:last-child").clone(true);
$("[id*=SearchGrid] tr").not($("[id*=SearchGrid] tr:first-child")).remove();
if (customers.length > 0) {
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("ADMNO").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Class").text());
$("td", row).eq(3).html($(this).find("Stream").text());
$("td", row).eq(4).html($(this).find("SEX").text());
$("td", row).eq(5).html($(this).find("STATUS").text());
$("td", row).eq(6).html($(this).find("studenttype").text());
$("td", row).eq(7).html($(this).find("House").text());
$("td", row).eq(8).html("<a href='javascript:;' onclick='GetData(this)'>Select</a>");
$("[id*=SearchGrid]").append(row);
row = $("[id*=SearchGrid] tr:last-child").clone(true);
});
$("[id*=SearchGrid]").append(footer);
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
$(".Name").each(function () {
var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig');
$(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + SearchTerm() + "</span>"));
});
} else {
var empty_row = row.clone(true);
$("td:first-child", empty_row).attr("colspan", $("td", row).length);
$("td:first-child", empty_row).attr("align", "center");
$("td:first-child", empty_row).html("No records found for the search criteria.");
$("td", empty_row).not($("td:first-child", empty_row)).remove();
$("[id*=SearchGrid]").append(empty_row);
}
};
function GetData(ele) {
var row = $(ele).closest('tr');
var id = $("td", row).eq(0).html();
var name = $("td", row).eq(1).html();
var city = $("td", row).eq(2).html();
var country = $("td", row).eq(3).html();
var Sex = $("td", row).eq(4).html();
var Stats = $("td", row).eq(5).html();
var stdtype = $("td", row).eq(6).html();
var House = $("td", row).eq(7).html();
$('[id*=hfId]').val(id);
$('[id*=lblId]').html(id);
$('[id*=txtName]').val(name);
$('[id*=ddlClass]').val(city);
$('[id*=txtCountry]').val(country);
$('[id*=txtCity]').val(Stats);
$('[id*=txtHouse]').val(House);
$('[id*=admno]').val(id);
$('[id*=ddlsex]').val(Sex);
$('[id*=ddlStudentType]').val(stdtype);
$('[id*=myModal]').modal('show');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" Style="background-color: #FFFFFF" Height="600px" BorderColor="#6699FF" BorderStyle="Double" Font-Size="Medium">
<table class="auto-style1">
</tr>
<tr>
<td class="auto-style32" style="background-color: #FFFFFF">
<table class="auto-style1">
<tr>
<td>
Student Search
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<br />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<asp:GridView ID="SearchGrid" runat="server" AutoGenerateColumns="False" Height="274px" ItemStyle-Width="Auto" PageSize="25" ShowFooter="True" ShowHeaderWhenEmpty="True" Width="1121px">
<Columns>
<asp:TemplateField HeaderText="Admno">
<EditItemTemplate>
<asp:TextBox ID="txtadmno" runat="server" Text='<%# Bind("ADMNO") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbladmno" runat="server" Text='<%# Bind("ADMNO") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Name">
<EditItemTemplate>
<asp:TextBox ID="txtName0" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtContactName" runat="server" Text='<%# Eval("Name") %>' Width="335px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Class">
<EditItemTemplate>
<asp:TextBox ID="txtCity0" runat="server" Text='<%# Bind("Class") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ClassDropListsF" runat="server">
<asp:ListItem>PRE</asp:ListItem>
<asp:ListItem>P1</asp:ListItem>
<asp:ListItem>P2</asp:ListItem>
<asp:ListItem>P3</asp:ListItem>
<asp:ListItem>P4</asp:ListItem>
<asp:ListItem>P5</asp:ListItem>
<asp:ListItem>P6</asp:ListItem>
<asp:ListItem>P7</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblCity" runat="server" Text='<%# Bind("Class") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Stream">
<EditItemTemplate>
<asp:TextBox ID="txtCountry0" runat="server" Text='<%# Bind("Strean") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="StreamDropListsF" runat="server" DataSourceID="Sqlstream" DataTextField="Stream" DataValueField="Stream">
</asp:DropDownList>
<asp:SqlDataSource ID="Sqlstream" runat="server" ConnectionString="<%$ ConnectionStrings:SMIS2022ConnectionString %>" SelectCommand="SELECT [Stream] FROM [Streamdata]"></asp:SqlDataSource>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblCountry" runat="server" Text='<%# Bind("Stream") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sex">
<EditItemTemplate>
<asp:TextBox ID="Sex" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="SexDropListsF" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>MALE</asp:ListItem>
<asp:ListItem>FEMALE</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Sex") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Height="21px" Width="196px"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Status") %>' Width="135px" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Type">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="STDDropListsF" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>DAY</asp:ListItem>
<asp:ListItem>BOARDER</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("studenttype") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="House">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("House") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button1" runat="server" Text="Add New" OnClick="Button1_Click1" />
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Eval("House") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField CommandName="Staff" HeaderText="Select" Text="Select" />
</Columns>
</asp:GridView>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<div class="Pager"></div>
<div id="myModal" class="modal fade" style="width: auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button style="padding: 0px" type="button" data-dismiss="modal">×</button>
<h4>Modify Students Details</h4>
</div>
<div class="modal-body">
<div>
<div class="form-group">
</div>
<div class="form-group">
<div class="form-group">
<asp:HiddenField ID="hfId" runat="server" />
<asp:Label ID="Label5" runat="server"></asp:Label>
</div>
<tr>
<td>
<table>
<tr>
<td class="auto-style3">
<table class="auto-style2">
<tr>
<td class="auto-style4">Admno</td>
<td>
<div class="auto-style6">
<asp:Label ID="lblId" runat="server"></asp:Label>
<asp:TextBox ID="admno" runat="server" Visible="False"></asp:TextBox>
</div>
</td>
<td rowspan="7">
Student Photo <asp:Panel ID="Panel2" runat="server" Height="162px">
<asp:Image ID="Image1" runat="server" Height="158px" Width="176px" />
</asp:Panel>
</td>
</tr>
</tr>
<tr>
<td class="auto-style4">Student Name</td>
<td>
<asp:TextBox ID="txtName" runat="server" Width="329px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">Class</td>
<td>
<asp:DropDownList ID="ddlClass" runat="server" DataTextField="Class" DataValueField="Class">
<asp:ListItem Text="Please select"></asp:ListItem>
<asp:ListItem Text="PRE"></asp:ListItem>
<asp:ListItem Text="P1"></asp:ListItem>
<asp:ListItem Text="P2"></asp:ListItem>
<asp:ListItem Text="P3"></asp:ListItem>
<asp:ListItem Text="P4"></asp:ListItem>
<asp:ListItem Text="P5"></asp:ListItem>
<asp:ListItem Text="P6"></asp:ListItem>
<asp:ListItem Text="P7"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style4">Stream</td>
<td>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">Status</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">House</td>
<td>
<asp:TextBox ID="txtHouse" runat="server"></asp:TextBox>
</td>
<td class="auto-style4">House</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style4">Sex</td>
<td>
<asp:DropDownList ID="ddlsex" runat="server" DataTextField="SEX" DataValueField="SEX">
<asp:ListItem Text="Please select"></asp:ListItem>
<asp:ListItem Text="MALE"></asp:ListItem>
<asp:ListItem Text="FEMALE"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style4">Student Type</td>
<td>
<asp:DropDownList ID="ddlStudentType" runat="server" DataTextField="studenttype" DataValueField="studenttype">
<asp:ListItem Text="Please select"></asp:ListItem>
<asp:ListItem Text="DAY"></asp:ListItem>
<asp:ListItem Text="BOARDER"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style4"> </td>
<td> </td>
</tr>
</table>
<tr>
<td class="auto-style4"> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">
Close</button>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-success" OnClick="Submit" />
</div>
</div>
</div>
</div>
</asp:Panel>
</form>
</body>
</html>
