I’m pulling out data from my database and displaying this on my webpage, thing is, I’m fairly new at this and I’d like to be able to toggle each table of data which is separated by entry in the database on its own. The layout of the page is as follows:

User:
details of that user in a table hidded in a panel:
&lt div class”panel” &gt
&lt table &gt table here &lt /table &gt
&lt /div &gt

&lt p class=”flip” &gt Click to view users’ details &lt /p &gt

Since this happens iteratively, we end up with as many panel/tables as there are entries, but when I click on one of the panels, all get expanded obviously because they all share the same class name, below is how the javascript bit looks like, can you please assist in this regard?

$(document).ready(function(){
$(“.flip”).click(function(){ $(“.panel”).slideToggle(“slow”); });
});

How do I change this such that only one panel gets to be expanded?

var obj = this;		// Workaround for jQuery's assignment of this in ajax callback

$.ajax({
url:		"ajax/ajx_load.php",
success:	function(data) {
// In this scoope this refers to the ajax settings object. Arghhh! Not what we want.

obj.load_query_cb(data);  // Problem solved! The mecanism we rely on is calld scoop chaining, I think.

},
data:		post_data,
type:		'POST'
});

The code is from a method of my object. load_qeury_cb() is a method of the same object. Now the ajax call works in my OOP code.

in YUIs eventhandling, you can send the scope to the eventHandler to prevent the confusion. It would be great to have a OOP layer over jQuery that won’t manipulate this the same way jQuery does by over-using fn.apply() and fn.call().

Consider this:

var myOwnScope = {
    secret : 'Nobody knows what I am'
};

jQuery.fn.addEventListener = function(type, fn) {
    $(this).bind(type, function(e) {
        fn.call(myOwnScope, e);
    })
}

$('input').addEventListener('click', function(e) {
    console.log(this);
})

What is this? it’s impossible to tell in javascript event handling. I just wished jQuery would take care of that, just as actionscript 3 took care of it from AS2, which suffered the same scoping problems as javscript has.