Combining several functions
Can someone please help me put this together...?
I have a grid consisting of a bunch of DIVs. What I would like to do is append another DIV to the main row DIV when the main row is clicked. And then load that appened DIV with content from another page using $.ajax method.
Here is what I have for the appending and removing the new DIV (which appears to be working OK with one exception):
$(function() {
$('div:even').addClass('hrow');
$('.row').toggle(
function(event) {
$(event.target).addClass("srow")
.append("<div class='irow'></div>")
},
function(event) {
$(event.target).removeClass('srow').children('div').remove();
}
);
});
And then for the loading I have this function:
function lC(eSel) {
$.ajax({
url: "testdata1.asp",
type: 'get',
dataType: 'html',
cache: false,
success: function(data) {
$(""+eSel+"").empty().html(data);
}
});
}
I can get the load function to work by supplying the ID of the DIV that needs to be populated, but I can't figure out how to do it dynamically when the new DIV is created through the append command.
Thanks!