2016-07-07 2 views
0

Так что у меня возникли проблемы с атакой этой проблемы и вы ищете немного проницательности.Autoclick - ссылка «a» на странице HTML

Так что я хочу, чтобы при загрузке страницы она вызывала функцию loadFromPdb(), но функция вложена в другую функцию, которая делает ее жесткой.

Код

Начало demo.js файла

require(['pv'], function(PV) { 

pv = PV; 
var io = pv.io; 
var structure; 

$(document).foundation(); 
$('#load-from-pdb').click(loadFromPdb); 

function loadFromPdb() { 
var pdbId = "1r6a"; 
this.value = ''; 
this.blur(); 

//Set up the URL 
var url = 'http://www.rcsb.org/pdb/files/' + pdbId + '.pdb'; 
    urlPdb = url; 
    console.log(url); 
    io.fetchPdb(url, function(s) { 
     structure = s; 
     cartoon(); 
     viewer.autoZoom(); 
}); 
} 

Так вот у меня есть основания документа и когда нагрузка идентификатор из PDB щелкают он запускает запрос и захватывает pdb из базы данных, а затем загружает структуру белка на холст.

HTML5,

<!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" 
    xmlns:py="http://genshi.edgewall.org/" 
    xmlns:xi="http://www.w3.org/2001/XInclude"> 

<script src='js/jquery-2.0.2.min.js'></script> 
<script src='js/modernizr-2.8.3.min.js'></script> 
<script src="js/foundation-5.4.7.min.js"></script> 
<script data-main='demo' src='js/require.js'></script> 
<link rel='stylesheet' href='css/foundation.css'/> 
<link rel="stylesheet" href="css/protein-style.css"/> 
</head> 
<body> 
<div id = "loading"></div> 
<div id = "page"> 
<div id = "viewer-wrap"> 
    <div id="viewer"> 
     <canvas id = "canvas"></canvas> 
     <nav id = "nav-bar" class = "top-bar" data-topbar role = "navigation"> 
      <section class = "top-bar-section"> 
       <div id="static-label"> 
       </div> 
       <div class = "row-collapse"></div> 
       <ul class = "right"> 
        <li class="has-dropdown"> 
         <a href="#">PDBs</a> 
         <ul class="dropdown"> 
          <li><a id = sequence-pdb href="#">Sequence of Methyl Transferase</a> </li> 
          <li><a id = sequence-remove-pdb href="#">Remove Sequence</a> </li> 
          <li><a id = hoverOn href="#">Hover</a> </li> 
          <li><a id = hoverOff href="#">Hover Off</li> 
         </ul> 
        </li> 
        <li class = "has-dropdown"> 
         <a href="#">Style</a> 
         <ul id = selectionGraphics class = "dropdown"> 
          <li><a id = style-cartoon href ="#" >Cartoon</a></li> 
          <li><a id = style-lines href ="#" >Lines</a></li> 
          <li><a id = style-spheres href ="#" >Spheres</a></li> 
          <li><a id = style-balls-and-sticks href ="#" >Balls and Sticks</a></li> 
          <li><a id = style-points href ="#" >Points</a></li> 
          <li><a id = style-sline href = "#" >Smooth Line Trace</a></li> 
          <li><a id = style-trace href="#">Trace</a> </li> 
          <li><a id = style-tube href="#">Tube</a> </li> 
         </ul> 
        </li> 
        <li class="has-dropdown"> 
         <a href="#">Color</a> 
         <ul class="dropdown"> 
          <li><a id=color-uniform href="#">Uniform</a></li> 
          <li><a id=color-chain href="#">Chain</a></li> 
          <li><a id=color-element href="#">Element</a></li> 
          <li><a id=color-ss href="#">Secondary Structure</a></li> 
          <li><a id=color-ss-succ href="#">Secondary Structure Succession</a></li> 
          <li><a id=color-rainbow href="#">Rainbow</a></li> 
         </ul> 
        </li> 
        <li class="has-dropdown"> 
         <a href="#">Shading</a> 
         <ul class="dropdown"> 
          <li><a id=phong href="#">Phong</a></li> 
          <li><a id=hemilight href="#">Hemilight</a></li> 
         </ul> 
        </li> 
       </ul> 
      </section> 

     </nav> 
     <div id = "sequence-label" class="scrollingDiv"> 
     </div> 
    </div> 
    <div id = 'picked-atom-name'>&nbsp;</div> 
    <input type="image" src="photo-camera.png" id="snapshot" /> 
    <input type="image" src="download-button.png" id="download" /> 
</div> 

Вещи, которые я попробовал

Так что я сделал попытку оказывает кнопку и скрывая ее так, чтобы она autoclicks и затем вызывает нагрузка от функции pdb, подобная

<button class ="md-trigger" id="load-from-pdb" data-modal= "modal"> 
      <script> 
       $(document).ready(function() { 
        $("#load-from-pdb").trigger("click"); 
       }); 
      </script> 
     </button> 

который, похоже, не работает. Я попытался

<body onload = "pv.loadFromPdb()"> 

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

Я пробовал иметь отдельный скрипт с той же функцией в HTML, но это создает проблемы с вызовом других функций внутри этой функции.

Так что мой вопрос: как я могу загрузить функцию FromPdb() на странице HTML, когда она загружается?

+2

Первая идея должна была работать, но вы усложнили ее, поставив скрипт внутри кнопки. Просто добавьте этот скрипт на страницу как обычно, а не внутри кнопки. Если это не работает, то что-то останавливает его, как '$ ('# load-from-pdb'). Trigger (« click »);' is correct. – Archer

+0

Я добавил скрипт в конец тега тела, но, увы, он все еще не работает, когда загружается страница. –

+0

Вы можете добавить [JsFiddle] (https: // jsfiddle.net /) link –

ответ

0

Не лучшее решение, далекое от него, но легкое, быстрое и грязное: создайте «клон» вашей исходной функции, теперь не вложенный, а затем назовите ее своим «bodyload». Позже вы найдете более чистое решение (пожалуйста, не делайте снизу, потому что мой ответ является ответом столь же действительным, как и любой другой, - если он уродлив и т. Д., То это другой случай, но это не так и работает. Помните: «Совершенно враг добрых «Если у вас есть лучшее решение, пожалуйста, будьте уверены: поделитесь им). Спасибо.

+0

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

0

Решение проблемы,

Так что в моем файле Javascript я написал функцию «OnReady» и оттуда сусло было возиться со сценариями, так в конце концов, я просто добавил инициирующее событие в OnReady и это сработало! Использование кнопки invisble.

function onReady(callback) { 
var intervalID = window.setInterval(checkReady, 1000); 
function checkReady() { 
    if (document.getElementsByTagName('body')[0] !== undefined) { 
     window.clearInterval(intervalID); 
     callback.call(this); 
    } 
} 
} 


function show(id, value) { 
document.getElementById(id).style.display = value ? 'block' : 'none'; 
} 


onReady(function() { 
    show('page', true); 
    show('loading', false); 
    // Click the invisible button to simulate a loading of the PDB file 
    $("#load-from-pdb").trigger("click"); 
}); 
Смежные вопросы