Category Archives: Ajax

JQuery AJAX beforeSend Error

Today I have came by a very strange behavior that was blocking up a dialog to show just prior to the ajax to load. The ajax was binded to a click event and on the ajax beforeSend I had:

$('.dialogModal').dialog();

In theory the beforeSend event will be triggered every time for the ajax call, but, if you have async: false in the ajax call, this will never work for Chrome and IE. Reason is that the beforeSend for both Chrome and IE happens after the ajax is completely done and at that point, my  afterSend took over and closed the dialog.

Off course changing it to async: true will make the dialog to open immediately, but it is not on every ajax request that you want to make it async: true. Take for example when you really want block everything else until the element is fully loaded.

Anyway, there are several ways to solve the issue but if async:true works for you, that is all you need to do.

Advertisements

Using the Facebook Javascript SDK

I have been messing with the FB API’s for a while to get that counter customized for us. The more I messed with the API’s the more I got the feeling that FB is not quite sure what is doing.

The Javascript API that we seen is the new Javascript API and it seems it is on Alpha release. The good thing is that with it we wont need anymore that .htm verification file for running cross-domain javascripts, but the bad part is that currently Goal uses for the fan badges the old javascript API.

New: http://developers.facebook.com/docs/reference/javascript/
Old: http://developers.facebook.com/docs/reference/oldjavascript/

I found a comment saying that if we are currently wanting to use the new API (Javascript SDK) we should fully remove the old references from the site and since it is on Alfa release the data functionality are still not ready. Besides this I was getting error after error when using the new API even after removing all old references from the application.

http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library

The best way to keep track of the Javascript SDK from Facebook is by following the issues list at: http://github.com/facebook/connect-js and by checking on the FAQ. There is a lot of good information there.

Just a note, the Wiki is being deprecated. All the information that we should look are under the developers.facebook.com/docs.

Playing with the API’s, I have created a custom AJAX call using JQuery and JSONP. the JSONP allows a cross-domain request from Jquery AJAX and with that I was able to correctly execute a query using FQL.

The query is a parameter given to a url (http://api.facebook.com/method/fql.query?query=QUERY.) and it will return in either XML or JSON format.

Anyway using the query is pretty simple and if you want to give a test run of the results format before doing anything the best place is:

http://developers.facebook.com/docs/reference/rest/fql.query

There is one annoying bug that I could go through with the new SDK, the SDK wont bootstrap giving an error at line 3. I think is related to cookies and the old API. I will still give a search on that and when I find the solution, I will place it here as an update.

Have fun.


Dynamic Design

I was searching for a Jquery plugin today when I bumped into this Blog. What did call my attention on this blog was the mouse over event that is on the header (the guy cartoon) of the blog.

With  very little, it brings a very cool dynamics to the site, making it much more interactive.

Besides being a great place to search Jquery stuff, this has a top A interactive design. Check it out: http://marcgrabanski.com


Context menu disable with JQuery

I have found a ton of tutorials teaching how to disable the context menu on browsers and in all of them I have found one flaw:

Does not work with Opera

It’s an anoying situation that got me thinking and searching for a solution through most part of the day and with no luck.

The function is simple:

$(document).ready(function()
{
$(document).bind(“contextmenu”, function(e)
{
return false;
});
});

and it works with (tested):

and it does not work with (tested)

After a lot of research I have found why it does not work with Opera:

Opera (9.5) has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

You can try to disable by disabling the mousedown event filtering only for Opera, but I do suggest a lot testing on this.

To complete just an extra note: this function does not bind the documents inside an iframe, so in this case you should complete the function by disabling the context menu in the iframe document as well.


Creating your own Javascript AJAX Request

Using Javascript to post variables to another script and process them is not something new. Posting by AJAX with nowadays libraries is also not new, but what about you creating your own javascript AJAX handler.

The first thing you need to know is about using the Javascript XMLHttpRequest.  It’s very simple object that will allow you to submit via get to anohter script and retrieve the response for it. For more information about this object you can always check W3Schools.

Creating your own script will need 4 required parameters:

  • form name
  • action of the form (script where you will be posting to)
  • parameters or variables to be sent
  • callback function to process the result

With this in hand you can create your function and submit the variables to your script using your own AJAX function.

You will need, for that, a script similar to this one:

var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest(); // creating the object
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType(‘text/xml’);
http_request.overrideMimeType(‘text/html’);
}
}
else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”); // creating the object for IE
}
catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”); // since it can work differently through versions, using the try catch event for Javascript will force IE to always create the object.
}
catch (e) {}
}
}
// got this test from other site, but don’t remember where….
if(!http_request){
// something did not work right
alert(‘Unable to create an HTTP request instance.’);
return false;
}

// if callback is not a function it will create one so the onreadystatechange from the get the parameters
callback = callback || function(){};

// creating the AJAX call
http_request.onreadystatechange = function completeAjaxRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// everything worked as it should
result = http_request.responseText;
// process the result by a callback function
callback(result);
return true;
}
else {
alert(‘There was a problem with the request.’);
return false;
}
}
};
// sending the parameters through the created object to the script
http_request.open(‘POST’, action, true);
http_request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http_request.setRequestHeader(“Content-length”, parameters.length);
http_request.setRequestHeader(“Connection”, “close”);
http_request.send(parameters);
return true;

Off course you need way more validation and testing to see if everything is working as it should, but this will kick start it.

Tip:

Create a function that will alert an error or write in console if you are using Firefox with Firebug. This will help to handle and troubleshoot your functions.

All you need is a simple test:

var type = typeof(console);
if(type == ‘undefined’) {
alert(message);
}
else {
console.log(message); // firefox with firebug only
}

