JQuery – Sibeesh Passion

Style Or Format JSON Data In JQuery

SibeeshVenu — Tue, 31 May 2016 00:00:34 +0000

In this post we will discuss how we can format or style the JSON you get from the server. Sometimes you may need to show the exact JSON you get from your API or from server in your web page. Normally if you just bind this JSON to any pre tag, it will look like just a straight line. Isn’t it? To overcome this we have an option in jQuery . I hope you will like this.

Background

For the past few months I am working with some Web API projects. As you all know the preferred output of an API is JSON, I am returning JSON from my API. I wanted to show this JSON in a Pre tag as a result, but in a formatted way or stylish way. Here I am going to explain how we can do this.

Using the code

Before getting started, please make sure that you have added the jQuery reference to your page.

[html]

[/html]

Now let us say we are getting a JSON as follows from our API.

[js]
[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]
[/js]

It will obviously looks like preceding when you just append it to a pre tag.

JSON in Pre Tag

Now we will format this JSON string with JQuery Parse and JQuery stringify method as follows.

[js]
var tmpData = JSON.parse(data);
var formattedData = JSON.stringify(tmpData, null, ‘\t’);
$(‘#output’).text(formattedData);
[/js]

Here output is the id of our pre tag which we defined as follows.

[html]

[/html]

Now if you bind the data after the formatting to pre tag, you will get an out put as follows.

JSON in Pre Tag Output

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Change Page Layout Dynamically Using jQuery Layout Plug in

SibeeshVenu — Mon, 22 Feb 2016 09:32:31 +0000

In this post we are going to see how we can change the layout a page dynamically, with out writing any CSS styles for the page. Sounds cool right? Are you afraid of writing the CSS styles which will suit for all the screens like Mobiles, Tabs, Monitors, High resolution? As I am not a good designer, I was worried all the time about the resolution issues whenever I use any custom styles. Here we will be using a jQuery plugin called jQuery Layout and we do have options to set our Footer, Side bar, Header and many more. Personally I liked this plug in , That is why I am sharing some information about this plugin. I hope you will like this.

Download the source code

You can always download the source code here:

Change Page Layout Dynamically

Background

I came to know about this plugin when I was searching for some page layout for my application. Then I just installed it and started using. It is pretty simple to use. You can always download the files from the plug in page here.

Using the code

To start with this plug in, the first thing you are required to do is adding the necessary references. We are going to use three references, jQuery, jquery.layout-latest.js, layout-default-latest.css.

[html]

[/html]

The next thing we need is some div elements, we can set it as follows.

[html]

Content area

Header

Footer

Sidebar

[/html]

Now we will add the scripts.

[js]

[/js]

Here we uses applyDefaultStyles:true, this is for ensuring all the required default conditions/options are being applied automatically. Now if you run your page you will be seeing a layout as follows.

Change Page Layout Dynamically

And this is how your page will look like when you toggle every panes.

Change Page Layout Dynamically WHen Toggling

Following are the key features offered by the development team as they have mentioned in their plug in home page here.

simple to use: powerful but simple syntax is easy to learn

unlimited layout capabilities: 5 regions per layout – unlimited nesting

dozens of options: every aspect is customizable, globally and by region

total CSS control: dozens of auto-generated classes create ANY UI look

extensible: callbacks, methods, and special utilities provide total control

custom buttons: integrates with your own buttons for a custom UI look

collapsable: each pane can be closed, using any UI animation you want

hidable: panes can be completely hidden, either on startup or at any time

resizable: each pane can be resized, within automatic or specified limits

slidable: panes can also ‘slide open’ for temporary access

headers & footers: each region has unlimited headers or footers

hotkeys: can use the cursor-keys and/or define custom hotkeys

use any elements: use divs, iframes or any elements you want as a ‘pane’

compatible with UI widgets: integrates with jQuery widgets and plug-ins

demo mode: set applyDefaultStyles option for a fully functional layout

The developers have provided so many demo of how we can use this plugin, you can always check those here.

That is all, now you can start using this plugin. See the complete code below.

Complete code

[html]

Change Page Layout Dynamically Using jQuery Layout Plug in

Content area

Header

Footer

Sidebar

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Disable Dates In Datepicker

SibeeshVenu — Thu, 12 Nov 2015 06:28:23 +0000

In this post we will see how we can disable some dates in a jQuery datepicker control. We all worked in datepicker controls right? But in some situations we may need to add some validations like to restrict some dates in the picker so that user can not select those and move further. Here we are going to disable all the future Saturdays. I hope you will like this.

Using the code

The first thing you need to do is including the needed files.

jQuery

jQuery UI

jQuery UI CSS

Once you are done adding the files, you need to add a text box in which we are going to implement the picker.

[html]

[/html]

Now we will create an array which contains the list of dates we need to disable.

[js]
var disabledDates = ["2015-11-28","2015-11-14","2015-11-21"]
[/js]

Next we will load the datepicker to our text box.

[js]
$(‘input’).datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate(‘yy-mm-dd’, date);
return [ disabledDates.indexOf(string) == -1 ]
}
});
[/js]

