jQuery.fn.extend function becomes undefined

Question

I needed a "load" function with caching disabled. To do that I wrote:

FileName: RootFoolder/script.js

jQuery.fn.extend({
    loadWithoutCache: function() {
        var element = $(this);

        if (arguments[0] != undefined) {
            $.ajax({url: arguments[0], cache: false, dataType: "html", success: function(data, textStatus, XMLHttpRequest) {
                element.html(data);
            }});
        }
        else {
            console.log("Invalid Arguments");
        }
    }
});

The above works fine when I use it ONCE. However, if I use it a second time, I get loadWithoutCache is undefined.

I am using it like below:

Filename: RootFolder/index.html

<html>
<head>
    <title>Page Loader</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <p>
        Some Text Description<br /><br />

        <b>Choose a page:</b><br />
        <select id="section">
            <option value="1">Page 1</option>
            <option value="2">Page 2</option>
        </select>

        <div id="content">
        </div>


        <script type="text/javascript">
            $('#section').on('change', function() {
                var pages = ["page1.html",
                             "page2.html"];

                var index = $(this).val() - 1;
                $("#content").loadWithoutCache(pages[index]);
            });
        </script>
    </p>
</body>
</html>

FileName: RootFolder/page1.html

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <br />
    <h3>Page 1</h3>
    <b> - Description</b><br /><br />
    <p>
        Some Paragraph
    </p>
</body>
</html>

FileName: RootFolder/page2.html

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <br />
    <h3>Page 2</h3>
    <b> - Description</b><br /><br />
    <p>
        Some Paragraph
    </p>
</body>
</html>

On index page, if I select Page 2 from the drop-down, it works. Then I select Page 1 from the same drop-down, and it gives me undefined.

If I made loadWithoutCache a function and then do $.fn.loadWithoutCache = loadFunc; right after var index = $(this).val() - 1; it will work every time :S

I am just writing this to test how to load an HTML page inside of another page dynamically.

Why is it undefined? What have I missed?

Answer 1

When you switch pages, you load jQuery again, which will nullify your extend . You should not load jQuery again. And although you also load script.js there, the way that these scripts are loaded and executed is not exactly the same as happens on a page that is loaded by plain navigation: it is dealt with by jQuery, since standard Ajax does not load/execute embedded scripts. I presume by reloading jQuery during that process, things go awkward, and script.js does not get executed again.

So: leave out the head tags from your pages page1.html , page2.html ,.... They are not necessary as you have already the scripts loaded.

Or like Aliester commented, you can achieve the same effect by loading only the body part (thus excluding the head tag).

jQuery.fn.extend function becomes undefined

Question

1 answers

solution1
2 ACCPTED 2016-12-15 22:06:21

jQuery.fn.extend function becomes undefined

Question

1 answers

solution1 2 ACCPTED 2016-12-15 22:06:21

solution1
2 ACCPTED 2016-12-15 22:06:21