0

The problem is simple. I have a massive javascript application. And there are lot of times in the app where I use code which looks something like this -

$('#treat').html(new_data);
....
....
$('#cool').html(some_html_data);
....
....
$('#not_cool').html(ajax_data);

So what I want to do is, everytime this html() function is called I want to execute a set of functions.

function do_these_things_every_time_data_is_loaded_into_a_div()   
{      
     $('select').customSelect();
     $('input').changeStyle();
     etc.
}

How do I do this? Thank you.

Improve this question
2
  • 1
    Wouldn't it be cleaner to just explicitly call your function from your AJAX success handlers? You could also try using the global ajaxComplete event to post-process the AJAX response, but I don't know if that gets called before or after specific AJAX response handlers. Commented Oct 21, 2013 at 12:23
  • 1
    Wrap html() in you own function which also calls those methods. Commented Oct 21, 2013 at 12:24

5 Answers 5

Reset to default
2

You can use the custom event handlers for that:

$('#treat').html(new_data);

// Trigger the custom event after html change
$('#treat').trigger('custom');

// Custom event handler
$('#treat').on('custom', function( event) {
  // do_these_things_every_time_data_is_loaded_into_a_div
  alert('Html had changed!');
});

UPDATE

Based on answer over here and with some modifications you can do this:

// create a reference to the old `.html()` function
$.fn.htmlOriginal = $.fn.html;

// redefine the `.html()` function to accept a callback
$.fn.html = function (html, callback) {
    // run the old `.html()` function with the first parameter
    this.htmlOriginal(html);
    // run the callback (if it is defined)
    if (typeof callback == "function") {
        callback();
    }
}

$("#treat").html(new_data, function () {
    do_these_things_every_time_data_is_loaded_into_a_div();
});

$("#cool").html(new_data, function () {
    do_these_things_every_time_data_is_loaded_into_a_div();
});

Easily maintainable and less code as per your requirements.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This is probably the best idea, it's clean and decoupled.
@palash, does he need to make this custom call for every happening .html() function? Wouldn't it be pretty lengthy?
Please note that I have a massive javascript application and I cannot go around changing the code like that. What if I have to roll back the changes? It will get very messy. Thank you.
@palash in such case.. don't you think calling the function itself do_these_things_every_time_data_is_loaded_into_a_div() before html() is better rather than creating a custom function ..OP already has that function defined...
@ZachWild: In the above mentioned scenario, you can go with this code over here
1

You can overwrite the jQuery.fn.html() method, as described in Override jQuery functions

For example, use this:

var oHtml = jQuery.fn.html;
jQuery.fn.html = function(value) {
    if(typeof value !== "undefined")
    {
        jQuery('select').customSelect();
        jQuery('input').changeStyle();
    }
    // Now go back to jQuery's original html()
    return oHtml.apply(this, value);
};
Improve this answer

Comments

0

When html() is called it usually make the DOM object changes, so you can look for DOM change event handler, it is called whenever your HTML of main page change. I found

Is there a JavaScript/jQuery DOM change listener?

if this help your cause.

Improve this answer

1 Comment

DOM changes are for all intents and purposes unusable. The old API is deprecated, and the new one is unsupported in IE.
0

You can replace the html function with your own function and then call the function html:

$.fn.html = (function(oldHtml) {
        var _oldHtml = oldHtml;

        return function(param) {
            // your code
            alert(param);
            return _oldHtml.apply(this, [param]);
        };
    })($.fn.html);
Improve this answer

Comments

0

I have a little script for you. Insert that into your javascript:

//@Author Karl-André Gagnon
$.hook = function(){
    $.each(arguments, function(){
        var fn = this
        if(!$.fn['hooked'+fn]){
            $.fn['hooked'+fn] = $.fn[fn];
            $.fn[fn] = function(){
                var r = $.fn['hooked'+fn].apply(this, arguments);
                $(this).trigger(fn, arguments);
                return r
            }
        }
    })
}

This allow you to "hook" jQuery function and trigger an event when you call it.

Here how you use it, you first bind the function you want to trigger. In your case, it will be .html():

$.hook('html');

Then you add an event listener with .on. It there is no dynamicly added element, you can use direct binding, else, delegated evets work :

$(document).on('html', '#threat, #cool, #not_cool',function(){
    alert('B');
})

The function will launch everytime #threat, #cool or #not_cool are calling .html.

The $.hook plugin is not fully texted, some bug may be here but for your HTML, it work.

Example : http://jsfiddle.net/5svVQ/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.