Have you noticed that we are calling a function beforeShowDay, this is used to disable the dates. It will return false if the date exists in the disabledDates.

That’s all we have done it.

Please see the jsfiddle here: Disable Date In DatePicker

Output

Disable Dates In Datepicker

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

a href Columns In Grid

SibeeshVenu — Wed, 11 Nov 2015 14:18:54 +0000

In this post we will how we can customize a column in jQWidget jQX Grid. We will make one of the columns values to a hreaf tag. First we will load the grid from the a custom json data and then we will use cellsrenderer function to format the columns values. I hope you will like this.

Background

We all works in grid controls. Sometimes you may need to customize the grid and its column values. Here I am giving you custom demo of the same. In this article we are going to customize the grid column contents to a href tags.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]

Href Columns In Grid – Sibeesh Passion

Href Columns In Grid – Sibeesh Passion

[/html]

Add the needed references

[html]

[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]

[/js]

Sample data

Following is the contents of CustomData.txt

[js]
[{"LinkName":"Sibeesh Passion","Link":"http://www.sibeeshpassion.com"},{"LinkName":"C-Sharp Corner","Link":"http://www.c-sharpcorner.com"},{"LinkName":"Facebook","Link":"http://www.fb.com"},{"LinkName":"Google","Link":"http://www.google.com"}]
[/js]

As you can find out in the above code we are using cellsrenderer property to call the function columntohref which does the formatting. We are formatting the data as below ,

[js]
$.jqx.dataFormat.formatlink(value, format)
[/js]

Shall we check our output now?

Output

Column values to a href

Complete Code

[html]

Href Columns In Grid – Sibeesh Passion

Href Columns In Grid – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Hoisting In JavaScript

SibeeshVenu — Fri, 06 Nov 2015 12:19:21 +0000

In this post we will discuss the importance and limitations of Hoisting in JavaScript. We all writes client side codes. Right? But few of you might not be aware of the term Hoisting. Hoisting is one of the default behaviour of JavaScript, it is the process of moving all the declarations of the variables to the top of the current function or scope. In this post we will explain this Hoisting in detail with some examples. I hope you will like this.

Background

I used to spend more time with the client side codes rather than server side codes. In my thought is is always good if you do the formation of your data in client side instead doing it in the server side. Client side loops are always faster than the server side ones. As a client side code developer, you must understand the word Hoisting in JavaScript. Here we will discuss that.

Using the code

Before going through we need to know some facts in JavaScript.

Do you know?

In JavaScript we can use any variable before it is declared or a variable can be declared after it is used.

For Example:

The below two scripts will return same output.

[js]

[/js]

And

[js]

[/js]

Limitations of Hoisting

Even though the process of Hosting will move the declarations to the top, there is some limitations too. We will discuss it here now.

Initializing a variable can not be Hoisted or In simple JavaScript Hoists declarations not initializations.

For Example:

The below scripts will give different outputs.

[js]

[/js]

This will give you an output of 6.

And

[js]

[/js]

This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.

So the second example is same as of below.

[js]

[/js]

This will give you an output of NaN.

Hoisting In JavaScript

Conclusion

Since we are all developers, it is always makes things simple. So much complexity in software comes from trying to make one thing do two things. So always declare your variables on top of your function or scope. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Regex to remove a word from a string

SibeeshVenu — Mon, 02 Nov 2015 10:13:52 +0000

In this post we will see how we can remove a particular word from a string entirely in jQuery.

[js]
var newString= oldString.replace(/Unspecified/g, ”);
[/js]

Here I am removing the word Unspecified from my variable oldString.

Please see my other posts related to JQuery here: JQuery Posts

Kindest Regards
Sibeesh Venu

Load Data To Grid On Sroll

SibeeshVenu — Mon, 02 Nov 2015 06:09:36 +0000

