Quick AJAX problem fix

[ardy15jan]

Added a few lines of code to allow calling Selectivizr.init() after a page is loaded via AJAX. It calls selectivizr's init() method and reparses the CSS. I used it in my project at work, thought I'd share :)

[lolmaus]

Why ain't this pulled in yet?

[PikachuEXE]

Author could be busy, just look at the commit...

[stevenvachon]

Maybe the author died?

[PikachuEXE]

@stevenvachon You should check his activity before saying so Also his twitter is even more active

I would consider he has abandoned this if I got no response from him after Chinese New Year Try to tweet him or email him

Related: #80

[stevenvachon]

Ah, well that's good to hear at least. Still a bummer that he hasn't merged this and bower support, 'cuz that's really all we need added.

[keithclark]

This isn't a viable fix for handling modifications to the DOM.

Running selectivizr a second time in this way won't remove any CSS class names applied during the first execution. This means any elements targeted with a pseudo-class that have moved since the first call won't receive the correct style updates. It also means event handlers aren't removed which could lead to memory leaks and ultimately a browser crash if called enough times.

If this works for your individual use cases then carry on using this method but I'm not going to merge this as a fix in this state.

A better fix would be to expose something like Selectivizr.apply() and Selectivizr.remove() methods that add / remove selectivizr DOM modifications and a Selectivizr.referesh() method that calls both methods in order.

[mstephens]

Hello, if you're using Modernizr too, then this seems to do the trick. Admittedly another hack, but a work around at least.

In your Ajax callback, place:

yepnope([{ load: ['ie6!ie7!ie8!/js/libs/selectivizr.min.js'] }]);

[witwit]

Selectivizr.init() is not available anymore? I have a custom ajax loading some content into the page. Simple styling with selector ":nth-child(1)" is not applied on IE8. How do I trigger Selectivizr to re-run after I have loaded some content into the DOM?

[mstephens]

@witwit try the above solution with Modernizr?

[PaolaFalcon]

@mstephens What's yepnope??

The only workaround that has worked for me is: $.getScript( 'js/selectivizr.js', function( data, textStatus, jqxhr ) {}); But I don't want to do that!

[lolmaus]

YepNope is a tiny lib to conditionally load other libs. Modernizr bundles it but it can also be downloaded separately: http://yepnopejs.com/

[PaolaFalcon]

@lolmaus Got it, but @witwit solution only works once.

By popular demand, in yepnope 1.5+ we added the feature that scripts that have already been requested not be re-executed when they are requested a second time.

But I need to refresh it again.

[ghost]

Combining the patch here with the following does the job for me (preventing memory leaks). Use this function to be able to remove classes from an element by regular expression

(function($) {
    $.fn.removeClassRegEx = function(regex) {
        var classes = $(this).attr('class');
        if(!classes || !regex) return false;
        var classArray = [];
        classes = classes.split(' ');
        for(var i=0, len=classes.length; i<len; i++)
            if(!classes[i].match(regex)) classArray.push(classes[i]);
        $(this).attr('class', classArray.join(' '));
        return $(this);
    };
})(jQuery);

To keep changes to Selectivizr to a minimum I then use the following

$("*").removeClassRegEx(/^slvzr-/);
Selectivizr.init();

This could all be combined of course. The key here is it removes all the slvzr-* classes from all elements and then initialises Selectivizr.

[lolmaus]

Thank you for your valuable contribution, @jasonmarston.

[sferguson12]

Adding to the update from @jasonmarston , I've created a solution to automatically reapply Selectivizr whenever an Ajax request completes under jQuery. I put his two lines of code into a function, and registered that with the .ajaxSuccess global handler. Works beautifully.

function refreshSelectivizrCssForIE() { $("*").removeClassRegEx(/^slvzr-/); Selectivizr.init(); }

And in the <head>:

<!--[if lt IE 9]> <script>$(document).ajaxSuccess(function() { refreshSelectivizrCssForIE(); }); </script> <![endif]-->

Now any time I load Ajax-based content it is properly styled in IE8.

[corysimmons]

@keithclark disappeared so I'm going to try and maintain this project at https://github.com/corysimmons/selectivizr2

Would you please reopen/rebase your PR over there?