重新加载jQuery和js库

Question

I reload my page using an updatepanel. In my masterpage I do the following.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>  
<script src="App_Themes/Project/js/core.js"></script>
<script src="App_Themes/Project/js/libs/modernizr-1.6.min.js"></script>

When I partially reload a page with ajax (updatepanels), this files are nog loaded. So an slider is impossible to use.

Is there a way to load this files when I do a Ajax call?

Answer 1

You can use this function:

function ReloadScripts() {

    var scriptTag = document.getElementsByTagName('script');
    var src;

    for (var i = 0; i < scriptTag.length; i++) {
        src = scriptTag[i].src;
        scriptTag[i].parentNode.removeChild(scriptTag[i]);

        try {
            var x = document.createElement('script');
            x.type = 'text/javascript';
            x.src = src;
            //console.log(x)
            document.getElementsByTagName('head')[0].appendChild(x);
        }
        catch (e) {}
    }
};​

On ajax call success method, just call this function

$.ajax({
    type:"POST",
    dataType: 'json',
    error: function(data) {
        //do error stuff
    },
    success: function(data) {
        //do success stuff

        // at last call this
        ReloadScripts();
    }
});

Answer 2

Put all your initialization/re-initialization code in a js function call pageLoad() , it gets called on all async postbacks:

function pageLoad()
{
    //do work 
}

$(document).ready() and pageLoad() are not the same!

Answer 3

I think what you need is not to reload the js libraries, you need to call the exact function that applies some property to the some elements which are loaded by your ajax call.

For example:

Your ajax appends some links to page like

<a id="someLink">link</a>

And there is a code that colors this element into blue at a method inside a js library like:

function colorBlue() {
    $("a").css("color", "blue");
}

So here you do not need to reload whole libraries, just call this function after your ajax call:

function makeAjax() {
    //here some ajax method is executed
    colorBlue();
}

And that's it, your needed changes are done inside the library method. PS: You can find which method applies the specific work to your elements by searching the class, tag name or id of the target elements inside js library. There you