Tag: Web Development

jQuery ajax

If you want to dynamically load content into your page chances are your going to need to do some sort of request to a server in the background. The simplest way of doing this is to use jQuery's ajax function.

Here's an example of a GET request and a POST request:

1$.ajax({
2    type: "POST", // Set the HTTP type to POST
3    url: "/serviceurl.aspx", // URL of the service
4    data: "{data: [{"Field1": 1}] }", // Data to be posted to the service
5    processData: false, // If set to true the data will be processed and turned into a query string
6    success: (function (result) {
7        // Result of the service call
8    }),
9    error: (function (jqXHR, textStatus, errorThrown) {
10        alert(errorThrown);
11    })
12});
13 
14$.ajax({
15    type: "GET", // Set the HTTP type to GET
16    url: "/serviceurl.aspx", // URL of the service
17    dataType: "jsonp", // Set what type of data you want back
18    success: (function (result) {
19        // Function that will be called on success
20    })
21});

HTML5 Series - Web Storage

One of the best benefits of HTML5 particularly for Web Apps is the ability to store data locally within the users browser. This means in many places you can speed your Web App up by fetching data once and then retrieving it locally in the future, rather than going back to a server each time.

There are 2 types of storage available localStorage and sessionStorage. The simple difference is that localStorage doesn't expire while sessionStorage expires at the end of the users session.

Both types store data in a key/value list and could not be simpler:

1// local storage
2localStorage.variableName = value;
3 
4// session storage
5sessionStorage.variableName = value;

One thing to note though is you can only store text. If you want to store something more complex the simple solution is to convert it to and from JSON. E.g.

1var myColours = [ 'red', 'blue', 'green', 'yellow'];
2 
3// Save to local storage
4localStorage.colours = JSON.stringify(myColours)
5 
6// Retrieve from local storage
7var retrievedColorus = JSON.parse(localStorage.colours);

HTML5 Series - Grid

There was a time when an HTML page layout mainly consisted of tables, and lots of them. Tables went inside other tables and complex layouts were achieved through the use of colspans and rowspans. The only problem though was it was a mess.

By using tables the HTML mark-up was dictating the design/layout of the page and if you ever wanted to change anything it was a huge task to undertake. Since then the world has moved on and now most webpages consist mainly of div's. But what if you did want to quite a rigid layout with columns and rows?

HTML5 introduces the Grid style through CSS. Your page can still consist mainly of div's (or anything for that matter), but in your css you set a display property of grid (for now in IE it's -ms-grid). You can then specify a grid-columns and grid-rows property to create a grid within your div.

Child items can be placed in grid cells through grid-row and grid-column properties in the CSS, and if you want something to span more than one cell you can use grid-row-span or grid-column-span.

If you've done any XMAL programming (WPF/Silverlight/Win8/Windows Phone) then this should all sound very similar to XMAL's Grid control.

The example below creates something like this:

1<style>
2        /* Set a grid with 3 columns and 2 rows */
3        div {
4            display: -ms-grid;
5            -ms-grid-columns:200px 200px 200px;
6            -ms-grid-rows:200px 200px;
7        }
8 
9        /* Position the child div's in the grid */
10        div:nth-child(1) {
11            -ms-grid-row: 1;
12            -ms-grid-column: 1;
13        }
14        div:nth-child(2) {
15            -ms-grid-row: 2;
16            -ms-grid-column: 1;
17        }
18        div:nth-child(3) {
19            -ms-grid-row: 1;
20            -ms-grid-column: 2;
21            -ms-grid-row-span:2; /* The middle cell spans 2 rows */
22        }
23        div:nth-child(4) {
24            -ms-grid-row: 1;
25            -ms-grid-column: 3;
26        }
27        div:nth-child(5) {
28            -ms-grid-row: 2;
29            -ms-grid-column: 3;
30        }
31 
32        /* Add a border to the cells */
33        div>div {
34            border: solid 1px black;
35        }
36</style>
37<div class="myGrid">
38    <div></div>
39    <div></div>
40    <div></div>
41    <div></div>
42    <div></div>
43</div>

It's also worth noting that the column/row sizes can be specified using fractions rather than fixed sizes. e.g. The following will produce a grid 600px wide where the middle column is twice the width of the other 2.

1<style>
2        /* Set a grid with 3 columns and 2 rows */
3        div {
4            display: -ms-grid;
5            width:600px;
6            -ms-grid-columns:1fr 2fr 1fr;
7            -ms-grid-rows:200px 200px;
8        }
9</style>

For another great example check out this hands on page from Microsoft Hands on: CSS3 Grid