jQuery, ASP.NET Client ID and External JS File

To find any ASP.NET Control in jQuery, we use Client ID property to get the correct ID of the rendered control. For example, to find an ASP.NET textbox with ID "txtName", a familiar jQuery syntax is,

$('<%= txtName.ClientID %>').focus( //Blah  Blah);

If you are writing this above code directly in your .aspx page, then your jQuery code will work but if you move the same code to an external or separate js (Java Script) file, you will get an error "Uncaught Error: Syntax error, unrecognized expression".

Related Post:

• Using jQuery with ASP.NET
• Fix for ASP.NET Checkbox -jQuery click event getting fired twice issue
• Turn off autocomplete for ASP.NET textbox using jQuery

Any idea why this works on .aspx page?

Well the reason is, when the jQuery code is placed in .aspx page the jQuery code line such as <%=txtName.ClientID%>, is processed on the server and it is replaced with a proper ID generated by ASP.NET for the control. And when it is placed into a seperate JS file, ASP.NET has no role to play. Since the js file is not processed by ASP.NET and Client ID is not replaced, jQuery will throw the error "Uncaught Error: Syntax error, unrecognized expression" for characters < and > .

So how to fix this?

To fix this error, all you need to do is to remove < and > characters from your jQuery code. Which means you need to change your selectors and there are couples of ways to do this. For example the jQuery code,

$('<%= txtName.ClientID %>').focus( //Blah  Blah);

can be replaced with,

$("input[id*='txtName']").focus( //Blah  Blah);

The above code will select input controls which have "txtName" anywhere within the element's ID attribute value. You can also select the elements via class selectors.

If you are using ASP.NET 4.0, then you can take advantage of ClientIDMode property which when set to Static will keep the same ID in rendered page. For example:

<asp:TextBox ID="txtName" runat="server" ClientIDMode="static" />

will generate something like:

<input type="text" id="txtName" />

So your ID will not change and you don't have to use ClientID property to access the control in jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

jQuery code not working - A Daily Battle

Developers life is full of various code battles and "jQuery is not working" or "jQuery code is not working" is a just another daily battle which they have to fight against while working with jQuery. The message "jQuery is not working" itself defines its pain saying "Oh!!! there is something buggy in your code and that is stopping me from working". So in this post, we will see some basic strategies to win this "Daily Battle".

Earlier I had posted about Common jQuery Mistakes, Various reasons and solutions of jQuery is not defined error and series of articles on jQuery Mobile which you may find helpful to read.. Okay, Lets begin...

STRATEGY No. 1 : Check for jQuery Reference

The first strategy is to ensure that you have included the reference of jQuery library and That too at correct place. It has to before your jQuery code.

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //Your jQuery code goes here....
 });
</script>

<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>

So with this code, you are ready for your "Daily Battle", as the reference of the jQuery library is after the code.

Another important thing which matters a lot is order of your scripts. For example, if you are using jQuery along with jQuery UI, first include jQuery and then jQuery UI library.

<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>

Same is true while using jQuery plugins.

STRATEGY No. 2 : Check Your Selectors

The second strategy is to find out whether "Wrong Element ID or CSS Class Name" is not used. This is a very common mistake developers do while writing code. This happens because developers believe that they can never go run with this. As they say "Confidence is good but over-confidence is bad".

Another common cause is to mix up "#" (hash) and "." (dot). Remember, "#" is used to select elements by ID and "." is used to select elements by css class name. Many times developer mixes these two and get ready for "Daily Battle". So make sure that your selectors are correct.

STRATEGY No. 3 : Check for Comma, Semi-colon, Brackets and Syntax

When you write jQuery code, you will find comma, quotes, semi-colon and brackets everywhere. Without the proper/correct use of these characters, your jQuery code is not going to love you back. So make sure that all these character are in place.

Another common mistake which every developer does, not intentionally though is incorrect syntax. Sometimes due to hurry or time limit, developers may ignore to check syntax which may lead to "Daily Battle". So make sure your syntax is correct.

STRATEGY No. 4 : Check for jQuery Version

jQuery team is continuously updating this library for making things fast and include new things. And they come up with newer version. Due to excitement of new release and eagerness to use new functionality, developers sometime include the new jQuery version without checking for old code compatibility.

For example, $.browser property to check for browser was removed in jQuery 1.9. And if you are using $.browser in your code and you have updated your code to jQuery 1.9, then your old code is going to break. Your Lead/ Project Manger/ Client will give you a kick and you are ready for your "Daily Battle".

So before updating to newer/latest version, check the release log on jQuery website to find out if any functionality is removed or deprecated in newer release. And always remember to test your old code against the new release.

STRATEGY No. 5 : Check for Conflict

Conflict happens. It happens everywhere. Well, lets admit it that "Nobody likes Conflict" and same is true for jQuery. It also hates conflicts. But conflicts with whom? Well, remember jQuery is not the ONLY client side library which exists in this world. There are many other competitors like prototype, mootools, YUI etc. And when there is competition, there is conflict of interest.

These libraries also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other libraries as their global function. And you are ready for your "Daily Battle".

So we need conflict resolution. And to resolve conflict, jQuery has jQuery.noConflict().

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });  
     // Use Prototype with $(...), etc.
     $('someid').hide();
