Вопросы с частичным представлением и jQuery

Я унаследовал проект и очень зеленый относительно пользовательского интерфейса. Этот проект использует Bootstrap, nvd3 и флот в Chrome. Существует вид макета, в котором ссылается jQuery, а затем части тела в каждой части отображаются в макете. На странице панели мониторинга графики не отображаются, если jQuery снова не упоминается в сценариях, но эта ссылка заставляет боковую панель прекратить работу. Ослабление ссылок можно дублировать в сценариях панели инструментов, чтобы отображать оба графика и боковую панель, но один график все еще не работает должным образом. Это заставляет меня думать, что jQuery и его библиотеки многократно ссылаются на макет и частичные представления, уничтожая ссылки, отображающие графики, активируют боковую панель, отображают графики правильно и т. Д.Вопросы с частичным представлением и jQuery

Если это так, способ отслеживать каждую ссылку jQuery? Я попытался удалить несколько ссылок в исходном коде с помощью видимости, переместив ссылки на макеты HTML, протестировать то, что попадает в инструменты разработчика Chrome, переименовать ссылки, как описано выше, как группу помощи, и искать здесь похожие вопросы , но ничто, кажется, не достигает как правильного визуального, так и функционального. Кроме того, может ли дублируемая ссылка jQuery на другое частичное представление, которое имеет один и тот же родительский макет, сбрасывает ссылки в любом другом частичном представлении? Пожалуйста, подумайте, есть ли другое возможное решение, не рассматриваемое здесь, потому что я в конечном счете пытаюсь заставить боковую панель и графики работать правильно. Заранее спасибо за это.

Вот макет со ссылками:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 

    <link rel="shortcut icon" href="/favicon.ico" /> 

    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/icons") 

    @Scripts.Render("~/bundles/modernizr") 

    @RenderSection("headcontent", required: false) 

    <!-- page specific stylesheets --> 
    <!-- nvd3 charts --> 
    <link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css"> 
    <!-- owl carousel --> 
    <link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css"> 

    <!-- google webfonts --> 
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'> 

    <!-- datepicker --> 
    <link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css"> 
    <!-- date range picker --> 
    <link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css"> 
    <!-- timepicker --> 
    <link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css"> 
    <!-- ion.rangeSlider --> 
    <link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css"> 
    <!-- bootstrap switches --> 
    <link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"> 
    <!-- 2col multiselect --> 
    <link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet"> 
    <!-- multiselect, tagging --> 
    <link rel="stylesheet" href="/Content/lib/select2/select2.css"> 

    <!-- main stylesheet --> 
    <link href="/Content/css/style.css" rel="stylesheet" media="screen"> 

    <!-- moment.js (date library) --> 
    <script src="/Content/lib/moment-js/moment.min.js"></script> 


    [styles omitted...] 

</head> 
<body> 
    [header omitted...] 

    <!-- main content --> 
    <div id="main_wrapper"> 

     [messages omitted...] 

     @RenderBody() 
    </div> 

    <!-- side navigation --> 
    <nav id="side_nav"> 
     @Html.Partial("~/Views/Shared/_SidebarLeft.cshtml") 
    </nav> 

    <!-- jQuery --> 
    <script src="/Content/js/jquery.min.js"></script> 
    <!-- easing --> 
    <script src="/Content/js/jquery.easing.1.3.min.js"></script> 
    <!-- bootstrap js plugins --> 
    <script src="/Content/bootstrap/js/bootstrap.min.js"></script> 
    <!-- top dropdown navigation --> 
    <script src="/Content/js/tinynav.js"></script> 
    <!-- perfect scrollbar --> 
    <script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script> 

    <!-- common functions --> 
    <script src="/Content/js/tisa_common.js"></script> 

    @RenderSection("Scripts", required: false) 

</body> 
</html>

А вот приборная панель HTML:

