Ajax call to file with <script> tags

Question

So I have a sample page that works to replicate table layout pages without using the very mobile-unfriendly table features.

Basically I have a page that looks like so:

<html>
    ...
    <body>
    <div type="page">
        <div class="header">
        </div> <!-- /header -->
        <div class="body">
            <script type="text/javascript">
                                $(document).ready(function() {
                                $(".header").load("/common/header.html");
                                $(".body").load("/Example/example-home.html");
                                //Call to superclass function to replace contents after load
                    });
                /*$(document).ready(function() {
                    $.ajax({
                        url: "/Example/example-home.html",
                    }).done(function (data) {
                        $(".body").append(data);
                    });
                });*/
            </script> -->
            </div> <!-- /body -->
        </div class="footer">
        </div> <!-- /footer -->
    </div> <!-- /page -->
</body>
</html>

The file that is being called via ajax looks like:

    <style>
    /* Various CSS Stylings */
    </style>
    <script type="text/javascript">
        /*Populate our scripts upon ajax request
        var sList[0] = ["Color Mutate", "Versatile, Schemebale, string mutation script. Format your text in any color scheme you can dream.", "1.2.0"];
        $(document).ready(function() {
            if (!sList) {
                $(".table").html("<p>No hosted scripts found</p>");
            } else {
                for (var i = 0;i<=sList.length;i++) {
                    $(".script").append(sList[i][0]);
                    $(".desc").append(sList[i][1]);
                    $(".version").append(sList[i][2]);
                }
            }
        }); */ 
                    // moved to main.js
    </script>
    <div class="table">
        <div class="script">
        </div>

        <div class="desc">
        </div>

        <div class="version">
        </div>
    </div> <!-- /table -->

And the ajax call is successful when viewed in firebug, the resulting output looks identical to the example-home.html file, but the browser shows nothing in the <div class="body"></div> section afterwards.

I fear it's an issue with the asynchronous nature of ajax calls, but cannot seem to figure out a viable solution.

EDIT I have also tried doing $(this).append() instead of the $(".body").append() as shown above to no avail as well.

EDIT 2 Updated to working code

check my answer here stackoverflow.com/questions/15148037/… — Josh
– Josh, Commented Mar 1, 2013 at 1:55
Why do you have the javascript in div.body and not at the end of your page? — Popnoodles
– Popnoodles, Commented Mar 1, 2013 at 1:57
@Josh Sigh, guess I won't be able to make it as modular as i would have liked. I guess I'll put it into my base class and execute it after load — Colby R Meier
– Colby R Meier, Commented Mar 1, 2013 at 1:58
@popnoodles Just makes it easier to find later on when I'm adding new interfaces. — Colby R Meier
– Colby R Meier, Commented Mar 1, 2013 at 1:59

Popnoodles · Accepted Answer · 2013-03-01 02:26:37Z

1

A couple of errors in your second page: $(document).ready({...}); needs to be $(document).ready(function(){...}); and var sList[0] = [...]; should be sList[0] = [...];, and there should also be a var sList=[]; declaration, probably made in the first page.

Then, in the first page, add dataType: 'text' and you might find it works fine

$(document).ready(function() {
    $.ajax({
        url: "/Example/example-home.html",
        dataType: 'text'
    }).done(function (data) {
        $(".body").append(data);
    });
});

Oh and drop the <html> tag from the pages you're loading in asynchronously.

edited Mar 1, 2013 at 2:26

answered Mar 1, 2013 at 2:20

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

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

1 Comment

Colby R Meier Over a year ago

Nods, I just fixed the errors as I was searching for it. Now using a combination of .load() and superclass level mod functions was able to get it to work. I have accepted your answer as it fairly close to my final solution. Thanks for the help.

Collectives™ on Stack Overflow

Ajax call to file with <script> tags

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related