Have fun.


Ban IE from the Planet

Ok, the mistake was mine, but let’s faced it, IE (Internet Exploer) is not even close to be ready to the Web 2.0. I was doing a common Javascript with form submission, so I had a javascript code like this:

function submit_form(){
document.form1.action = ‘postHandler.php’;
document.form1.enctype = ‘multipart/form-data’;
document.form1.target = ‘theHiddenIframe’;
document.form1.submit();
}

My form code was like this:

<form id=”form1″ name=”form1″>
<input type=”button” value=”upload” onclick=”form_submit()” />
<input type=”file” value=”” name=”uploadfile” />
</form>

On Firefox it will work perfectly, but on IE it will send the file as string.  What was happening is that on IE you must set the enctype on the form tag because it will not accept the tag to be set dynamically.

Easy fix and now everything is working, but stop and think about this a second: Now with AJAX and new Javascript resources why would you set every attribute of a form tag, besides the name and the id?

Anyway, if you have gone through the same problem this might be one solution.

Have fun.

Update: I got this from a friend of mine. You can set the enctype dinamicly on IE, but you need to use:

document.form1.encoding = ‘multipart/form-data’;



Javascript Smart element setter

This is a small function to help anyone that uses a lot of  the infamous “document.getElementById(‘id’)” in Javascript coding and with some small modification you can make this function even better.

The function will get an id as parameter and return the document element refering that id. Is simple as that and it can make your code more readable and easier to work. The only detail is, do not use it if you is already using JQuery or any other Javascript framework that have a similar method.

<script type=”text/javascript”>

function $(id){
var element;
if(null != document.getElementById(id)){
element = document.getElementById(id);
return element;
}
return false;
}

</script>

A small use for this function would be something like this:

<input type=”text” id=”text1″ name=”text1″ value=”” />
<input type=”file” id=”file1″ name=”file1″ value=”” onchange=”$(‘text1’).value = $(‘file1’).value;” />

Have fun.


Posting Files with AJAX

robot-geek

Well it’s not actually AJAX, but mimics very well.

Consider a scenario where you need to submit files using AJAX because the files are too large to be handled by normal posting and the user would try to cancel the file post while he waits. You could consider the same scenario but with you wanting the user to do something while he waits for the file upload.

As you probaly know, posting files through AJAX is not that easy, but, there is a very simple trick that you can use with very simple Javascript: POST to an IFRAME.

The first time that I have heard about this I tought that was very weird, but you know, why not give it a try.

To post to an Iframe is simple. Create your FORM as you would usally do and add a TARGET attribute to it with the IFRAME NAME set on it. Now create the IFRAME with the DISPLAY and VISIBILITY style set to none and hidden and add set the WIDTH and HEIGHT to 1px each.

Add a submit button on the form and you are good. Everything inside the form will be posted to the IFRAME, but for the user, it will be like he had never left the page.

Simple cool trick.

For faster help, here is the code:

<form id=”frm” name=”frm” method=”post” action=”postHandler.php” enctype=”multipart/form-data” target=”postIframe”>

<input type=”file” name=”myFile” id=”myFile” value=”” size=”30″ /><br />
<input type=”button” id=”btnSubmit” name=”btnSubmit” value=”Upload File” onClick=”document.frm.submit();” /><br />

</form>

<iframe name=”postIframe” id=”postIframe” style=”width:1px; height:1px;display:none;visibility:hidden;”></iframe>


JQuery

I have been working with JQuery for a while and it is by far one of the easiest and strongest Javascript Frameworks that I have worked with.

The process is simple:

  • include the JQuery js files (all that you might need)
  • Work with Javascript as it was never so easy

Let’s take an example (a very simple one, but pratical – almost everyone that I know have to work with AJAX).

Consider that we need a function to request (AJAX) an information from a helper file (a PHP script that will perform whatever you need it to do) and print it’s results on a div box.

The function would be something like this:

<script>

function getHelloWorld(input1,input2){

/* Changing the current content with something new */
$(“#theDiv”).html(“Wait while loading the requested information”);
/* How about changing the css a bit */
$(“#theDiv”).css(“height”,”300px”);

/* Performing the AJAX request that will get the helper result and place it inside the “theDiv”  innerHTML */
$.post(“helpers/loadNewInfo.php”,{action:’new’,input1:input1,input2:input2},function(result){$(“#theDiv”).html(result); alert(‘cool it worked’); $(“#theDiv”).css(“height”,”500px”); } );

}

</script>

Now let me give a little bit of a “zoom” at the AJAX request.

$.post(
“helpers/loadNewInfo.php”,
{action:’new’,input1:input1,input2:input2}, /* the post variables and it’s values that will be sent to the loadNewInfo.php file */
function(result){
$(“#theDiv”).html(result); /* callback function body */
alert(‘cool it worked’);
$(“#theDiv”).css(“height”,”500px”); /* playing a bit with the css, maybe we could place it yellow background */
}
); /* Here the $.post is ending */

As you can see working with JQuery is very simple. You will access the elements by $(“#elementID”) (or name I really don’t remember right now) and every property from it as an object modifier preceeded by a dot.

With inputs you can work the attributes from it using the attr clause.

Anyway, I’m far from being an expert from this, but It’s a simple example for those who are starting with JQuery. Right now I’m using JQuery to work with a Shopping Cart. It’s a nice way to paginate and display products without having the user post back every time and the best of all I can control CSS elements with it.

For more reference, go to: JQuery Code

P.S. If you are used to perform hard core Javascript DOM manipulation, JQuery will be a piece of cake for you.


%d bloggers like this: