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
Related
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 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:
here is my script
<script type="text/javascript">
$(document).ready(function () {
// alert("jquery working fine, still no display..");
$(".datepicker").datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yyyy'
});
});
</script>
<input type="text" class="datepicker" />
The actual Datepicker works great, firebug shows this script, the jqueryUI, the timepicker-addon.js, slider.js, and datepicker.js, jquery is selecting the textboxes.
but alas, still no datetimepicker displaying
I've tried using id's/classes, rearranging the order the scripts are loaded. I would say that the addon is just bunk, but so many seem to have no troubles at all with it.
Does anyone know what I am missing?
The following code works perfectly fine for me:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="datepicker" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.datepicker').datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yy'
});
</script>
</body>
</html>
Gives the following result as can be seen in this live demo:
So I guess there must be something wrong with your script inclusions and maybe their order. Unfortunately since you haven't shown your code it is difficult to be able to say more.
I have the following mark-up:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jqueryFancyBox.WebForm1" %>
<!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">
<link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<title></title>
</head>
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'showCloseButton': true,
'hideOnContentClick': true,
'href': '#popUpAnnouncement',
'centerOnScroll': true
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<div style="display: none" id="popUpAnnouncement">
close
lalalalala
</div>
<input type="button" id="btn" value="lala" />
</div>
</form>
</body>
</html>
The modal pops up at pageload but after it closes the div is still shown at the top of the page. How do I hide the div, after it's been closed.
Thanks in advance!
Not sure if it has to do with your problem, probably not. But make sure you place the script tag inside head or body, not between them.
You can use the onClosed option:
...
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'showCloseButton': true,
'hideOnContentClick': true,
'href': '#popUpAnnouncement',
'centerOnScroll': true,
'onClosed': function(){$('#popUpAnnouncement').hide();}
});
});
</script>
</head>
<body>
....
I am stuck with this error and found a work around and the solutions works for me, but i i would like to know is it the best way to fix the issue and i want to make sure that it wont affect any other pages badly. Hope the experts will help.
If this was the best solution then many of you can save your heads.
This error occurs when a code block is placed in the MasterPage. Place the code block in a placeholder to resolve the issue.When adding AJAX extenders to your Web page, it will attempt to register scripts in the head. If code blocks are present in the MasterPage, an error might occur.
To resolve this issue, simply move the code block into a placeholder in the head of your MasterPage, like so:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="myPlaceholder" runat="server">
<script language="javascript" type="text/javascript" src="<%= Page.ResolveClientURL("~/javascript/global.js")%>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
The error is logical you can not confuse the rendered controls after they rendered by using the <%= %>
One way to solve this issue is to use a literal control, and render the script line on code behind.
<asp:ContentPlaceHolder ID="myPlaceholder" runat="server">
<asp:Literal runat="server" ID="txtIncludeScript" EnableViewState="false"></asp:Literal>
</asp:ContentPlaceHolder>
and on code behind. Check for null because if you change the placeholder the literal is null. Also set EnableViewState=false because you set it on every Page_Load and you do not wish to save it to viewstate.
if(txtIncludeScript != null)
{
txtIncludeScript.Text =
string.Format("<script language=\"javascript\" type=\"text/javascript\" src=\"{0}\"></script>",
Page.ResolveClientUrl("~/javascript/global.js"));
}
ContentPlaceHolder requires a master page, so you can replace that tag with some other element that can be ran at the server in case your page does not have a master page and you cannot get rid of the
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div runat="server">
<script language="javascript" type="text/javascript" src="<%= Page.ResolveClientURL("~/javascript/global.js")%>"></script>
</div>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>