Category Archives: jquery

Useful JQuery Plugin to Display Errors, Messages, and Alerts: Gritter

Leave a reply

Real estate on your web page could be as important as real estate in real life. You got very little space on your client screen and need to use every inch (or pixels). Errors and messages take up valuable space that could be better used for more important things.

That is why Gritter is a great JQuery plugin – it saves real estate on your page by showing alerts, messages and errors in a floating bubble way, that is both informative and (because you can configure Gritter to fade away after a few seconds) non intrusive:

This image was taken from one of our new site’s design, we decided to use Gritter instead of putting the errors and notification inline.

Check out Gritter’s demo site and project site and, for CakePHP developers, here is an article about integrating Gritter with CakePHP.

It is open source, looks great, easy to integrate, and is very useful!

JQuery AJAX POST Sending Only Partial Data? Try URL Encoding.

2 Replies


JQuery is a great JavaScript framework that makes web developer life much easier. But like all framework, you need to learn its gotchas in order to work effectively with it. Here is one of those gotchas –

Jquery POST method lets you create Ajax HTTP POST request to the server. It is actually a shorthand to the JQuery Ajax method:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1
  +"&param2=paramValue2",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});

The problem

When executing the AJAX call, only part of the data is passed to the server and the rest vanishes. You usually see that some or all of the parameters you tried to pass are missing or cut in the middle.

The cause

JQuery uses ‘&’ as a separator between the parameters. If you have a ‘&’ within your key or value parameters, then the JQuery AJAX request gets really messed up.

The solution

Encode the parameters, replace & with %26 which is the standard encoding for that character.

Semi-Automatic

Use .replace(/&/g, “%26”) –

Here is a working example:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1.replace(/&/g, "%26")
  +"&param2=paramValue2.replace(/&/g, "%26")",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});
Fully Automatic

A more elegant way is to slightly change the way we call the meethod and let JQuery do that encoding for you –

Here is a working example:


$.ajax({
 type: "POST",url: "save.php",
 data: { "param1": paramValue1,
 "param2": paramValue2 },
 complete: function(){ }, //manage the complete if needed
 success: function(){}//get some data back to the screen if needed
});

Make ThickBox Work with Other JavaScript Libraries / Resolve ThickBox Conflict Issues

9 Replies

ThickBox is a cool visualization tool based on Jquery JavaScript library. ThickBox helps you display photos in a cool way and is useful in many web projects.

–

The problem

ThickBox does not work when the HTML pages has other JavaScript libraries such as Mootools.

Debuging the error reveals this:

$(domChunk) is null

Continue reading →

AutoSnippet – automatically generate HTML and javascript code snippets

2 Replies


Code snippets posted online are a great source of knowledge and simple way to share experience and to reuse code. As developers we always look to see if there is a ‘code example’ which we can modify to our needs. As bloggers we find code snippets very useful to get our information out to the readers.

The problem is that creating these code snippets is a complex and cumbersome task. You need you replace all the < with &alt, wrap the code in <pre> and <code> tags and then use a Syntax Highlighter to make our code look nice. Every time we change or fix the code you need to reiterate this process.

AutoSnippet solves this problem by automatically generating the code snippet from the source code (HTML, CSS and Javascript). No more cumbersome repetitive tasks and no more inconsistencies between example and real code.

In this article I will show how to generate automatic snippets for your blog and source/code websites.




 

Usage:

HTML and javascript goes here

1) Example of code and its automatic snippet(with Syntax Highlighter)

The following code snippet on the left is automatically generated with SyntaxHighlighter. As a developer you just write the code and the autoSnippet generates the snippet itself.

Just write

code and the snippet is automatically
generated on the right ->

Here is how it is done:

2) Example of code snippet only (with Syntax Highlighter)

The following code snippet automatically generated with SyntaxHighlighter.
To get the ‘snippet only’ affect you need to put the source div over the target div.
again, as a developer you just write the code and the autoSnippet generates the snippet itself.


Just write

code and the snippet is automatically
generated here!

Here is how it is done:

3) Simple Example – with no Syntax Highlighter:

AutoSnippet can integrate with other Syntax Highlighter. Here is AutoSnippet at its simplest form.

just code 🙂

Here is how it is done:

Auto snippet is easy to use- it is a jquery plug-in and uses SyntaxHighlighter for syntax highlighting. Both of SyntaxHighlighter and jquery are common and well established open source projects. AutoSnippet is easily extendable and is released under the MIT open source license.

download and docs

Formal documentation and download can be found here.