In this post we will discuss about how we can load data to a grid on scroll event. As you all know Grid is a main control in every dashboard. Every company uses a grid control for showing reports or any kind of data. Hence it is widely used, it is important that the grid must be loaded faster. So the performance of the grid control matters a lot. Isn’t it? Here in this post we are going to do a task which will increase the performance of the grid since we are going to load the data as per user request (on scrolling down). Sounds cool?. Normally what we do is, we will load all the data to the grid in a head shot, the problem in this manner is, it will take ages to load the full data to grid. Hence the user will close your application and the won’t return back. That is sad thing right? So we will concentrate on the performance part now. I hope you will like this.

Background

I am working in a dashboard application. So for me performance was the main criteria to take care. We have used server side paging to improve the performance. This I will share in my next article. Now we will try to load a client side data on demand. Let us say when ever user scroll down. Sounds fine? Ok let us start then.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Add the needed references

[html]

[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]

[/js]

As you can find out in the above code we are generating the data dynamically using a function declaration generatedata.

Have you noticed that in the grid settings we have given virtualmode: true. This is very important. This property is meant to be used for handling the dynamic data in grid.

And another property you must be aware of is rendergridrows: rendergridrows. This means, we are rendering the grid data on demand. Like when user change the pager or scroll. So we are going to call our generatedata function in the rendergridrows. We are passing the start index and end index to the function, so that the dynamic data won’t be repeated.

[js]
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
[/js]

Once the data is ready, we will pass it to the source object and source object to dataAdapter and finally dataAdapter to grid.

Shall we check our output now?

Output

Load Data On Scroll

Complete Code

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Custom Pager Using prev and next In jQuery

SibeeshVenu — Wed, 21 Oct 2015 10:44:24 +0000

In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create an jQuery ajax call and fetch the data from the database and show. You need to know the basic of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you can not find more functionalities here.

Using the code

First thing you need to do is create a page.

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Then we will apply some CSS, so that it will look nice.

[css]

[/css]

Now add jQuery reference.

[js]

[/js]

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

[js]

[/js]

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Function Declaration And Function Expression

SibeeshVenu — Wed, 21 Oct 2015 00:59:00 +0000

In this post we will see the basic difference between function declaration and function expression in jQuery and JavaScript. Sometimes the developer’s getting confused between these two topics(Shhhh I ma saying about the starters like me). Basically both are same. Only difference is depends on how you handle or treat these two. We will see a basic demo here to ensure the difference between function declaration and expression. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

In my projects I am using both function declarations and function expressions. So I thought to highlight some basic difference between them, so that it may help someone.

Basic Difference Between Function Declaration And Function Definition

Function declarations are loaded first, that is before any codes

Function expressions are loaded when the interpreter reaches that particular line of code.

Basically we can call any code only after the declarations are loaded

We will try to find out this difference with a demo.

Using the code

First thing you need to do is create a page.

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

Now we will create a function declaration as follows.

[js]

[/js]

What will be the output of this?

Function Declaration And Function Expression

Now we will change our script as follows.

[js]

[/js]

This will also returns the same output.

Function Declaration And Function Expression

Now we will create a function expression as follows.

[js]

[/js]

What may be the output of this? We will check it now.

Function Declaration And Function Expression

As you can see, instead of giving an alert it is throwing an error Uncaught TypeError: myFunctionExpression is not a function in the console. It is just because the function expression is not yet loaded. You are trying to call that expression before it loads.

So what we can do to make it work? Simple, just change the script as follows.

[js]

[/js]

Now you will get an alert as follows.

Function Declaration And Function Expression

That is all. I hope you know the difference between function declaration and function expression now.

Complete Code

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Find Browser And Browser Version Using jQuery

SibeeshVenu — Wed, 21 Oct 2015 00:17:20 +0000

In this post we will see how we can find out the browser name and browser version by using jQuery. Here we will be using $.browser property og jQuery which returns the browser information. In this demo we will test this in most used browsers like Internet Explorer, Mozilla, Chrome, Opera. I hope you will like this.

NB: Using $.browser is not recommended by jQuery itself, so that this feature has been moved to the jQuery.migrate plugin which is available to download if the user want. It is a vulnerable practice to use the same. Use it only if needed. It is always better to do not use browser specific codes.

Using the code

First thing you need to do is create a page.

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

As you have noticed I have included http://code.jquery.com/jquery-migrate-1.2.1.js. It is just because this feature is deprecated and moved to this js.

Now you need to write the scripts.

[js]

[/js]

We are appending the browser details to the DOM. So that it is always better to use some CSS to improve the readability.

[css]

[/css]

Now please run your browser, you can see the following output.

Find Browser And Browser Version Using jQuery

Complete Code

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to find out the browser details in client side? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu