2014-01-12 4 views
1

Если мой всплывающая подсказка не является HTML-форматом, после частичной перезагрузки она становится стандартной всплывающей подсказкой без форматирования. Но если у меня есть он в режиме HTML, он полностью уходитBootstrap 3 MVC4 Razor после перезагрузки Partial View ToolTips сбой

Весь мой Javascript находится в главном представлении, я уже пробовал несколько вещей, многие на самом деле. Но теперь нужно сделать шаг назад и спросить совета

Вот HTML, который определяет частично, это DIV является частью более крупной Detail View, но я буду только показывать соответствующий код для краткости

<div class="modal fade" id="PricingTool" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4> 
        Premise @Model.Premise.CoreSPID is @ViewData["MeteredStatus"] & contains <span class="badge">@Model.Premise.SupplyPoints.Count()</span> Spid(s) 

       </h4> 
       <div class="row"> 
        <div class="col-md-4"> 

         From <input type="text" value="@String.Format("{0:dd/MM/yyyy}", DateTime.Now.AddYears(-1))" id="from" class="datepicker"> 

        </div> 
        <div class="col-md-4"> 

         To <input type="text" value="@String.Format("{0:dd/MM/yyyy}", DateTime.Now.AddDays(-1))" id="to" class="datepicker"> 
        </div> 



       </div> 
      </div> 
      <div id="LoadingGif"></div> 
      <div id="ResultsList" style="clear:both;"> 
       @{Html.RenderPartial("_DetailsPricing", Model.Premise);} 
      </div> 
      <div class="modal-footer"> 

       <a class="btn btn-primary" id="RefreshBtn">Re-Calculate</a> 
       <a class="btn btn-default" data-dismiss="modal">Close</a> 
      </div> 
     </div> 

    </div> 
</div> 

Вот JavaScript из главного Вида:

$(document).ready(function() { 

    $("[rel=show-tooltip]").tooltip({ html: true }); 

    $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" }); 


    //$("#myTable").hide(); 
    $("#pager").hide(); 




    function Init() { 

     if ($("#myTable").find("tr").size() > 1) { 


      $("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[2, 0]] }).tablesorterPager({ container: $("#pager") }); 


     } else { 

      $("#myTable").hide(); $("#pager").hide(); 
     } 

     return false; 
    }; 


    $('.show-tooltip').each(function (e) { 
     var p = $(this).parent(); 
     if (p.is('td')) { 
      /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */ 
      $(this).css('padding', p.css('padding')); 
      p.css('padding', '0 0'); 
     } 
     $(this).tooltip({ 
      toggle: 'toolip', 
      placement: 'bottom' 
     }); 
    }); 



    $("#RefreshBtn").click(function() { 
     ReloadPartial(); 
    }); 



    function ReloadPartial() { 



     var url = '/SupplyPoint/PricingUpdate'; 

     var data = { 
      StartDate: $('#from').val(), 
      EndDate: $('#to').val(), 
      SupplyPointId: $('#SupplyPointId').val().toString() 
     }; 

     $("#ResultsList").load(url, data, function() { 
      $('#LoadingGif').empty(); 

     }); 

     $('#LoadingGif').empty().html('<img src="/Content/images/ajax-loader.gif" width=31 height=31 alt="Loading image" />'); 




     return false; 
    }; 
}); 

Наконец - вот код выписка из частичной cshtml Thats показывая всплывающую подсказку. Я оставил все остальное, потому что это не актуально, просто зацикливая модель, в которой нет Javascript. Вот одна часть, которая показывает всплывающую подсказку отлично - хотя и после перезагрузки его потерял

      <div class="show-tooltip" data-html="true" data-original-title="@pricing.VolumetricChargeWorking"> 


            <div>&pound;@Html.DisplayFor(modelItem => pricing.VolumetricCharge)</div> 
+0

Если я добавлю Javascript Alerts в конец моей функции ReloadPartial(), в главном представлении это исправляет все. Но я не могу получать предупреждения в своем приложении. – John

+0

Решение: http://stackoverflow.com/questions/20193746/javascript-proble-script-works-100-only-with-an-alert-in-place-odd – John

+0

См. Http: //stackoverflow.com/questions/20193746/javascript-proble-script-works-100-only-with-an-alert-in-place-odd – John

ответ

0

Просто поместите этот код из главного окна в свой частичный вид:

$("[rel=show-tooltip]").tooltip({ html: true }); 

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

+0

Когда я пытаюсь это сделать, я получаю тот же результат, он работает только в первый раз , Ваше предложение имеет смысл для меня - спасибо, но я не уверен, почему он не работает. – John

+0

Попробуйте это в частичном вместо этого: $ (". Show-tooltip"). Tooltip ({html: true}); – erikrunia

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