Changing a label to a link in jquery library

Question

I have an asp.net mvc4 application, in which i'd like to add a treeview . So i used this Jquery library : graphdracula

<html>
  <head>
    <!-- jQuery -->
    <script type="text/javascript" src="~/Content/Scripts/jquery-1.4.2.min.js"></script>
    <!--  The Raphael JavaScript library for vector graphics display  -->
    <script type="text/javascript" src="~/Content/Scripts/raphael-min.js"></script>
    <!--  Dracula  -->
    <!--  An extension of Raphael for connecting shapes -->
    <script type="text/javascript" src="~/Content/Scripts/dracula_graffle.js"></script>
    <!--  Graphs  -->
    <script type="text/javascript" src="~/Content/Scripts/dracula_graph.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/dracula_algorithms.js"></script>
    <script type="text/javascript">
        //Show UCLA CS class dependencies (not complete)
        $(document).ready(function () {
            var width = $(document).width() -500;
            var height = $(document).height();
            var g = new Graph();
            g.edgeFactory.template.style.directed = true;
            g.addEdge("Projet", "Fonction1");
            g.addEdge("Fonction1", "Sous Fonction 1.1");
            g.addEdge("Fonction1", "Sous Fonction 1.2");
            g.addEdge("Projet", "Fonction2");
            g.addEdge("Fonction2", "Sous Fonction 2.1");
            g.addEdge("Fonction2", "Sous Fonction 2.2");
            g.addEdge("Fonction2", "Sous Fonction 2.3");
            g.addEdge("Fonction2", "Sous Fonction 2.4");
            var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
            var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
        });

    </script>
  </head>
  <body>
    <div id="canvas"></div>
 </body>
</html>

the result is a view like this : result

it is good but i need to change each title to a link like this : @Html.ActionLink("Projet", "Modify_Project")

How can i modify my snippet to do this task?

score 1 · Accepted Answer · edited May 23 '17 at 11:53

If you are using jQuery.

// on page load
$(function(){

// You need to identify a selector that selects all the titles you want to change..
// Likely they all have a certain class 
$('.titleSelector').changeElementType("a");

// Now you probably want to add an href
$('a.titleSelector').attr('href','http://youlinkhere');

});

Here is the plugin.. include it after jquery loads and before your script runs https://stackoverflow.com/a/8584217/602379

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

Changing a label to a link in jquery library

1 Answers1