Tech Junkie Blog - Real World Tutorials, Happy Coding!: JQuery

Showing posts with label JQuery. Show all posts

Wednesday, July 13, 2016

ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json

In this blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP.NET Core application. Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side.

Here are the steps to import the client-side dependencies into our project:

1. First let's make bower.json part of the "NorthwindCafe.Web" project, click on the "Show All Files" icon in solution explorer, then right click on the bower.json file, and then choose "Show in Solution Explorer"

2. Open the bower.json file the markup should look like this

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
}

Saturday, June 18, 2016

End-to-End ASP.NET MVC: Adding BundleConfig

In our previous blog we've added a _ViewStart.cshtml layout to our project, which is the default layout for our pages if no layout is specified for the page. In this blog we will add BundleConfig for the JavaScript libraries which includes JQuery, and Bootstrap that we've added to our NorthwindCafe project in the previous blogs. A configuration bundle allows you to group files that belongs in the same libraries together so that they can called with just one line of code. In this blog we will be creating configuration bundles for JQuery, and Bootstrap to the NorthwindCafe project.

Step-By-Step Instructions:

1. Right-click on the folder "App_Start", then select Add → New Item → Visual C# → Class, name the class BundleConfig.cs

End-to-End ASP.NET MVC : Add JQuery Library Using NuGet

In the previous blog we've created an empty ASP.NET MVC project. It's a great starting point but, it's missing a lot things that we will need later. In this blog we will add JQuery to the empty ASP.NET MVC project that we've just created.

Step-By-Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2. Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-toEnd ASP.NET MVC : Add JQuery UI Library Using NuGet

In the previous blog we've added the Bootstrap library to our empty ASP.NET MVC project. Now let's add another commonly used JQuery library to our project. In this blog we will add the JQuery UI library to our empty project.

Step-By-Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2. Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-to-End ASP.NET MVC : Add Bootstrap Library Using NuGet

In the previous blog we've created added the JQuery library to an empty ASP.NET MVC project. In this blog we will add the Bootstrap to the empty ASP.NET MVC project that we've just created.

Step by Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2. Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-to-End ASP.NET MVC : Configure The BundleConfig Class To Use CDN

A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project. That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder. In the previous blog we went over how to create the BundleConfig class from scratch. In this blog we will go over how to configure MVC to use the cdn resource instead of your local resource files.

Step-By-Step Instructions:

1. Open the NorthwindCafe project
2. Open the BundleConfig.cs file under the folder App_Start

Monday, June 8, 2015

End-to-End ASP.NET MVC 5 : Using Conditional Comments to Support Older Versions Of IE

Older versions of IE have problems supporting the newer JavaScript libraries and HTML5 tags. In the previous blog we've created responsive layout in ASP.NET MVC. In this blog we are going to use conditional comments to support older versions of Internet Explorer (IE). Since IE 9 seems to be the cutoff point we will use it in our conditional comment base condition to decide whether we want to do something different to support IE. We will be working with the MvcApp project.

Step-By-Step Instructions:

1. Open the MvcApp application
2. Open the _Layout.cshtml
3. Inside the <head> tag

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <![endif]-->

Thursday, June 4, 2015

End-to-End ASP.NET MVC: Create A Responsive Layout With Bootstrap

In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple. In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size. The previous layout looks like screenshot below.

Friday, May 29, 2015

JQuery : jQuery.noConflict(); Resolve the $ Conflict

The JQuery library by design uses only two global namespace so that it would not conflict with other JavaScript libraries.

$ - the dollar is used as a reference to JQuery namespace

Also used by Prototype library, YUI and mootools

jQuery - is also used to reference to jQuery namespace, this the more unique reference of the two options, but nobody really uses it

So what do you do if you wanted to use jQuey and Prototype on the same page? Well jQuery can concede the $ sign to the other libraries with the code jQuery.noConflict() function

This sample code shows how jQuery gives up the $ sign to the JavaScript library Prototype

Friday, April 17, 2015

JQuery: Search Context Parameter (Select Within A Container)

