ASP & jQuery UI: autocomplete with json source (part: 2)

Tweet

In my previous post, I've introduced the creation of an input box with an autocomplete feature. We used jQuery and jQuery UI in order to build the main asp page. Now we need to create the source for the autocomplete items list.
Because the jQuery UI autocomplete widget needs to have a source in JSON format, we have to retrieve the needed data from a database and feed it to the widget in a properly formatted way.
I don't know if you are familiar with JSON. I wasn't. One web site that helped me a bit in checking the output of the source.asp page has been JSONLint. Please refer to it if you need to test your JSON output.

Now, let's see the code needed to get the data and properly format it.
First thing to do is declare some variables:

<%
Dim keywords
Dim keywords_cmd
Dim output 

ASP & jQuery UI: autocomplete with json source (part: 1)

Tweet

I've been struggling with the idea of implementing a form with autocomplete features quite a lot. I just wanted to use jQuery and jQuery UI with an asp page which will output a JSON file to be used for the autocomplete list. As you may know jQuery UI has an autocomplete widget, so we do not really need to reinvent the wheel.

I must admit that I don't know much about JSON and so I had to understand it first. In addition, the jQuery UI documentation is not really helpful because it mainly focus on the jQuery part of code (which is quite obvious). Anyway I managed to make it work at very basic level. This post and the one that will be published after it, will explain how to do it.

First of all, let me make a list of things we have to consider:
1) we need to use jQuery and jQuery UI;
2) we will create an asp page with the input box which will have an autocomplete feature;
3) we then need to create another asp page that will output items for the autocomplete input box. The output will be in JSON format.

In the following article we will deal with point 1 and 2. The next post will explain point 3.

Ready? Go!

HTML5: The importance of !DOCTYPE

Tweet

As our beloved W3C site states:

"When authoring document is HTML or XHTML, it is important to Add a Doctype declaration."

And you perfectly know why... don't you?
Ok... for those of you that don't know why, here's the explanation:

"There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. [...] Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document. [...] with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" rendering mode."

As you can see it's definitely not trivial. But why am I talking about it? Well, it has to do with HTML5.

CSS: Layer styles

Tweet

Following similar articles about online CSS tools, today I would like to share Layer Styles.
The web site has a simple graphical interface with sliders and selectors where we can insert parameters and see the results of our choices with a screen preview. The possibilities are quite interesting and the customizable parameters are surely the most used for most web developers. The resulting CSS style can be then copied for our personal use.

Let's see what we can do in depth.

The end of holidays...

Tweet

...always comes when you start enjoying it.
I had three complete weeks of vacation. That doesn't mean I haven't worked, but it is quite clear that The web thought hasn't been my first thought lately.
Starting next wednesday, I will publish new articles...

Ok, ok, I know... this is just a filler... yes, it is. I'm guilty...

ASP: some simple advices to obtain well organized pages

Tweet

When coding a new ASP page, there are some simple things to keep in mind. While our creativity shouldn't be blocked, there are some rules that - if followed - might increase the performance of our newly created page. Some of these ideas are just general advices that can be useful. Others are more imperative, and should be carefully considered almost as laws.
Anyway, let's see them one by one and then you can comment, say what you think and maybe add some other ideas that I might have forgotten.

CSS: padding vs margin

Tweet

What is padding in CSS? And margin? What's the difference?

I know that the subject is very basic, but recently I noticed that people tend to confuse them, use them together (which is ok) or switch from one to the other without knowing why. Sometimes using them  - especially with transparent elements - we might not notice the difference between the two properties.

The definitions

Let's start from the beginning.
Margin: it defines the distance between the element and other elements. It's like a surrounding space and determines what's the measure of that space. The margin is outside the object and it is always transparent.
Padding: it defines the distance from the border of the element and its content. The padding is inside the object and it takes its background color.

Today it's complete relax!

Tweet

Today, the 15th of August is the 227th day of the year and there are - only - 138 days remaining until the end of the year.

Today, in most part of the world, it is a non working day. And I respect that.

So, please, bear with me if today I won't publish any new article.

Enjoy your holidays and relax.

Adobe Flash: why am I against it?

Tweet

I started to use Flash as a development tool a long ago. I can't remember exactly when. It was probably in 2001 or so. But I remember that I nearly immediately understood that it was no good for web development. I therefore used it for presentations and marketing media, but not for web sites. Why? Well, I don't know if you're interested in my personal reasons, but maybe they could shed a light around the use/abuse of Flash animations. So, if you're planning to develop something with it, you should take the following facts into account.

CSS: media queries and screen resolutions

Tweet

Today we are going to explore the media queries in CSS. We have already talked about @media, but recently I have used it to create different styles for different target browsers, so I would like to share my experiences.
What is really useful of media queries is that, according to what the user is using to browse your web site, you can change things to fit the target screen resolution. For example, when a user is using a smartphone or a tablet, you can change how the main menu is displayed: from a long series of links to a drop down menu.

But what are media queries? Let's see them.

Blog Ranking (part 5) - Technorati & Alexa

Tweet

It's been a while since I've been writing about blog ranking. It was something I tried to understand more a year ago, when The web thought was newly born. Now, it is still a general interest for me - web site ranking and positioning is always important for a web developer. In any case, I would like to share some thoughts specifically about blog ranking and two tools which are often cited as very important and valuable: Technorati and Alexa.

Virtual Server: please save me from complete disaster!

Tweet

A few days ago I had a terrible experience. The server I manage has two virtual servers. One is the domain controller, while the other is just the Antivirus server and spam filter for Ms Exchange.
In the morning, I arrive early at the office, smiling as usual (that's almost a lie, but sounds professional). A few minutes later a colleague enters my office: "The telephone is not working." I check mine and it's completely dead. After a second my pc is dead as well: a power outage!

JavaScript: the good old window.open (with a trick)

Tweet

The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.

The opening

First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:

<a href="javascript:void(popupImg('images/gallery/big/01.jpg'))"><img src="images/gallery/small/01.jpg" alt=""></a>

When the user clicks on the image, the popupImg function will be called.
If you prefer, we can use the onClick event:

<img src="images/gallery/small/01.jpg" alt="" onClick="popupImg('images/gallery/big/01.jpg')">

It's time for a little vacation (and a gift)

Tweet

Today I'm on vacation. Yes! Even The web thought goes on holiday... Last year I suspended for a while the publishing of new articles. This year I plan to do it differently, but - as you may understand - vacation means relaxing and getting away from ... ... well ... thinking. I'm going to switch my brain off and enjoy my family (my two little kids will eventually drain all my forces during this period).

I'm planning to publish articles as usual during a two weeks period. At the same time, the posts won't be too much on the technical side, but lighter or of general interest.

In the meantime if you would like to have all the post published on The web thought during its first year of existence, please leave a comment in the section below with your email; I will send you the pdf  as soon as possible.

So, please enjoy your summer and see you soon!