Save and Load Jsplumb chart

Question

I have the following code that creates chart using JsPlumb. i need to save the chart, then reload it with its exact nodes and connections. any help please? the code is to connect draggable elements using JsPlumb.

<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script> 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script>

    $(function () {

        //Make element draggable
        $(".dragItem").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            revert: true
        });
        $("#DropArea").droppable({
            accept: '.dragItem',
            activeClass: "drop-area",
            drop: function (e, ui) {

                x = ui.helper.clone();
                ui.helper.remove();
                $(x).removeAttr("class");

                $(x).addClass("dropItem"); 
                x.addClass('jsPlumbItem');
                x.appendTo('#DropArea');

                 AddLine();

            }
        });
    })

    function AddLine()
    {
        jsPlumb.removeAllEndpoints();
        var j = 1;
        var previous; 

        $("#DropArea").find(".jsPlumbItem").each(function () {

            if (j > 1)
            {
                var e0 = jsPlumb.addEndpoint(previous);
                var e1 = jsPlumb.addEndpoint($(this)); 
                 //add line
                jsPlumb.connect({ source: e0, target: e1 });
            }
            else
            {
                j++;
            }
            previous = $(this);

        }); 

        jsPlumb.draggable($(".jsPlumbItem"));

    }


</script>
</head>
<body>
<form id="form1" runat="server">
    <style>
        .dragItem 
        {
            width:50px;
            height:50px;
            background-color:blue;
            float:left; 
        }
        .dropItem 
        {
            width:50px;
            height:50px;
            background-color:red;
            float:left;  
            position:relative;
        }
    </style>
<div>
 <div id="container" style="width:60px; height:400px;">
     <div id="Item1" class="dragItem">A</div>
     <div id="Item2" class="dragItem">B</div>
     <div id="Item3" class="dragItem">C</div>
 </div>
    <div id="DropArea" style="width: 400px; height:400px; border:solid 1px gray; "></div>
</div>
</form>
</body>

Here is the updated fiddle: http://jsfiddle.net/t3nbL/49/ from this post http://stackoverflow.com/a/20893737/2905527 — MrNobody007, Sep 08 '14 at 03:00

score 0 · Answer 1 · answered Jan 17 '19 at 22:45

This will recreate the exact elements in the same location (including any nested elements), their connections will be recreated, and they will be draggable.

Overview: you need serialise the elements and connections, save it somewhere (your choice), then deserialise it when loading back in.

Create a couple of buttons, call them btnSave and btnLoad, and add the code below.

Note, below I am referring to an instance of jsPlumb (e.g. jp = jsPlumb)

Save code:

$('#btnSave').on('click', function() {

    data = [];

    // Loop through elements (b is block)
    var b = []
    $("#DropArea .dragItem").each(function (idx, elem) {
        var $elem = $(elem);
        b.push({
            id: $elem.attr('id'),
            x: parseInt($elem.css("left"), 10),
            y: parseInt($elem.css("top"), 10),
            h: $elem.html()
        });
    });

    data.push({blk : b});

    // Loop through connections
    var c = [];
    $.each(jp.getConnections(), function (idx, connection) {
        c.push({
            i: connection.id,
            s: connection.sourceId,
            t: connection.targetId
        });
    });

    data.push({con : c});

    data = JSON.stringify(data);

    // Lastly, save the data somewhere (e.g. MySQL, etc.)

});

Load code:

$('#btnLoad').on('click', function() {      

    // First, retrieve the data from storage (e.g. MySQL, etc.)

    data = JSON.parse(data);                        
    var blk = data[0].blk;
    var con = data[1].con;

    for( var i = 0; i < blk.length; i++ ) {             
        addWidget(blk[i]['id'],blk[i]['x'],blk[i]['y'], blk[i]['h']);           
    }

    for( var i = 0; i < con.length; i++ ) {

        var connection = jp.connect({ source: con[i]['s'], target: con[i]['t'] });

        // Allows user to click to remove connection
        connection.bind("click", function(conn) {
            jp.deleteConnection(conn);
        });
    }

    // Make the loaded elements draggable again
    jp.draggable( $('.dragItem') );
});

I hope this helps you (probably not because this was 5 years ago!) Or anyone else who happens to stumble on this thread.

Hi can you check this https://stackoverflow.com/questions/56913843/cannot-establish-connection-source-does-not-exist — The Dead Man, Jul 06 '19 at 12:43

Save and Load Jsplumb chart

1 Answers1