Display JSON file contents with Cytoscape.js by selecting from a dropdown menu

I am trying to write a code where the end user can select a file from a drop down menu and that file would be displayed as a network with Cytoscape.js. My code was fetching a JSON file from the server and displaying the file as a network with Cytoscape but it is not working with a drop down list. I am fairly new to AJAX and Jquery. Any help would be appreciated.

   
   <html>
   <head>
   jQuery Test Project
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="&lt;a href=" https:="" ajax.googleapis.com="" ajax="" libs="" jquery="" 3.1.0="" jquery.min.js"="" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <body>
 
 <style>
 body 
 { 
font: 14px helvetica neue, helvetica, arial, sans-serif;
 } 
#cy
 {
height: 60%;
width: 60%;
position: absolute;
left: 0;
top: 0;
  } 
</style>  

   
 

 <script type="text/javascript">   
</script>   
 </head>
<body>

    $(function() { 
    var test;
    $.get( 'cy', function( data ) {
    $('#cy').cytoscape({
     file_name = $("select").val();
     });
  $('#cy').load(file_name);
      style: cytoscape.stylesheet()
          .selector('node')
          .css({
          'content': 'data(name)',
              'text-valign': 'center',
              'color': 'white',
              'text-outline-width': 2,
              'text-outline-color': '#888'
      })
          .selector('edge')
          .css({
          'target-arrow-shape': 'square'
              'width': 5,
              'line-color': '#ddd',
      })
          .selector(':selected')
          .css({
          'background-color': 'black',
              'line-color': 'black',
              'target-arrow-color': 'black',
              'source-arrow-color': 'black'
      })
          .selector('.faded')
          .css({
          'opacity': 0.25,
              'text-opacity': 0
      }),
      elements : JSON.parse(data),

      ready: function() {
          window.cy = this;
          cy.elements().unselectify();

          cy.on('tap', 'node', function(e) {
              var node = e.cyTarget;
              var neighborhood = node.neighborhood().add(node);
              cy.elements().addClass('faded');
              neighborhood.removeClass('faded');
          });

          cy.on('tap', 'edge', function(e) {
              if (e.cyTarget === cy) {
                  cy.elements().removeClass('faded');
              }
          });
      }

  })
  })
  });

javascript ajax jquery proteomics cytoscape

• 4,248 views • link

written 9.6 years ago by priyankapillai13 •

You should probably ask your question on Stack Overflow.

• 0 views • link

written 9.6 years ago by st.ph.n

Hello priyankapillai13!

We believe that this post does not fit the main topic of this site.

Question not related to bioinformatics

For this reason we have closed your question. This allows us to keep the site focused on the topics that the community can help with.

If you disagree please tell us why in a reply below, we'll be happy to talk about it.

Cheers!

• 0 views • link

written 9.6 years ago by WouterDeCoster

0 answers

No answers yet.