Добавление круга в svg с помощью javascript, вызываемого php

#javascript #php #jquery #ajax #svg

Вопрос:

Я искал ответ, который будет работать, и не смог его найти. У меня есть игровая карта, которую я использую для гильдии RP. Я использую карту для отображения влияния, которое мы оказываем в мире этой игры. У меня нет проблем с отображением карты, если у меня все это проходит в операторах echo на php, однако я хотел бы, чтобы на карте отображались только области влияния, извлеченные из базы данных.

У меня есть следующая функция, которая работает при вызове из моего файла .js:

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

Эта функция работает идеально, если я назову ее так:

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

Однако, если я использую:

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

с помощью PHP — файла, который выглядит следующим образом:

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

или как

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

Я вообще не получаю никаких выходных данных.

Эта функция находится в моем файле .JS вместе с другими моими обратными вызовами jQuery для других функций (которые работают отлично).

Я также пытался:

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

И круг будет нарисован там, где он должен, а также всплывающее предупреждение.Я не могу использовать влияние рисования из этой области, хотя, потому что конечная цель состоит в том, чтобы информация для вызова javascript считывалась из базы данных, содержащей несколько строк данных, каждая из которых будет иметь уникальный идентификатор для событий наведения и щелчка. Написание всего документа с использованием инструкций php echo работает, но не является наиболее эффективным, и я бы предпочел использовать обратные вызовы, а не встроенный svg javascript.

Комментарии:

1. Вы должны предоставить правильный код. <script type="textjavascript> . В этой строке по крайней мере две ошибки. Вам нужна косая черта вперед вместо обратной косой черты, и кавычки не закрываются.

2. Я сделал эту поправку и повторил ее (я играл с этим кодом сегодня в течение нескольких часов, поэтому пропустил это, набрав его выше), но по-прежнему никаких результатов.

3. вы пробовали функцию jquery loadscript на URL…и тогда php не будет иметь тегов <script>, а будет рассматриваться как файл .js

4. Я не знаком с loadscript, но, посмотрев на него, я понял, что это более простая версия getscript, которая не будет правильно анализировать PHP, позволяя ему извлекать и перебирать строки базы данных. Также возможно, что мне здесь чего-то не хватает, так как я все еще довольно новичок в jQuery, так как я не писал никакого реального кода почти 10 лет.

Ответ №1:

Поиграв с ним еще немного, я обнаружил, что, поместив пустой тег div с идентификатором и используя следующий код, я смог заставить скрипт делать то, что я хотел, хотя он рисует области влияния до завершения загрузки карты. Не большая проблема, но и не эстетически приятная.

В моем файле .JS:

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

Мой PHP файл

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

И пустой div, который заставил его работать

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

Я до сих пор не знаю, был ли это лучший способ сделать то, что мне было нужно, но сейчас он работает, и это было более важно в данный момент. Ценю ответы, которые я получил.