How to use JavaScript function after jQuery.load()?

Question

I'm trying to call the draw() function when my "#livemap" li element is clicked. The $("#livemap").click() works fine but draw() doesn't.

draw() does work fine when I start the app with the html from livemap.php inside "#content" instead.

This leads me to believe that the document.getElementbyId("a") in draw() doesn't yet know that "a" exists in the HTML... So what do I do about it?

index.html:

<head>
    <script>
        draw(){
            var a = document.getElementById("a");
            var b = a.getContext("2d");
            var mydiv = document.getElementById("canvascont");

            ...
        }
    </script>
    <script>
        $(document).ready(function(){
            $("#livemap").click(function(){
                $("#content").load("livemap.php");
                draw();
            });

        ...

    </script>
</head>
<body>
    <!-- Title image and nav bar here-->
    ...
    <li><a id="livemap"><img  src ="images/icons/1429420112_icon-map-128.png"/>Map</a>
    ...

    <!-- My main content-->
    <div id="container">
        <div id="content">
        </div>
    </div>
</body>

livemap.php:

<div id="canvascont">
    <canvas id="a" width="300" height="300"></canvas>
    <script>
        var a = document.getElementById("a");
        var b = a.getContext("2d");
        b.fillStyle = "#FF0000";
        b.fillRect(2, 2, 10, 10); 
    </script>
</div>

Any direction on how to fix this would be much appreciated!

Oops. My actual code did in fact have "function draw()". I just didn't include "function" when I threw it up on here. — just.some.guy.online
– just.some.guy.online, Commented Apr 20, 2015 at 23:43

acdcjunior · Accepted Answer · 2015-04-20 21:57:05Z

Your draw() function is being called right after the $().load() started, which means it its not waiting until the load completes, and thus cannot yet access whatever the $().load() loads.

So, try:

$("#content").load("livemap.php", function () {
    draw();
});

This will make the draw() only be called after the $().load() of "livemap.php" completes.

Also your declaration of draw() is wrong. Use function draw() { ... } and not draw() { ... }. Here's the end snippet:

<head>
    <script>
        function draw() {                                          // this line changed
            var a = document.getElementById("a");
            var b = a.getContext("2d");
            var mydiv = document.getElementById("canvascont");

            ...
        }
    </script>
    <script>
        $(document).ready(function(){
            $("#livemap").click(function() {
                $("#content").load("livemap.php", function () {    // this line changed
                    draw();                                        // this line changed
                });                                                // this line changed
            });

        ...

    </script>
</head>

I ended up actually having function draw(), just messed up and didn't have it in my code on here. Your other suggestion solved my problem though. Thanks a lot!

Leon Gaban · Accepted Answer · 2015-04-20 21:46:43Z

-1

var draw = function() {}

Also why not combine your scripts?

$(document).ready(function(){

    var draw = function() {
        var a = document.getElementById("a");
        var b = a.getContext("2d");
        var mydiv = document.getElementById("canvascont");

        ...
    }

    $("#livemap").click(function(){
        $("#content").load("livemap.php");
        draw();
    });
....

answered Apr 20, 2015 at 21:46

Leon Gaban

39.4k123 gold badges351 silver badges553 bronze badges

Collectives™ on Stack Overflow

How to use JavaScript function after jQuery.load()?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related