There's actually two selector parameters in JQuery. The second parameter is the context parameter. The context parameter specify the context that the selector should operate within that context. Let's use the bootstrap form field markup below as an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
  <style>
   .form-label-spacing{
    margin-top: 15px;
   }
   
   .form-group-spacing
   {
    margin-left: 20px;
   }
  </style>
    </head>
    <body>
         <form>
   <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
      <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
  </form> 
    </body>
</html>

Tuesday, April 14, 2015

JQuery Basics : Selecting Attributes

In the previous blog about selectors we've gone over what a selector is. In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element. Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Attributes Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  </script>
    </head>
    <body> 
  <form>
   User ID: <input name="UserId" type="text"><br/>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
    <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/>
   
  </form>
    </body>
 </html>

Monday, April 13, 2015

JQuery: Using Conditional Comments To Support Older Version Of Internet Explorer

A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer. What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to. In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5. Since it's specifically created for Internet Explorer other browsers will ignore it. Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments. Here is the code to use the conditional comments to support older versions of Internet Explorer.

<html
    <head>
        <meta charset="utf-8" />
        <title>JQuery Conditional Comments Demo</title>
  <!-- [if lt IE 9]>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--<![endif]-->
    </head>
    <body> 
    </body>
</html>

Friday, April 10, 2015

JQuery Basics: Selectors

Selectors are at the heart of JQuery in almost every task you want to perform in JQuery, your initial setup is to use a selector to select an element in the DOM to perform some action on it. So in this blog we will show you some the common selectors that you will have to use in JQuery to get the job done.

First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
 </html>

Wednesday, April 8, 2015

Bootstrap: Setup Bootstrap Locally

If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website. Follow the steps below to setup Bootstrap locally.

Step-By-Step Instructions:

1. Go the website http://getbootstrap.com then click on the "Get Started" tab. You will see three choices for download. You want to click the first button that is labeled "Download Bootstrap"

Friday, April 3, 2015

JSON (JavaScript Object Notation) : Using JSON With JavaScript

JSON is becoming the standard way to exchange data in a relatively short amount of time. The reason is because JSON is easier to work with than XML.

JSON Object:

JSON object is made up of name/value pairs

Single Object:

{ "firstName" : "John"}

Wednesday, March 25, 2015

JQuery: Using JQuery CDN Set Up

In this blog I will go over how to set up jQuery for your web pages. There are two methods to using jQuery. The first is the use the CDN URLs that are hosted by jQuery, Google, and Microsoft just to name a few. In this tutorial we will set the CDN from Google. The process should be the same for jQuery and Microsoft CDNs.

Here are the URL for Google's jQuery Library:

1.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

2.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

You might be wondering why there are two versions of jQuery 1.x and 2.x, they both use the same APIs and they pretty much mirror each other on a release basis. The only difference is that the 2.x versions does not support IE 6,7, or 8. Just to be on the safe side I always use the 1.x versions.

Tuesday, October 8, 2013

ASP.NET : WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive)

If you receive the WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery' error, put the following lines of code in the Appliction_Start method in the Global.asax.cs file

        protected void Application_Start(object sender, EventArgs e)
        {
            string jqueryVersion = "1.8.0";

            System.Web.UI.ScriptManager.ScriptResourceMapping.AddDefinition("jquery", 
                                                new System.Web.UI.ScriptResourceDefinition
            {
                Path = "~/Scripts/jquery-" + jqueryVersion + ".min.js",
                DebugPath = "~/Scripts/jquery-" + jqueryVersion + ".js",
                CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery" + jqueryVersion + ".min.js",
                CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery" + jqueryVersion + ".js",
                CdnSupportsSecureConnection = true,
                LoadSuccessExpression = "Window.jquery"
                
            });
        }

The above lines of code registers the jQuery library with the ScripManager. This will get rid of the error, you can do the same this with jQueryUI library.

Previous: ASP.NET: Simulate a Button Click in Code Behind

Next: ASP.NET DropDownList Part 1: Bind a DataTable To A DropDownList

Tuesday, September 17, 2013

JQuery: Infinite Loop Button Click

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" EnableEventValidation="false" Inherits="WebApplication2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
</head>
    <script type="text/javascript">
        
        $(document).ready(function () {
            $("#Button1").click();

        });
    </script>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    
    </div>
    </form>
</body>
</html>

Next: JQuery: Using JQuery CDN Set Up