Tag Archives: jquery

AJAX dataTypes in jQuery. Format and access.

javascript, micro tutorial, , ,

AJAX calls in jQuery

Just because I don’t want to write the same content twice, I’ll say that in jQuery the AJAX calls can be done by various ways, because there are many wrappers that helps you do this job depending of what you want from your application. However you can find more about $.ajax which is the main topic of this post in my previous post, where I described really in breve what it does and how it does it. Yet again just to be correct I’ll add that you can find more, of course, on the docs page of jQuery about AJAX.

Supported data types by $.ajax

In fact the $.ajax object according to the docs page support a large set of options that can specify the custom type of call you’d like to use in your application. Continue reading AJAX dataTypes in jQuery. Format and access. →

$.ajax in jQuery

javascript, micro tutorial, , ,

AJAX and jQuery

Just in breve as a powerful JavaScript library jQuery wraps the ability to call XHR within a built in interface. There are several ways to implement asynchronous calls. In fact you can call either .load or .post to perform custom calls.

$.load

In the case of .load you can chain it on every returned object from a custom jQuery selector: $(‘div’).load(.. than the content of the DIV is filled with the returned text.

But what if I want a OK and Error handlers?

The .load method doesn’t give such “complex” functionality. Than the built in $.ajax method comes in help. You can specify the URI, method, data, dataType, onSuccess, onError handlers, etc. Continue reading $.ajax in jQuery →

Event driven programming with jQuery – (part 4). Simple event driven app.

javascript, micro tutorial, , , ,

The sample app

In my last post from the event driven programming with jQuery series, I simply will post a sample application. In my previous post I showed up the use case for a tab panel, which can be done typically with no custom events, and almost every developer would do it that way, but however just for the purpose of this series I’ll separate the logic into two modules. One for the tabs and one for the content. Thus you can separate the application into two simple apps into two different pages, and they will continue to work correctly.

In fact most of the large JavaScript applications use that technique and I was inspired to write these posts from one talk of Nicholas Zakas, a Yahoo! front end developer, where he uses YUI, of course. But anyway this technique can be done with everyone of the major JS libraries like jQuery.

You can see the demo and the source here.

If there are any questions about it, don’t hesitate to post your questions and I’ll be glad to help.

Event driven programming with jQuery – (part 3). What is a module?

javascript, micro tutorial, , ,

What is a module in one web page is may be not the correct question. Everything depends on how you understand the module. Let’s assume there is a tab panel on the page. This can be implemented simply by one UL and one DIV. In a sample app just clicking on a LI the the DIV content changes with appropriate content. Such tab panels can be seen almost on every site. See the homepage of Yahoo!. There are at least two tab panels, and to be exact every simple menu is like that, right? You click on an item and something on the page changes.

So a simple tab panel can be a single module and most often it is. But for this example let say the tab panel is composite of two modules. One for the UL > LI tabs and one for the DIV containing the dynamically loaded content.

And now comes the tricky part. What these two modules do, and what they are supposed to do. In one hand the main strategy is to think about them if they must work on a separate pages. If there is one page only with the UL and another with the DIV. They must continue to work correctly. Continue reading Event driven programming with jQuery – (part 3). What is a module? →

Event driven programming with jQuery – (part 2). Events in jQuery.

javascript, micro tutorial, , ,

Well the “native” events in JavaScript are ‘onlick’, ‘onmouseover’, etc. I’m pretty sure that the term ‘native’ is not quite descriptive. OK. However even this can be called event driven programming.

The jQuery as usual simplifies the usage of this events and their handling. If you’ve some DOM with id ‘a’, i.e.:

document.getElementById('a').onclick = func();

In jQuery this comes with no browser dependencies, like:

$('#a').click(func);

That normally means that on click of that element, with id ‘a’, calls the func() method.

The need of event driven programming with JavaScript and jQuery is because in large scale applications you don’t need only click events. You’d like to call some method to be called on array change, or on style change or whatever! Than you can start using custom events, where jQuery again helps you a lot.

I’ll demonstrate in my next post how this can be implemented in a short example application.