Auto-suggest jQuery plugin

3

Category : AJAX, jquery, Open source

What is auto complete and auto suggest?

Auto complete and auto suggest are a user interface feature that extend search functionality. It basically makes it easier and fast for the user to search structured data.

There is sometimes a mixups between Auto complete and Auto suggest. I will try to state what comes to my mind when talking about both. I also share a fix/midification I have done for a cool auto suggest jQuery plugin.
Continue Reading

CakePHP Ajax/JSON calls fail? Try turning debug output off

Category : AJAX, CakePHP, Software development, Tips

ajax CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. CakePHP provides several Ajax features, but if cakephp debug is not turned off, most Ajax calls and JSON encoding would fail.

The problem / symptoms

When calling a server side cakephp method through Ajax calls usualy in combination with JSON encoding, the call fails. The server returns HTTP 200 and everything seems fine, but the Ajax call just doesn’t work.

Continue Reading

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

7

Category : AJAX, Deep Dive, JavaScript, jquery, Software development


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
});

IPWEditor – In-Place WYSIWYG Editor 1.2.1 Released with TinyMCE bug fix and more

Category : AJAX, IPWEditor, New Release, Open source, release, SAAS, Software development, web


IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.

Up until now IPWEditor did not support TinyMCE advance settings, due to a minor bug found and resolved by the community.
This release incorporates this bug fix and adds additional documentation around the ‘cancel’ functionality.

DEMO (TinyMCE)



Click me! I am editable and WYSIWYG!!! (TinyMCE)

Code behind:


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.editable.ipweditor-1.2.1.js"></script>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<div id=”editable” class=”myipwe1″> Click me! I am editable and WYSIWYG!!! </div>

<script type=”text/javascript”>//set all the tinyMCE configuration here and pass it to the editable
$().ready(function() {
var ed = new tinymce.Editor(‘myipwe1′, {
theme : “advanced”

}); $(‘.myipwe1′).editable(
{
type: ‘wysiwyg’,
editor: ed,
onSubmit:function submitData(content){
alert(content.current)
},
submit:’save’,
cancel:’cancel’
});
});

</script>

download and docs

Formal documentation and download can be found here.

IPWEditor – In-Place WYSIWYG Editor 1.2 Released with TinyMCE support

7

Category : AJAX, IPWEditor, Open source, release, SAAS, Software development, web


IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.

Up until now IPWEditor has integrated only with FCKeditor. The major feature in this release is integration with TinyMCE, a popular WYSIWYG editor.

Developers can now choose to run IPWEditor with either FCKeditor or with TinyMCE editor using the same IPWEditor code.

Continue Reading

IPWEditor – In-Place WYSIWYG Editor 1.1 Released

Category : AJAX, Open source, Software development, web


IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.

As reported by some members of the community, due to jQuery issue with IE 7, IPWEditor 1.0 had some issues around IE usability.

Thanks to these inputs and some refactoring around the jQuery limitation, these issues were resolved in this IPWEditor 1.1 release. Continue Reading

IPWEditor – In-Place WYSIWYG Editor with FCKeditor and JQuery Editable

9

Category : AJAX, IPWEditor, Open source, Software development, web


An In-Place editor, such as jQuery Editable plug-in, lets you seamlessly replace texts on web pages with inputs, for on-the-spot editing (see example 1). WYSIWYG editors, such as FCKeditor, provide easy, word-like editor on the web (see example 2). Basically, the two are advanced User-Interface JavaScript tools that help users edit content on the web in an easy, intuitive and productive way.

Wouldn’t it be great if we combine the two to create a really cool, web 2.0 user experience for editing content on the web? Unfortunately, FCKeditor and Editable are not fully compatible and some tweaking is required to make them interoperable.

In this article will demonstrate how, with little modification, FCKeditor can be integrated into Editable to create an In-Place WYSIWYG editor (see example3).

If you want to skip this documentation and just go to download the code and examples you can do so here.

Continue Reading

Add your blog to the World Blog Map

Category : AJAX, blogs, fun

To add your blog please fill this form:


Your Name:



Blog Name:



Blog URL:



Blog (short) description:



Blog image URL (small – 64X64) (optional):



Blogger email (optional):



Coordinates:

(Tip- click on map to automatically set your Coordinates)




Ajax persistent Data Objects – AjaxDo 1.1 released!

Category : AJAX, Java, New Release, PHP, Software development


Release 1.1 adds a fully functional JAVA server-side implementation to the pre-existing PHP server-side implementation. Now, Ajaxdo, AJAX

persistent Data Objects, enables applications can work in a JSP/JDBC environment and port easily from PHP to JAVA and vise-versa.

Code, examples and documentation can be found here.

Tip: Solving the browser caching problem of AJAX applications

16

Category : AJAX, JavaScript, Tips

Browser caching is generally a good thing, why download the same image again and again while you can download it once and save it on the browser? In some cases, however, this is not a wanted behavior.

The problem:
AJAX application tends to frequently ask the server for the same URL (a stock quote, application status and so forth). The AJAX application expect a response form the server while, in fact, after the first request the browser returns the cached page and the AJAX application does not work as expected. Clearing the browser cache or setting “no cache” parameters on the page does not always work.

The solution:
Add a pseudo-random parameter to the URL the AJAX application is requesting. Doing so will fool the browser to think this is a new page that has not yet been cached.

For example, this is how I would add a pseudo parameter to a URL in JavaScript :

var url = “http://mydomain?myParameters=myValues&pseudoParam= “+new Date().getTime();

The Date().getTime(); returns a new value every millisecond (or so), the browser thinks this is a new page that has not been cached and requests the URL form the server.