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>