I've got a test page put together to display a jQuery Calendar.
It seems like I have created everything correctly, but the Calendar control does not show.
Does anyone see anything wrong with my example below?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestjQuery.aspx.cs" Inherits="AcpSheetMetal.TestjQuery" %>
<!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 runat="server">
<title>jQuery Calendar Test</title>
<link rel="Stylesheet" type="text/css" href="Styles/jquery.ui.datepicker.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="Scripts/jquery.ui.datepicker.js" type="text/javascript" />
<script type="text/javascript">
$(function () {
alert("Select Dates and Run Search.");
$("#txtStartDate").datepicker();
$("#txtEndDate").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="height:100%;width:100%">
<tr>
<td style="width:20%;">
<asp:Label ID="lblStartDate" runat="server" Text="[Start Date]" /><br />
<asp:TextBox ID="txtStartDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
<td style="width:20%;">
<asp:Label ID="lblEndDate" runat="server" Text="[End Date]" /><br />
<asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
<td style="text-align:left;">
Run Search:<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
It's probably the self closing script tags causing the problem -
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" />
try using this pattern instead for all the script tags
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
See this question for further info - Why don't self-closing script tags work?
Because you said the alert does not fire I would say that the path Scripts/jquery-1.4.1.min.js could be wrong.
Are you sure this points to your javascript file?
Make sure your paths are correct and close your JavaScript tags:
<link rel="Stylesheet" type="text/css" href='<%= Page.UrlResolve("~/Styles/jquery.ui.datepicker.css" %>' />
<script src='<%= Page.UrlResolve("~/Scripts/jquery-1.4.1.min.js" %>' type="text/javascript"></script>
<script src='<%= Page.UrlResolve("~/Scripts/jquery.ui.datepicker.js" %>' type="text/javascript"></script>
Why don't self-closing script tags work?
Related
For this ASP.net web form project, I created a Default.css for the Default.aspx so I can write the style separately. I was able to change the width of the search bar in the split screen, and it show me exactly what I want, but when I load this on Chrome does not do anything. but if I copy the textbox code from default.aspx to Site.master it will change the style in both split screen and on Chrome. Can someone tell me why is doing anything with the first method?
Site.Master
<%# Master Language="VB" AutoEventWireup="true" CodeFile="Site.master.vb" Inherits="SiteMaster" %>
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="~/content/default.css" rel="stylesheet" runat="server" type="text/css" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
<div id="body">
<%-- Link up with the asp:content in Default.aspx --%>
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<%-- Default Main Body Content --%>
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
Default.aspx
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Report Titial is showing hererererere</h1>
</hgroup>
<asp:TextBox ID="TB_Search" runat="server" AutoPostBack ="true">Search...</asp:TextBox>
<asp:Button ID="Btn_Search" runat="server" Text="Button" />
</div>
</section>
Default.css
#TB_Search
{
width: 515px;
}
I was reviewing this post but is not helping me at all:
ASP.NET page is not loading CSS styles
I'm new to Asp.net and bootstrap. I referenced bootstrap.min.css in my html and I have gridview control I want to style with "table table-striped" class. Visual studio intelisens seems to fail to recognize table-striped class and it's not working when the program runs. Any ideas what I'm doing wrong?
Here's my html source:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NotDelivered.aspx.cs" Inherits="PapaBobs.NotDelivered" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server" class ="container">
<div class ="form-group">
<asp:GridView ID="notDeliveredGrid" runat="server" CssClass ="table table-hover table-striped"></asp:GridView>
</div>
</form>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>
</body>
</html>
Your current href value specifies relative path to css file and browser just cannot load it because this path doesn't exist. Update link to the following
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
Also consider using bundling.
I have copied this code from a website http://www.aspdotnet-suresh.com/2012/04/jquery-dropdownlist-selection-for.html and its not showing me the desired output, I'm Naive at this but the calendar is not visible below the textbox which should as per the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1970:2012'
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
You can also set up calendar by using ajax calendar extender..
<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtDate" Format="dd/MMM/yyyy">
</asp:CalendarExtender>
As per you First statement you copied the code so check that your application contain js folder or not
Make sure that your website project includes the reference files in your project
css/ui-lightness/jquery-ui-1.8.19.custom.css
js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js
If not you can download the same from jquery site and include same in your project or provide http path for reference files
I am working on a website in which i need to represent many items in dropdownlist with checkboxs.
for that i m using bootstrap dropdown checkbox list as :
<head id="Head1" runat="server">
<title></title>
<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap-3.0.0.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<link rel="stylesheet" href="css/prettify.css" type="text/css" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlItems" multiple="multiple" runat="server">
<asp:ListItem value="cheese">Cheese</asp:ListItem>
<asp:ListItem value="tomatoes">Tomatoes</asp:ListItem>
<asp:ListItem value="mozarella">Mozzarella</asp:ListItem>
<asp:ListItem value="mushrooms">Mushrooms</asp:ListItem>
<asp:ListItem value="pepperoni">Pepperoni</asp:ListItem>
<asp:ListItem value="onions">Onions</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="sub" runat="server" OnClick="sub_Click" Text="submit" />
</div>
</form>
<script type="text/javascript">
$('#ddlItems').multiselect({
buttonClass: 'btn btn-default btn-sm'
});
</script>
</body>
</html>
Now i have to get the all checked item on button click.
for that i m trying but i didn't get the items..
You can use this method for that...
<script type="text/javascript">
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());})
});
</script>
I hope this is helpfull to you. to select multiple options with Checkboxes in dropdownlist.
jQuery select multiple options with Checkboxes in dropdownlist
Cheese
Tomatoes
Mozzarella
Mushrooms
Pepperoni
Onions
<script type="text/javascript">
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());})
});
</script>
</div>
</form>
</body>
and you will get output like this:
I used this example from here
http://www.asp.net/ajaxlibrary/jqueryui_progressbar.ashx
Every thing works fine except the progress
This is my design
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15" %>
<!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 runat="server">
<title></title>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$("#progress").progressbar({
value: document.getElementById('<%=litprogress.ClientID%>').value
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
Wizard progress</h1>
<div id="progress">
<asp:Literal ID="litprogress" runat="server"></asp:Literal>
</div>
<asp:Panel ID="step1" runat="server">
<h1>
Step 1</h1>
<asp:Button ID="GoToStep2" Text="Next" runat="server" OnClick="GoToStep2_Click" />
</asp:Panel>
<asp:Panel ID="step2" runat="server">
<h1>
Step 2</h1>
<asp:Button ID="GoToStep3" Text="Next" runat="server" OnClick="GoToStep3_Click" />
</asp:Panel>
<asp:Panel ID="step3" runat="server">
<h1>
Step 3</h1>
<asp:Button ID="GoToStep4" Text="Next" runat="server" OnClick="GoToStep4_Click" />
</asp:Panel>
<asp:Panel ID="step4" runat="server">
<h1>
Completed</h1>
</asp:Panel>
</div>
</form>
</body>
</html>
Instead of required I am getting this
So can any one tell where I went wrong
Getting some warnings regarding CSS and the error is as follows
Error: document.getElementById("litprogress") is null
I think that the progress bar init is happening before the DOM is fully loaded, put the code inside $(document).ready.