Appending a circle to an svg using javascript called by php

I have been searching for an answer that will work and have been unable to find one. I have a game map that I am using for an RP guild. I am using the map to display influence which we hold in that game's world. I have no issue displaying the map if I have it all coming through in echo statements in php, however, what I would like to do is only have the influence areas draw on the map as pulled from the database.

I have the following function which works when called from within my .js file:

function drawInfluence(id, x, y, inf, dis) {
    svg = document.getElementById("small_map");
    var pt = svg.createSVGPoint();
    pt.x = x;
    pt.y = y;
    var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    c.setAttribute('id',"c"+id);
    c.setAttribute('r',"15");
    c.setAttribute('cx',pt.x);
    c.setAttribute('cy',pt.y);
    c.setAttribute('fill',inf);
    c.setAttribute('stroke-width','5');
    c.setAttribute('stroke',dis);
    svg.appendChild(c);
}
Copy code

This function works perfect if I call it like this:

$(document).ready(function() {
    $("#small_map").load( function() {
         drawInfluence(1, 150, 150, "red", "blue");
    });
});
Copy code

However, if I use:

$(document).ready(function() {
    $("#small_map").load( function() {
        $.ajax({
            url: 'scripts/inf_map_load.php',
            success: function () {
                // There is nothing to do here right now
            }
        });
    });
});
Copy code

with a PHP file that looks like:

<?php
echo'   drawInfluence(1, 150, 150, "red", "blue");';
?>
Copy code

or like

<?php
echo'   <script type="text/javascript">drawInfluence(1, 150, 150, "red", "blue");</script>';
?>
Copy code

I receive no output at all.

The function is in my .JS file along with my other JQuery callbacks for other functions (which are working perfectly fine.)

I have also tried:

$(document).ready(function() {
    $("#small_map").load( function() {
        $.ajax({
            url: 'scripts/inf_map_load.php',
            success: function () {
                alert("Testing");
                drawInfluence(1, 150, 150, "red", "blue");
            }
        });
    });
});
Copy code

And the circle will draw where it's supposed to as well as the alert popping up I can't use the drawInfluence from this area though because the end goal is to have the the information for the javascript call to be read from a database which contains multiple rows of data which will each have a unique identifier for hover and click events. Writing the entire document using php echo statements works, but is not the most efficient and I would prefer to use callbacks rather than inline svg javascript.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.