2013-12-10 38 views
0

我使用qtip2在我MVC4應用。繼顯示客戶端驗證用於模型驗證隱藏的模型元素是代碼qtip2不會顯示在mvc4

$(function() { 
      // Run this function for all validation error messages 
      $('.field-validation-error').each(function() { 
       // Get the name of the element the error message is intended for 
       // Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an 
       // underscore but the data-valmsg-for value will have the original characters 
       var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_'); 

       var corners = ['top center', 'bottom center']; 
       var flipIt = $(inputElem).parents('span.right').length > 0; 

       // Hide the default validation error 
       $(this).hide(); 

       // Show the validation error using qTip 
       $(inputElem).filter(':not(.valid)').qtip({ 
        content: { text: $(this).text() }, // Set the content to be the error message 
        position: { 
         my: corners[flipIt ? 0 : 1], 
         at: corners[flipIt ? 1 : 0], 
         viewport: $(window) 
        }, 
        show: { 
         ready: true 
         //modal: { 
         // on: true 
         //}         
        }, 
        //hide: false, 
        hide: { 
         event: 'unfocus'//event: 'click mouseleave' 
        }, 
        //style: { classes: 'ui-tooltip-red' } 
       }); 
      }); 
     }); 

This is working fine until the element on which error message is to be displayed is visible. 
I am using the kendo ui MVC helpers for controls like dropdownbox ,selectlist etc. 
it hides the original element with its own.following the html generated (check element with id PhysicianType) 

    <span class="k-widget k-dropdown k-header input-validation-error" style="margin: 0px 0px 0px 28px; width: 181px; font-family: 'Segoe UI';" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="PhysicianType_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="PhysicianType_option_selected"> 
    <span class="k-dropdown-wrap k-state-default" unselectable="on"> 
    <span class="k-input" unselectable="on">Select Type</span> 
    <span class="k-select" unselectable="on"> 
    </span> 
    <input id="PhysicianType" class="input-validation-error" type="text" style="margin: 0px 0px 0px 28px; width: 181px; font-family: 'Segoe UI'; display: none;" name="PhysicianType" data-role="dropdownlist"> 
    </span> 

現在我想顯示錯誤信息對於PhysicianType但在其不可見;錯誤消息不是用於displayed.I下面的代碼來隱藏的元件顯示工具提示

$(function() { 
     $.validator.setDefaults({ ignore: [] }); 
    }); 

上述代碼顯示隱藏的元素也但qtip的位置的錯誤代碼是左上角的屏幕;不附加到元素本身。
請幫助準確定位qtip2錯誤以防隱藏元素。

+0

你找出答案了嗎?我有同樣的問題。 – Spafa9

+0

實際上我使用的是kendo ui(第三方控件);它會創建具有相同id的隱藏字段。因此qtip無法將錯誤消息定位到正確的位置。 – amol

+0

我做了以下代碼註釋:$(function(){ $ .validator.setDefaults({ignore:[]}); });並且如果(somecondition.value()== 0){('span:first',「#NegCdtDD1」),則手動將qtip應用於該控件的第一(創建)跨度 – amol

回答

0
if (somecondition.value() == 0) { $('span:first', "#NegCdtDDl").qtip({ content: { text: "Please Select value for control" }, show: { ready: true }, position: { at: 'top center', my: 'bottom center', viewport: $(window) }, hide: false }); } else { $('span:first', "#NegCdtDDl").qtip('destroy'); }