Question

I am trying to load Plugins based on the condition as in the below function. But i am unable to do it. Please have a look at the code and let me know the errors in the code..

  function loadPlugin(choic)
  {
    var plugin=choic*1;
    if(plugin >= 1 && plugin <= 3)
    {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr(
            {
                rel:  "stylesheet",
                type: "text/css",
                href: "/cloud-zoom/cloud-zoom.css"
            });
        alert('CSS Loaded');
        alert($("head").html());
        $.getScript('/cloud-zoom/cloud-zoom.1.0.2.min.js', function() 
        {
            alert($("head").html());
            $('.cloud-zoom').CloudZoom();
            $('a.cloud-zoom').live('click',function(e)
            {
                e.preventDefault();
            });
        });
    }   
   }

Thanks

Answer 1

$.getScript should work just fine. Your problem is probably with the CSS. There’s still no browser-wide way of loading stylesheets in a clean way. Your alert('CSS loaded') will always
happen at the same time the CSS loads (if running on localhost) or before it loads (not localhost).

Also, you could load your CSS in a diferent way:

$("head").append(
    $("<link>", {
        rel:  "stylesheet",
        type: "text/css",
        href: "/cloud-zoom/cloud-zoom.css"
    })
);

Another way of achieving this is downloading CSS using a $.get() and then inserting it into
a <style> tag, but that’s no very pretty..