<script src="<%=("../Scripts/jquery-1.6.1.min.js") %>" type="text/javascript" />
<script src="<%=("../Scripts/jquery-datePicker.js") %>" type="text/javascript" />
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker();
});
</script>
I have used this code but it doesnot show me the popup calender on click on textbox.
what can be the problem.
it doesnot give any error.
Perhaps you should use the document.ready function
$(document).ready(function() {
$("#txtDate").datepicker();
});
why not set path directly? and close script tag with this </script>
<script src="../Scripts/jquery-1.6.1.min.js" type="text/javascript" ></script>
<script src="../Scripts/jquery-datePicker.js" type="text/javascript" ></script>
Use ClientID for server control
<script type="text/javascript">
$(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
you can also use ready function
<script type="text/javascript">
$(document).ready(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
if ID selector doesn't work then use class selector it is good for ASP.NET server control
<asp:TextBox ruat="server" ID="txtDate" CssClass="DateField"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function() {
$(".DateField").datepicker();
});
</script>
ID of ASP.NET server control is different than that of the normal HTML ID. So if you are using a Server control, then run your code, open the page source, get the ID that is displayed in the page source and use this ID instead of txtDate.
Also use
$(document).ready(function() { $("#<id>").datepicker(); });
Related
I am trying to load this javascript in a form somehow
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/744_RC08/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"programming","geo":"","time":"all"}],"category":0,"property":""}, {}); </script>
The only way I could think of was to add it to an html document and load that in to a webbrowser control like so:
HTML DOC:
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/744_RC08/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dominos pizza","geo":"","time":"all"}],"category":0,"property":""}, {}); </script>
</BODY>
</html>
Code:
WebBrowser1.DocumentText = IO.File.ReadAllText("C:\Users\Zach\Desktop\test.html")
Seems simple enough but nothing loads at all.
Is this not possible or Is there a better way to accomplish what I am trying to do?
I have seen multiple articles/questions about formatting a gridview rows using jquery.
However consider this my first attempt to write a jquery and use it in an asp.net page.
I manage to do the following, but it doesn't do anything to the gridview. What have I done wrong?
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
Within body section, after GridView1 is created:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%> td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#<%=GridView1.ClientID%> td:nth-child(even)").css("background-color", "#99CCFF");
});
</script>
I also have this jquery saved as jqueryColumnColours.js in the scripts folder. So the second question, how can I use .js file without really writing the above function within aspx page?
EDIT:
$(document).ready(function () {
$("#GridView1 td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#GridView1 td:nth-child(even)").css("background-color", "#99CCFF");
});
Include the latest jquery like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
and add the script tag just before closing body section,
</form>
<script type="text/javascript">
$("#grid td:nth-child(odd)").css("background-color", "Tan");
</script>
</body>
I hope it helps!!!
EDIT by bonCodigo:
The only change that works for my page was having http:// instead of //
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></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 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>