Question

我正在使用JS-Graph.IT创建流程图，并希望在选择下拉选项时，使用更改的流程图版本加载div。在加载AJAX内容之前，流程图工作并显示带有从一个框指向另一个框的箭头的框。加载AJAX内容后，似乎无法生成连接器。

我发现这是因为在使用相同的画布ID之前需要清除画布。 SourceForge我尝试按照说明将delCanvas函数复制到JS文件中，并调用delCanvas函数并重新初始化HTML页面标题中的页面对象：

<script type="text/javascript">

jQuery(document).ready(function() {
    JSGraphIt.initPageObjects();

    $("body").delegate("#button1", "click", function() {
        delCanvas('#mainCanvas');

        var button2 = $('#combo').val();
        $.ajax({ // ajax call starts
            url: 'serverside17.php', // JQuery loads serverside.php
            data: 'button2=' + $('#combo').val(), // Send value of the clicked button
            dataType: 'json', // Choosing a JSON datatype
            success: function(data) // Variable data constains the data we get from serverside
            {
                JSGraphIt.initPageObjects();
                $('#mainCanvas').html(''); // Clear #content div
                $('#mainCanvas').append(data);
            }
        });
    });

});

</script>

提前感谢您的帮助！

HTML页面：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding: 0; 
        overflow:hidden;
    }
}
</style>
<script type="text/javascript">
function onLoad()
{
    JSGraphIt.initPageObjects();
}

jQuery(document).ready(function() {
    $(".block").bind('click', $.proxy(function(event) {
        var input = $(event.target).attr('id');
        var lines = input.split('_');
        var button = lines[0];
        $.ajax({ // ajax call starts
            url: 'srvrside.php', // JQuery loads serverside.php
            data: 'button=' + button, // Send value of the clicked button
            dataType: 'json', // Choosing a JSON datatype
            success: function(data) // Variable data constains the data we get from serverside
            {
                $('#content').html(''); // Clear #content div
                $('#content').append(data);
            }
        });
        return false; // keeps the page from not refreshing 

    }, this));

    $("#button1").bind('click', $.proxy(function(event) {
        var button2 = $('#combo').val();
        $.ajax({ // ajax call starts
            url: 'serverside15.php', // JQuery loads serverside.php
            data: 'button2=' + $('#combo').val(), // Send value of the clicked button
            dataType: 'json', // Choosing a JSON datatype
            success: function(data) // Variable data constains the data we get from serverside
            {
                $('#mainCanvas').html(''); // Clear #content div
                $('#mainCanvas').append(data);
                JSGraphIt.initPageObjects();
            }
        });
        return false; // keeps the page from not refreshing 

    }, this));

});

</script>
</head>
<body onload="onLoad();">

    <select id="combo">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input id="button1" type="button" value="Click!" />

    <div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">

        <?php
            ***database connection details***

            while($row = mysqli_fetch_array($result))
            {
                echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
                echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
                echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> &nbsp;';
                echo $row['name'];
                echo '</div>';
            }   

            // Creating connectors
            $result = mysqli_query($con,"SELECT * FROM dependencies");

            while($row = mysqli_fetch_array($result))
            {
                echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
                if ($row['down_arrow'] == 1) {
                    echo 'down_start">';
                }
                else {
                    echo 'right_start">';
                }
                echo '<img class="connector-end" src="arrow.gif">';
                echo '<label class="middle-label">'.$row['desc'].'</label>';
                echo '</div>';
            }

            // Closing database connection
            mysqli_close($con);
        ?>
    </div>

    </body>
</html>

服务器端PHP：

<?php  

// Get value of clicked button 
$button = $_GET['button2'];  

$all = '';

***Database connection***

            while($row = mysqli_fetch_array($result))
            {
                $all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
                $all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
                $all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> &nbsp;';
                $all .= $row['name'];
                $all .= '</div>';
            }   

            ***database connection***

            while($row = mysqli_fetch_array($result))
            {
                $all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
                if ($row['down_arrow'] == 1) {
                    $all .= 'down_start">';
                }
                else {
                    $all .= 'right_start">';
                }
                $all .= '<img class="connector-end" src="arrow.gif">';
                $all .= '<label class="middle-label">'.$row['desc'].'</label>';
                $all .= '</div>';
            }

            // Closing database connection
            mysqli_close($con);

        print json_encode($all);

?>

JS-Graph.IT JS

对象预期的Javascript错误

0 个答案: