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.
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>
I'm new to web development so I'm still learning the fundamentals.
I just want to add some jQuery to my ASP .NET page.
In the header, I reference what I need:
<head id="Head1" runat="server">
<link href="Content/Site.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Scripts/jquery-2.0.2.js" ></script>
<script type="text/javascript" src="~/HeaderCheckBoxSelections.js"></script>
</head>
This is what the ~/HeaderCheckBoxSelections.js looks like:
function SelectAllCheckBoxes(cbSelect) {
$('#<%=gvShows.ClientID%>').find("input:checkbox").each(function() {
if (this != cbSelect) {
this.checked = cbSelect.checked;
}
});
}
The event is triggered by this:
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="javascript:SelectAllCheckBoxes(this);"/>
</HeaderTemplate>
But when the check box is clicked, it says:
Unhandled exception...
0x800a1391 - JavaScript runtime error: 'SelectAllCheckBoxes' is undefined.
Am I missing something here? Am I not referencing jQuery properly?
the databinding in the jquery selector in
$('#<%=grdOperation.ClientID%>')
won't work in a separate javascript file. That databinding has to be on the aspx markup to be rendered correctly.
You can either move that databinding into your aspx by storing it to a variable, such as
<head id="Head1" runat="server">
<link href="Content/Site.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Scripts/jquery-2.0.2.js" ></script>
<script type="text/javascript" src="~/HeaderCheckBoxSelections.js"></script>
<script type="text/javascript">
var grdOperationId = '<%=grdOperation.ClientID%>';
</script>
</head>
and then referencing it by variable in your javascript.
Or you can use an "id ends with" selector to select it in the js code, as long as there is only one grdOperation on the page. Such as:
function SelectAllCheckBoxes(cbSelect) {
$('[id$=grdOperation]').find("input:checkbox").each(function() {
if (this != cbSelect) {
this.checked = cbSelect.checked;
}
});
}
Try this:
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="SelectAllCheckBoxes(this);"/>
</HeaderTemplate>
The ASP.NET Checkbox control does not actually have an OnClick attribute, nor an OnClientClick attribute; thus ASP.NET just passes the attribute on like a custom attribute and since a browser knows what to do with an onclick attribute it tries to execute the logic.
If this fails, then it is a problem with the actual .js file being loaded correctly. Can you verify with Chrome Developer Tools, Firebug or IE F12 Tools that the .js file is actually in memory?
Here is a screenshot of Chrome Developer Tools filtering out just the Scripts, in the Network tab, upon going to Microsoft's web site:
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>
I work on a ASP.NET application using Jquery. Jquery is really powerfull and I use a lot of it.
In my master page I include all libraries I use and a js file who contain the jquery code available for all the application (interface interactions). In this js File (Main.js) I make some things so I use the $(document).ready( ... etc .. )
But in some pages, who are more complex I need to use some other jquery code.. So I add some head Content with other script tag.. And this the problem, I have to add the $(document).ready() instruction again.
There is a lot of problems with my asp controls with this way to do, the autopostback controls doesn't do their autopostback.. I think this is a problem with the multiple $(document).ready() declaration because when I remove the second one(in the page not in the master page) the controls are working.
So how can I do to add some javascript code in a specific page without multiple $(document).ready() declaration. (I don't want to embed all the jquery code in all pages).
I hope I'm clear enough, thanks for responses
Edit here is code
Master page part
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/menu.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/js/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
<script src="/js/jquery.color.js" type="text/javascript"></script>
<script src="/js/Menu.js" type="text/javascript"></script>
<script src="/js/iphone-style-checkboxes.js" type="text/javascript"></script>
<script src="/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="/js/Main.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
Some content....
</body>
</html>
Main.js
$(document).ready(function () {
/// <reference path="jquery-1.4.4-vsdoc.js" />
//There is a lot of content here......
});
And A page
<%# Page MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeBehind="Dep.aspx.cs" Inherits="Dep" %>
<asp:Content ID="HeadContent1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Styles/nyroModal.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery.nyroModal.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tbxDateDebut').datepicker();
$('#tbxDateFin').datepicker();
$('.nyroModal').nyroModal();
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
//Here comes the controls... (lot of code)
</asp:Content>
main.js
$(document).ready(function () {
//There is a lot of content here......
if ($.pageReady) $.pageReady($);
});
page.js
<script type="text/javascript">
$.pageReady = function() {
// fired on DOM ready
}
</script>
The answer is in your question:
But in some pages, who are more complex I need to use some other jquery code.. So I add some head Content with other script tag.. And this the problem, I have to add the $(document).ready() instruction again.
"But in some pages..."
Unfortunately you have to add a reference for every js file that refers to uncommon elements. That is if you have page 1 with a <div id="element1"> and another page (page 2) with <div id="element676"> you would not want to include all in the Jquery handling into Main.js . In fact that would give an error if you had not yet seen page 2.
Damn you guys are quick.... as I was writing #Raynos gave the correct answer.
well an alternative is to move all of you jquery document ready to the bottom of your page
<body>
... here goes your other html ....
<script>
//$(document).ready(function(){//this is not needed
... here goes the first ready...
//});//this is not needed
//$(document).ready(function(){//this is not needed
... here goes the second ready ... and so on...
//});//this is not needed
</script>
</body>
So in effect you are using document.ready when all other elements are ready :) PS
I'm inclined to think that there's something at work here other than your multiple $(document).ready() calls. AFAIK, multiple calls against $(document).ready() (and even bubbled-up versions, like $('#someid').ready()) shouldn't cause issues as they are all aggregated together silently by jQuery for you.
I'd double-check my syntax for starters, and make sure that all your blocks are properly encapsulated, all statements end with a ;, and all that jazz.