</script>

The above mentioned strategies are nothing, but just a checklist which you can always follow when your "jQuery code is not working". If you have anything to add in this, please include them in comments and share with the world.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...

jQuery x.x.x.min.map not found error

Source Map is a pretty useful and handy feature in terms of debugging on production servers. And if you are using jQuery 1.9+ Version then you may encounter the 404 not found error "jQuery x.x.x.min.map not found". For example, if you are using jQuery 2.0.2 version then you may get "jquery-2.0.2.min.map" not found error . And this is also applicable for jQuery mobile version as well.

When jQuery 1.9 released, then the source map feature was supported by Chrome only. And now the latest version of Firefox 23.0.1, also supports this feature. Find out how to enable source maps in firefox?

Related Post:

• How to migrate older jQuery code to jQuery 1.9+

You will get this error in Chrome and Firefox only when you have enabled "Source Map" features in browser. Read about how to enable this feature in Chrome and Firefox.

From Official jQuery website,

Starting with jQuery 1.9, jQuery team also make available sourcemap files that can be used to debug the compressed file in sourcemap-aware browsers such as Google Chrome and Firefox. The map file is not required for users to run jQuery, it just improves the developer's debugger experience.

So when you download jQuery library then you should also download the source map file. For example, if you have downloaded jquery-2.0.3, then you should also download called jquery-2.0.3.min.map.

The only way to fix this error is to place source map file at same location where is your jquery library is. For example, location of jquery-2.0.3.min.map must be where is your jquery-2.0.3.min.js file is.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

5 Reasons of jQuery - $ is not defined error

"jQuery is not defined" or "$ is not defined" is a very common error that you may face while working with jQuery or if you have started learning jQuery. The error message "jQuery is not defined" clearly says that it can't find the jQuery and you are trying to access jQuery's power. So in this post, find 5 reasons and their solutions of this error.

Reason 1:

You have forgot to include the reference of jQuery library and trying to access it.

Reason 2:

You have include the reference of the jQuery file, but it is after your jQuery code. For example,

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //Your jQuery code goes here....
 });
</script>

<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

So in this case, you will encounter "jQuery is not defined" error, as the reference of the jQuery library is after the code.

Reason 3:

The order of the scripts is not correct. For example, if you are using any jQuery plugin and you have placed the reference of the plugin js before the jQuery library then you will face this error. For example,

<script type="text/javascript" src="Script/jquery-plugin.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

Above code is clear case of incorrect ordering. As when plugin try to access the jQuery and jQuery is not loaded yet then this error will come. So the correct order should be,

<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-plugin.js"></script>

Reason 4:

If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library. This is incorrect ordering.

<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

Correct order is:

<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>

Reason 5:

If you are loading the jQuery library from any of the CDN (Read Load your jQuery framework from CDN), then please check that CDN link is working. So the best thing is to use code to load jQuery even if the CDN link is down. Read How to load jQuery locally when CDN fails

So there are 3 possible solution for this error.

•  Please ensure that you have included the reference of jQuery library.
•  Please ensure the order of loading jQuery library in case if you are using any other js which is dependent on jQuery library.
• If you are using CDN, then read and implement How to load jQuery locally when CDN fails

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

Various reasons and solutions of jQuery is not defined error

"jQuery is not defined" or "$ is not defined" is a very common error that you may face while working with jQuery or if you have started learning jQuery. The error message "jQuery is not defined" clearly says that it can't find the jQuery and you are trying to access jQuery's power. So in this post, I will cover various possible reasons and their solutions of this error. Below are some common reasons.

Reason 1:

You have forgot to include the reference of jQuery library and try to access it.

Reason 2:

You have include the reference of the jQuery file, but it is after your jQuery code. For example,

//Code Starts
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //Your jQuery code goes here....
 });
</script>

<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
//Code Ends

So in this case, you will encounter "jQuery is not defined" error, as the reference of the jQuery library is after the code.

Reason 3:

The order of the scripts is not correct. For example, if you are using any jQuery plugin and you have placed the reference of the plugin js before the jQuery library then you will face this error. For example,

//Code Starts
<script type="text/javascript" src="Script/jquery-plugin.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
//Code Ends

Above code is clear case of incorrect ordering. As when plugin try to access the jQuery and jQuery is not loaded yet then this error will come. So the correct order should be,

//Code Starts
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-plugin.js"></script>
//Code Ends

Reason 4:

If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library. This is incorrect ordering.

//Code Starts
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
//Code Ends

Correct order is:

//Code Starts
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
//Code Ends

Reason 5:

If you are loading the jQuery library from any of the CDN (Read Load your jQuery framework from CDN), then please check that CDN link is working. So the best thing is to use code to load jQuery even if the CDN link is down. Read How to load jQuery locally when CDN fails

So there are 3 possible solution for this error.

•  Please ensure that you have included the reference of jQuery library.
•  Please ensure the order of loading jQuery library in case if you are using any other js which is dependent on jQuery library.
• If you are using CDN, then read and implement How to load jQuery locally when CDN fails

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...