@using Project.Models 
@model DashboardViewModel 
@{ 
    ViewBag.Title = "Home Page"; 

    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
       <div class="heading_b">Prices Chart</div> 
       <div class="panel-body"> 
        <div id="nvd3_cumulativeLine" style="width: 100%; height: 300px"> 
         <svg></svg> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

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

@section Scripts{ 
    <!-- page specific plugins --> 

    <!-- jQuery DUPLICATE --> 
    <script src="/Content/js/jquery.min.js"></script> 
    <!-- easing DUPLICATE --> 
    <script src="/Content/js/jquery.easing.1.3.min.js"></script> 

    <!-- nvd3 charts --> 
    <script src="/Content/lib/d3/d3.min.js"></script> 
    <script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script> 
    <!-- flot charts--> 
    <script src="/Content/lib/flot/jquery.flot.min.js"></script> 
    <script src="/Content/lib/flot/jquery.flot.pie.min.js"></script> 
    <script src="/Content/lib/flot/jquery.flot.resize.min.js"></script> 
    <script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script> 
    <!-- clndr --> 
    <script src="/Content/lib/underscore-js/underscore-min.js"></script> 
    <script src="/Content/lib/CLNDR/src/clndr.js"></script> 
    <!-- easy pie chart --> 
    <script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script> 
    <!-- owl carousel --> 
    <script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script> 

    <!-- dashboard graph functions --> 
    <script src="/Content/js/apps/tisa_dashboard.js"></script> 

    <script type="text/javascript"> 
     function cumulativeTestData() { 
      var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))') 
      return [ 
       { 
        key: "Prices", 
        values: closes 
       }, 
      ]; 
     } 
    </script> 
}

источник

2016-02-09 jle

Вы считаете, что конфликт при загрузке одного и того же сценария несколько раз. Загружайте каждый скрипт только один раз.

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

В вашем макете переместите сценарии в заголовок (желательно) или, по крайней мере, до точки, прежде чем вы начнете вытягивать частичный вид. Затем в частичном представлении убедитесь, что нет ссылок на уже загруженные скрипты.

В частичных представлениях я часто использую скрипт-скрипт для загрузки скриптов, которые могут быть или не были динамически загружены. Вот что вы можете использовать для загрузки сценариев. Он проверяет, уже ли загружен сценарий с тем же именем на странице (особенно в теге заголовка), и если он есть, он не пытается загрузить его снова. Это не самый красивый, но он выполняет свою работу.

mycode = function() 
{ 

    //Put all your custom javascript here. 
    //This will run when the scripts below have successfully been processed. 

} 
var headTag = document.getElementsByTagName("head")[0]; 
var initialScripts = ["/scripts/jquery-2.1.4.min.js", 
         "/scripts/jquery-ui.min.js", 
         "/scripts/jquery.timepicker.min.js"]; 
var neededScripts = []; 
for (var z = 0; z < initialScripts.length; z++) { 
    if (!isScriptLoaded(initialScripts[z])) 
     neededScripts.push(initialScripts[z]); 
} 
if(neededScripts.length) 
    addScripts(neededScripts, headTag, function() { mycode(); delete mycode; }, 0); 
else { 
    mycode(); delete mycode; 
} 
function addScripts(scriptsToLoad, loadTag, callback, i) { 
    if (i >= scriptsToLoad.length) 
     return; 
    var script = scriptsToLoad[i]; 
    var scriptTag = document.createElement('script'); 
    scriptTag.setAttribute('type', 'text/javascript'); 
    scriptTag.setAttribute('src', script); 
    if (i >= (scriptsToLoad.length - 1)) { 
     scriptTag.onload = callback; 
    } 
    else { 
     scriptTag.onload = function() { 
      console.log("Added script file " + script); 
      addScripts(scriptsToLoad, loadTag, callback, i + 1); 
     } 
    } 
    loadTag.appendChild(scriptTag); 
} 

function isScriptLoaded(url) { 
    var tags = document.getElementsByTagName('script'); 
    for (var i = tags.length; i--;) { 
     var existingName = tags[i].src.split('/'); 
     existingName = existingName[existingName.length-1]; 

     var newName = url.split('/'); 
     newName = newName[newName.length-1]; 

     if (existingName == newName) return true; 
    } 
    return false; 
}

источник

2016-02-09 17:19:56 Paul

Отличный отклик, Пол. До сих пор я только что переместил сценарии компоновки в заголовок, удалил дубликаты в частичном представлении и очистил кеш/файлы cookie. Графики и боковая панель отображаются сейчас, но график по-прежнему не определяет размер или применяет интерактивную направляющую линию правильно. Я буду использовать это как отдельную тему, если у вас нет никаких предложений, но я буду отмечать этот ответ правильно. – jle

Если вы можете воссоздать проблему в скрипке (https://jsfiddle.net/), это будет большой помощью. В противном случае я не уверен, что вызовет ваши проблемы. – Paul

Я начал скрипку, но теперь ссылка генерирует 404 после очистки кеша и файлов cookie. Таким образом, источник показывает значения для объекта closes, но график теперь равен нулю. – jle

Вопросы с частичным представлением и jQuery

ответ

Смежные вопросы