Fire function on loaded elements with particular class without events

Question

I am using the combination of a data attribute and class name to fire a function to modify the content of the element with the particular class name.

Below function fires at $(document).ready

$('.accessControlled').each(function(){
        var accessLevel = parseInt($(this).attr("data-accesslevel"));
        if((user.role !== 0) && (accessLevel !== role)){
            $(this).remove();
        } else {
            $(this).removeAttr('data-accesslevel');
            $(this).removeClass('accessControlled');
        }
    });

Now I want to fire this function, on elements returned by ajax calls too. I know I can bind the functions permanently by jquery on(), live(), delegate(), etc, but which event to use and how to go about it?

There are multiple ajax calls and this is global level setting on the application. So I would like to find a way if possible, where I dont have to call the function after each ajax call. — lal_bosdi, Dec 05 '13 at 00:34

score 0 · Answer 1 · answered Dec 05 '13 at 00:31

0

Just execute the code above against returned code:

eg:

function doit(obj){
    $(obj).each( // rest of your function
}

// ...

$.get(...).done(function(data){
    var obj = $(data);
    doit(obj);
    // rest of your injection
}

answered Dec 05 '13 at 00:31

eRIZ

1,477
16
32

There are multiple ajax calls and this is global level setting on the application. So I would like to find a way if possible, where I dont have to call the function after each ajax call. – lal_bosdi Dec 05 '13 at 00:33
You should redesign your application because it's not a good way. Therefore, you have two solutions: 1) inject some callbacks on the jQuery's methods, 2) monitor DOM changes: http://stackoverflow.com/questions/648996/how-do-i-monitor-the-dom-for-changes / http://stackoverflow.com/questions/5416822/dom-mutation-events-replacement/ But I recommend you rewriting your app. – eRIZ Dec 05 '13 at 00:35
Found the Solution. $(document).ajaxSuccess(); I can call the above function doit, so I don't have to call it every-time individually. – lal_bosdi Dec 05 '13 at 00:50

StackSlave · Answer 2 · 2013-12-05T00:45:37.303

0

Try this:

// obviously user.role and role must be defined for this to work
function access(){
  $('.accessControlled').each(function(){
    var accessLevel = parseInt($(this).attr("data-accesslevel"));
    if((user.role !== 0) && (accessLevel !== role)){
      $(this).remove();
    }
    else{
      $(this).removeAttr('data-accesslevel');
      $(this).removeClass('accessControlled');
    }
  });
}

// assign each ajax call to a variable
var ajx1 = $.post({/*object stuff here*/});

// put the ajax variables in an Array
var ajxA = [ajx1, ajx2, ajx3, ajx4, ajx5, ajx6, ajx7];
$.each(ajxA, function(i, v){
  v.done(access);
});

edited Dec 05 '13 at 00:45

answered Dec 05 '13 at 00:40

StackSlave

10,613
2
18
35

There are multiple ajax calls and this is global level setting on the application. So I would like to find a way if possible, where I dont have to call the function after each ajax call... – lal_bosdi Dec 05 '13 at 00:41

score 0 · Accepted Answer · answered Dec 13 '13 at 10:41

0

There is a function ajaxSuccess in jQuery which can be used to do something after all ajax calls.

 $(document).ajaxSuccess(function() {
                accessControl.checkAccessControl();
    });

answered Dec 13 '13 at 10:41

lal_bosdi

163
3
13

Fire function on loaded elements with particular class without events

3 Answers3