Click here to Skip to main content
15,877,051 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 19-Mar-12 20:21pm
v3

1 solution

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.
 
Share this answer
 
Comments
[no name] 20-Mar-12 14:27pm    
Thanks 2nd option worked. Thankyou so much.
what will i do if want to call c# function from this user control via jquery should i have to define all the function in all the code behind file in all pages , if i just have to add function in user control code behind file , and adding that the same function in all scripts of all pages will call the same function , of user control behind file ?

how i can use it in masterpages , i tried adding it in master page but it didnt work at all , i also used resolvedurl in the scripts but it also didnt help !

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900