I used the following script from here
JQUERY
Select Extensions to check for the minimal pages in that link i posted
But i am unable to block the week ends if i write as he specified so can any one tell why this is what i have done
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<style type="text/css">
#import "css/jquery.datepick.css";
</style>
<script type="text/javascript">
$(function () {
$('#txtPaymentDate').datepick({
onDate: $.datepick.noWeekends, showTrigger: '#calImg'
});
});
<asp:TextBox ID="txtPaymentDate" runat="server" OnTextChanged="txtPaymentDate_TextChanged"
Width="136px"></asp:TextBox>
<div style="display: none;">
<img id="calImg" src="images/calendar.gif" alt="Popup" class="trigger" />
</div>
I am going to have a calendar with week ends selectable can any one tell what's wrong i am doing
On the Extensions tab, it says:
The jquery.datepick.ext.js module provides additional functionality to extend the datepicker
(emphasis added).
And looking in the downloads, there does appear to be a file of that name included. But you're only using jquery.datepick.js
So try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/jquery.datepick.ext.js"></script>
Related
I use jquery and I see that currently, Jquery is given a reference in every content page.
I am planning to move all the references to the master page so that it will be easy to update them when its needed.
So , I remove the jquery references from the content page and place them in the head section of the master page as shown below :
<head id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
When I run the application I get the following error :
JavaScript runtime error: 'jQuery' is undefined
From my research online this is the right way to do it .. but I get the error. Can anyone help me and point out whats wrong or what needs to be done ?
Move the jquery script tag above the jquery ui script tag and remove one of the jquery ui references since you don't need to include them twice:
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
jQuery is undefined since the jquery ui library is trying to use the jQuery reference before it is defined in the jquery-1.9.1.js file.
First, change the order of the call to jQuery UI and jQuery library, all library or plugin that use jQuery need that defined jQuery before you call it, this is for all libraries or framewors:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
then so that you can see in your code you are calling twice a jQuery UI, check this and also if you are calling twice a jQuery or other libraries:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js
you are calling jQuery ui library before jQuery library is loaded
your code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
change it to
call jQuery library file first
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I am using "jquery-ui-1.8.12.custom.min.js" file in my project.
I have the following code in aspx page
script
<script type="text/javascript" >
$(function() {
$('#<%=txtDate.ClientID%>').datepicker();
});
</script>
add file reference
<script type="text/javascript" src="<%= ResolveUrl("~/script/jquery-ui-1.8.12.custom.min.js") %>" ></script>
but I dont know where I am wrong. Plz help me out to resolve this issue.
I found this kind of error
You've included the jQuery ui, but not jQuery itsself. You need a script tag to include jQuery.
<script type="text/javascript" src="<%= ResolveUrl("~/script/jqueryfilenamehere.js") %>" ></script>
<script type="text/javascript" src="<%= ResolveUrl("~/script/jquery-ui-1.8.12.custom.min.js") %>" ></script>
Missing Jquery file add any jquery file (http://code.jquery.com/jquery-latest.js) before use datepicker :-
<script type="text/javascript" src="<%= ResolveUrl("~/script/jquery-latest.js") %>" ></script>
First make sure you are add Jquery.js Reference
<script type="text/javascript" src="<%= ResolveUrl("~/script/jquery-latest.js") %>" ></script>
If you are using master page concept in asp.net or your jquery.js file is in master page then make sure you add: Page.Header.DataBind(); and Page.DataBind(); to the PageLoad() event of the Master page.
You forgotten to include jquery: http://code.jquery.com/jquery-1.9.1.min.js
jquery-ui doesn't include automatically jquery.
Include reference to jQuery Library.
You may use from Google Hosted Libraries as follows;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
How do i include jquery ui to be used in my system? I've already put the code in my header:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
And how can I include the date picker which I already downloaded from jqueryUI. Here is the code of the date picker :
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
I got confused how to export the downloaded file to asp. Thank you.
Did you also include the references to JQuery?
<link type="text/css" href="css/themename/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
See: JQuery UI Documentation
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.
I am trying to use jGrowl in ASP.NET, but am getting a Microsoft JScript runtime error: Object doesn't support this property or method error when trying to run the page in IE. Any ideas why this is happening?
<link rel="stylesheet" href="css/jquery.jgrowl.css" type="text/css" />
<style type="text/css">
div.jGrowl div.smoke {
background: url(images/smoke.png) no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width: 280px;
height: 55px;
overflow: hidden;
}
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/jquery.jgrowl.ie6.css" type="text/css" />
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/jquery.template.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test2').jGrowl("TEST", {
theme: 'smoke',
closer: true
});
});
</script>
BODY:
<a onclick="$('#test2').jGrowl('TEST');" href="javascript:void(0);">Sample 3</a>
I think you are including jquery twice. You have a jquery.js and jquery-1.4.2.js script files included. Everything seems to be plugging into the first instance and then the last include overrides $. So that's why you're seeing this error message.
Including 2 jquery files of the same type generates this type of errors. Get rid of one of them and your problem is solved.
//<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/jquery.template.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
May be you haven't posted your complete page source but if you have this line in addition to other JQuery/JavaScript includes, try removing it from the page.
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>