Appending a circle to an svg using javascript called by php

Question

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);
}

This function works perfect if I call it like this:

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

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
            }
        });
    });
});

with a PHP file that looks like:

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

or like

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

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");
            }
        });
    });
});

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.

Answer 1

After playing around with it some more I found that placing an empty div tag with an id and using the following code I was able to get the script to do what I wanted though it draws the influence areas before the map finishes loading. Not a big issue but not aesthetically pleasing either.

In my .JS file:

$(document).ready(function() {
    $("#map_load").load("scripts/inf_map_load.php");
});

My PHP file

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

And the empty div which made it work

<div id="map_load"></div>

I still don't know if this was the best way to do what I needed, but it's working now and that was more important at the moment. Appreciate the replies I did get.