jquery - Javascript not working on some (not all) pages built on a Django backend, despite files being found by the site -
i building site django. have been confronted odd issue. javascript working on pages , not others. in fact 1 page work looks , functions identically 1 doesn't.
my html page doesn't work looks like:
<!doctype html> <html lang="en"> <head> <title>metascape</title> <meta name = "viewport" content="width=device-width, initial-scale=1.0"> {% load static staticfiles %} <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'base.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'font-awesome/css/font-awesome.css' %}" rel="stylesheet" media="screen"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/bootstrap-table.min.css"> <link href="{% static 'tipsy/src/stylesheets/tipsy.css' %}" rel="stylesheet" media="screen" > </head> <body> <div class='header'> <div class="container"> <div class="col-md-8 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="{% url 'uploads.views.home' %}">home</a></li> <li role="presentation"><a href="{%url 'iav.views.iav_home' %}">iav</a></li> <li role="presentation"><a href="{%url 'info.views.view_about'%}">about</a></li> <li role="presentation"><a href="{%url 'info.views.view_contact' %}">contact</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 jumbotron" id = "front-jumb"> <div class="text-left"> <p> metascape </p> </div> <div class="text-right"> <p id = 'alt'> advancing omics analysis </p> </div> </div> </div> </div> <div class="container"> <div class="row" > <div class="col-md-5 col-md-offset-2" id="one-title"> <h4> step1: </h4> <p> <font face="arial"> data processing: upload excel file , download augmented file </font> </p> </div> </div> </div> <div class="container"> <div class="row"> <form action= "{% url 'new_page' %}" method="post" enctype="multipart/form-data"> <div class="col-md-2 col-md-offset-2" id="step-one"> {% load widget_tweaks %} {{docform.docfile|attr:"class:filestyle"|attr:"data-classbutton:btn btn-primary"|attr:'data-input:false'|attr:'data-classicon:icon-plus'|attr:'data-buttontext:upload data'}} {% csrf_token %} <p>{{ docform.non_field_errors }}</p> <p> {{ docform.docfile.errors }} </p> </div> <div class="col-md-2"> {{docform.is_multiple}} <font face="arial">multi gene list</font> </div> <div class="col-md-2"> <p><input id = "process_button" class="btn btn-primary" type="submit" value="process"/></p> </div> {% block down %} {% endblock %} </form> </div> </div> {% block preview_data %} {% endblock %} <br/> <div class="container"> <div class="row" > <div class="col-md-5 col-md-offset-2" id="one-title"> <h4> step2: </h4> <p> <font face="arial"> go enrichment: upload excel file , download augmented file </font> </p> </div> </div> </div> <div class='container scroll_d2'> <div class="row"> <form action= "{%block go_action %}{%endblock%}" method="post" enctype="multipart/form-data"> <div class="col-md-1 col-md-offset-2" id="step-one"> <p style="font-size:90%">min overlay</p> </div> <div class="col-md-1" > {{goform.overlap}} </div> <div class="col-md-1"> <p style="font-size:90%">p value cutoff</p> </div> <div class="col-md-1"> {{goform.pvalue}} </div> <div class="col-md-1"> <p style="font-size:90%">min enrichment</p> </div> <div class="col-md-1"> {{goform.min_enrichment}} </div> <div class='clearfix'></div> <div class="col-md-3 col-md-offset-2 separate" > <dl class="dropdown" title = "select number of flu proteins. default, 1 or more selected proteins matched" id="flu_protein"> <dt> <a> <span class="hida">select enrichment database</span> <p class="multisel"></p> </a> </dt> <dd> <div class="mutliselect"> <ul> {{goform.select_db}} </ul> </div> </dd> </dl> </div> <div class='clearfix'></div> <div class="col-md-2 col-md-offset-2 separate" id="step-one"> {% if document %} <div class="file-present"> <span class = "glyphicon glyphicon-ok-sign" aria-hidden="true"></span> </div> {% endif %} {{goform.docfile}} {% csrf_token %} <p>{{ goform.non_field_errors }}</p> <p> {{ goform.docfile.errors }} </p> </div> <div class="col-md-1"> <p><input id = "enrich_button" class="btn btn-primary" type="submit" value="enrich"/></p> </div> </form> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/static/bootstrap/js/bootstrap-filestyle.min.js"></script> <script type="text/javascript" src="/static/tipsy/src/javascripts/jquery.tipsy.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/bootstrap-table.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/locale/bootstrap-table-zh-cn.min.js"></script> <script src="{% static 'upload.js' %}"></script> </body> </html> the javascript file, can found clicking link found chrome is:
var main = function(){ $("html, body").animate({ scrolltop: $('.scroll_d2').offset().top }, 2500); $('#flu_protein').tipsy({gravity: 'w'}); $(".dropdown dt a").on('click', function () { $(".dropdown dd ul").slidetoggle('fast'); }); $(".dropdown dd ul li a").on('click', function () { $(".dropdown dd ul").hide(); }); function getselectedvalue(id) { return $("#" + id).find("dt span.value").html(); } $(document).bind('click', function (e) { var $clicked = $(e.target); if (!$clicked.parents().hasclass("dropdown")) $(".dropdown dd ul").hide(); }); $('.mutliselect input[type="checkbox"]').on('click', function () { var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(), title = $(this).val() + ","; if ($(this).is(':checked')) { var html = '<span title="' + title + '">' + title + '</span>'; $('.multisel').append(html); $(".hida").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".hida"); $('.dropdown dt a').append(ret); } }); $('li').click(function(){ var current = $('li.active'); var next = $(this); current.removeclass('active'); next.addclass('active'); }); }; $(document).ready(main) a similar page work has html of:
<!doctype html> <html lang="en"> <head> <title>metascape</title> <meta name = "viewport" content="width=device-width, initial-scale=1.0"> {% load static staticfiles %} <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'base.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'font-awesome/css/font-awesome.css' %}" rel="stylesheet" media="screen"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/bootstrap-table.min.css"> <link href="{% static 'tipsy/src/stylesheets/tipsy.css' %}" rel="stylesheet" media="screen" > </head> <body> <div class='header'> <div class="container"> <div class="col-md-8 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="{% url 'uploads.views.home' %}">home</a></li> <li role="presentation"><a href="{%url 'iav.views.iav_home'%}">iav</a></li> <li role="presentation"><a href="{%url 'info.views.view_about'%}">about</a></li> <li role="presentation"><a href="{%url 'info.views.view_contact'%}">contact</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 jumbotron" id = "front-jumb"> <div class="text-left"> <p> metascape </p> </div> <div class="text-right"> <p id = 'alt'> advancing omics analysis </p> </div> </div> </div> </div> <div class="container"> <div class="row" > <div class="col-md-5 col-md-offset-2" id="one-title"> <h4> step1: </h4> </h4> <p> <font face="arial"> data processing: upload excel file , download augmented file </font> </p> </div> </div> </div> <div class="container"> <div class="row"> <form action= "{% url 'new_page' %}" method="post" enctype="multipart/form-data"> <div class="col-md-2 col-md-offset-2" id="step-one"> {% load widget_tweaks %} {{docform.docfile|attr:"class:filestyle"|attr:"data-classbutton:btn btn-primary"|attr:'data-input:false'|attr:'data-classicon:icon-plus'|attr:'data-buttontext:upload data'}} {% csrf_token %} {% csrf_token %} <p>{{ docform.non_field_errors }}</p> <p> {{ docform.docfile.errors }} </p> </div> <div class="col-md-2"> {{docform.is_multiple}} <font face="arial">multi gene list</font> </div> <div class="col-md-2"> <p><input class="btn btn-primary" type="submit" value="process"/></p> </div> </form> </div> </div> <br/> <div class="container"> <div class="row" > <div class="col-md-5 col-md-offset-2" id="one-title"> <h4> step2: </h4> <p> <font face="arial"> go enrichment: upload excel file , download augmented file </font> </p> </div> </div> </div> <div class="container"> <div class="row"> <form action= "{% block go_action%}{%endblock%}" method="post" enctype="multipart/form-data"> <div class="col-md-1 col-md-offset-2" id="step-one"> <p style="font-size:90%">min overlay</p> </div> <div class="col-md-1" > {{goform.overlap}} </div> <div class="col-md-1"> <p style="font-size:90%">p value cutoff</p> </div> <div class="col-md-1"> {{goform.pvalue}} </div> <div class="col-md-1"> <p style="font-size:90%">min enrichment</p> </div> <div class="col-md-1"> {{goform.min_enrichment}} </div> <div class="col-md-3" > <dl class="dropdown" title = "select number of flu proteins. default, 1 or more selected proteins matched" id="flu_protein"> <dt> <a> <span class="hida">select enrichment database</span> <p class="multisel"></p> </a> </dt> <dd> <div class="mutliselect"> <ul> {{goform.select_db}} </ul> </div> </dd> </dl> </div> <div class='clearfix'></div> <div class="col-md-2 col-md-offset-2 separate" id="step-one"> <!--{{goform.docfile}}--> {% csrf_token %} <p>{{ goform.non_field_errors }}</p> <p> {{ goform.docfile.errors }} </p> </div> <div class="col-md-1 separate"> {% if img %} <p><input class="btn btn-primary disable_enrich enrich_button" type="submit" value="enrich"/></p> {% else %} <p><input class="btn btn-primary enrich_button" type="submit" value="enrich"/></p> {% endif %} </div> </form> </div> </div> <br/> <div class='container'> <div class="row col-md-10 col-md-offset-2" > <img src="/media/{{img}}"/> <!-- <table data-toggle="table"> {% el in postings %} <tbody> <tr> <td> {{el}} </td> </tr> </tbody> {% endfor %} </table> --> </div> {% block go_down %} {% endblock %} </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/static/bootstrap/js/bootstrap-filestyle.min.js"></script> <script type="text/javascript" src="/static/tipsy/src/javascripts/jquery.tipsy.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/bootstrap-table.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.6.0/locale/bootstrap-table-zh-cn.min.js"></script> <script src="{% static 'enrich.js' %}"></script> </body> </html> and javascript page looks like:
var main = function(){ $("html, body").animate({ scrolltop: $('.scroll_d1').offset().top }, 2500); $('#flu_protein').tipsy({gravity: 'w'}); $(".dropdown dt a").on('click', function () { $(".dropdown dd ul").slidetoggle('fast'); }); $(".dropdown dd ul li a").on('click', function () { $(".dropdown dd ul").hide(); }); function getselectedvalue(id) { return $("#" + id).find("dt span.value").html(); } $(document).bind('click', function (e) { var $clicked = $(e.target); if (!$clicked.parents().hasclass("dropdown")) $(".dropdown dd ul").hide(); }); $('.mutliselect input[type="checkbox"]').on('click', function () { var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(), title = $(this).val() + ","; if ($(this).is(':checked')) { var html = '<span title="' + title + '">' + title + '</span>'; $('.multisel').append(html); $(".hida").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".hida"); $('.dropdown dt a').append(ret); } }); $('li').click(function(){ var current = $('li.active'); var next = $(this); current.removeclass('active'); next.addclass('active'); }); }; $(document).ready(main) i had made 2 javascript files similar possible see if problem javscript or not.
Comments
Post a Comment