Scott Scott - 5 months ago 8
Javascript Question

Activate jQuery/Javascript Function on Page Load

I'm trying to run a javascript/jQuery function on two seperate tables once they have loaded, I have tried adding an event hadler to the tables HTML.


I have also tried the document ready function I'm getting really confused.


The only method that seems to work is the click event handler which isn't ideal for my situation.


I'd just like the function to run once for each table on page load, please take a look at the following jsfiddle as you can see there are two tables which take advantage of this function.

I'd like each of them to populate there filter on page load but the document ready function wont work for some reason - I think maybe it's something to do with there being two tables.

Heres the javascript and jQuery im using:


function filterItems(e) {
var items = [];
var table = '';
tableId = $(this).parent().parent().attr('tag')

var listItems = "";
listItems += "<option value='0'> -Select- </option>";
$('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
var itm = $(this)[0].innerText;
if ($.inArray(itm, items) == -1) {
listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";

$('div[tag="' + tableId+ '"] .filter-gift').html(listItems);

$('.filter-gift').change(function () {
var tableIdC = $(this).parent().parent().attr('tag');

var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
$('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
else {

Can anyone tell me how to run the function on each table without having to interact with it on page load. Thanks - I have left out the other scripts im using to make it clearer.


$(document).ready(function() {