jquery in page doesnt work when user control added in it

Question

0.00/5 (No votes)

See more:

Hi ,

I have used jquery in page and in user control. but when i add user control in page the jquery of page which was running fine without user control become unresponsive ,the jquery of user control works.

I thinks its might be refernece src address error.

need help
Following is the code :

<asp:Content ID="Content1" ContentPlaceHolderID="pagehead" Runat="Server">
	<title runat ="server"  id="pgTitle"  />
	<meta name="keywords" id="pgKeyword" runat ="server"  content="" />
	<meta name="description" content="" id="pgDescription" runat="server" />    

 
 
<script src="<%= ResolveClientUrl("~/scripts/jquery-1.6.2.min.js") %>" type="text/javascript"></script><pre lang="Javascript">
<script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.17.custom.min.js") %>" type="text/javascript"></script>
<link href="<%= ResolveClientUrl("~/styles/jquery-ui-1.8.17.custom.css") %>" rel="stylesheet" type="text/css" />

<script src="../../scripts/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../styles/jquery.jqzoom.css" type="text/css"/> 

<script type="text/javascript">
 
	$(document).ready(function () {
		$('.jqzoom').jqzoom({
			zoomType: 'standard',
			lens: true,
			preloadImages: false,
			alwaysOn: false,
			zoomWidth: 200,
			zoomHeight: 200,
			xOffset: 90,
			yOffset: 30,
			position: 'right'
		});
		//$('.jqzoom').jqzoom();
 
		$('#tabs').tabs();
		// Dialog 
		$('#ReplyDialog').dialog({
			autoOpen: false,
			modal: true,
			show: "slide",
			width: 600,
			buttons: {
				"Send Mail": function () {
					var dataToSend = { MethodName: 'SendReply', Reply: document.getElementById('<%= txtReply.ClientID %>').value };
					//var id = $.readQS('productId');
					var options =
						{
							url: '<%=ResolveUrl(string.Format("~/classifieds/details/electricDetails.aspx?productId={0}", Request.QueryString["productId"])) %>',
							data: dataToSend,
							dataType: 'JSON',
							type: 'POST',
							success: function () { $(this).dialog("close"); }
						};
					$.ajax(options);
 
 
 
				},
				"Cancel": function () {
					$(this).dialog("close");
				}
			}
		});
 
 
		// Dialog Link
		$('#ReplyDialog_link').click(function () {
			$('#ReplyDialog').dialog('open');
			return false;
		});
		//hover states on the static widgets
		$('#ReplyDialog_link, ul#icons li').hover(
					function () { $(this).addClass('ui-state-hover'); },
					function () { $(this).removeClass('ui-state-hover'); }
				);
	});
</script>
 
	  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type ="text/javascript"  language ="javascript">    !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>
<script type="text/javascript">
	(function () {
		var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
</script>
<title >
</title>

following is the code of user control :

JavaScript

<script src="<%= ResolveClientUrl("~/scripts/jquery-1.6.2.min.js") %>" type="text/javascript"></script>
 <script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.17.custom.min.js") %>" type="text/javascript"></script> 
<link href="<%= ResolveClientUrl("~/styles/jquery-ui-1.8.17.custom.css") %>" rel="stylesheet" type="text/css" />
  <script type ="text/javascript" >
                    $(document).ready(function () {
 
               
 
                        $('#categorydialog').dialog({
                            autoOpen: false,
                            modal: true,
                            width: 600,
                            show: "slide",
                            buttons: {
 
                                "Accepted": function () {
                                    $(this).dialog("close");
 
                                }
                            }
                        });
                        $('#categorydialog_link').click(function () {
                            $('#categorydialog').dialog('open');
                            return false;
                        });
 
                    });           
                        
    </script>

Thanks

Posted 19-Mar-12 20:17pm

shanalikhan

Updated 19-Mar-12 20:21pm

sravani.v

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Lakxman · Answer 1 · 2012-03-19T20:57:00

From what you have explained, I believe that the reason could be due to the conflict of the jquery scripts loaded. Usually it is advisable to load the jQuery core script in the parent page, if at all there is a need for using different version of jQuery in the same page.

Since both the Page and the usercontrol loads the jQuery core(v1.6.2), there could be conflict occurred making the code unresponsive. To solve this , i would suggest two ways which you could try any one.

1) If it is really needed to load the jQuery scripts in both Page and the usercontrol(depends on the compatiblity of the jQuery plugins that you use in the respective page), the you could utilize the No Conflict feature that jQuery provides.

http://api.jquery.com/jQuery.noConflict/[^]

2) Try removing the jQuery core script that is loaded in the user control and keep the jquery scripts in the parent page.

I believe second option would be a best one you could try for the scenario.

Suggesstion: I would recommend to move the jQuery core load script to your Master page(since i see the content tag in the page code which you gave). By this the jQuery code APIs will be available for all the content pages that you have in your project. Thus avoiding the conflict.

Try these and let me know if any problem.