2014-06-07 134 views
0

我试图从kendo templatekendowindow显示与价值观的弹出窗口。虽然没有错误,但下面的代码并未显示弹出窗口和模板内容。任何想法什么需要改变来显示这个?弹出窗口虽然没有错误

UPDATE

当我删除了MSIE浏览器检查的弹出来了。但它仍然没有显示模板内容。我错过了什么?

我提到以下堆栈溢出的职位和许多其他的博客解决这个问题。

  1. Filtering source in a Kendo Template
  2. select and show in new window Kendoui grid row data?
  3. Creating a div element in jQuery
  4. browser.msie error after update to jQuery 1.9.1

CODE

<head> 
    <title>Kendo Template and Kendo Window</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script> 



<!---- lijo Kendo Templates--> 
    <script id="row-template" type="text/x-kendo-template"> 
      <tr> 
       <td data-bind="text: name"></td> 
       <td data-bind="text: age"></td> 
      </tr> 
    </script> 


<script type="text/javascript"> 

    //lijo 
    $(document).ready(function() { 


     var viewModel = kendo.observable({ 

      employees: [ 
         { name: "Lijo", age: "28", IsSelected: true }, 
         { name: "Binu", age: "33", IsSelected: false }, 
         { name: "Kiran", age: "29", IsSelected: true } 
         ] 
     }); 

     kendo.bind($("body"), viewModel); 
    }); 



    //lijo 
    function showMakeAndHold() { 

     alert("HIIIIIII"); 

     var drilldownpopup = $('<div class="myClass">A</div>'); 



     if (!drilldownpopup.data('kendoWindow')) 
     { 
      drilldownpopup.kendoWindow({ 
        modal: true 
       });  
     } 

     drilldownpopup.data('kendoWindow').title(" "); 
     $('.k-window-actions').html('<span class="titletext">' + "MAKE HOLD BALANCE ITEM" + '</span><a href="#" class="k-window-action k-link"><span class="k-icon k-i-close"></span></a>'); 

     var myString = 
         ['<html><body><table id="resultTable">', 
          '<tbody data-template="row-template" data-bind="source: employees">', 
          '</tbody>', 
         '</table>AAAA</body></html>' 
         ].join('\n'); 


     drilldownpopup.data('kendoWindow').content(myString); 

     drilldownpopup.data('kendoWindow').open(); 
     drilldownpopup.data('kendoWindow').center(); 

    } 



</script> 




</head> 

<body> 

A B 

<button id = "MakeHoldDetailLinkButton" class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View Make Hold</button> 

<div class="drilldownwindow">SS</div> 

</body> 
+0

是您的浏览器的弹出窗口拦截器阻止它?尝试暂时禁用它或使用其他浏览器。 –

+0

@NicolasMcCurdy我在Chrome和IE中试过..在 – Lijo

+2

中都没有工作$ .browser在版本1.3中被弃用并且在1.9中被删除http://stackoverflow.com/questions/14892095/browser-msie-error-after-update -jquery-1-9-1 [1]:http://stackoverflow.com/questions/14892095/browser-msie-error-after-update-to-jquery-1-9-1 – Mani

回答

1

试试下面的代码:

1)你提到的功能齐全的员工,所以它的运行后首先只有你的myString的html代码会被执行,因此dosnt显示员工数据,所以除去准备functioni把代码下面..

<head> 
    <title>Kendo Template and Kendo Window</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script> 



<!---- lijo Kendo Templates--> 
    <script id="row-template" type="text/x-kendo-template"> 
      <tr> 
       <td data-bind="text: name"></td> 
       <td data-bind="text: age"></td> 
      </tr> 
    </script> 


<script type="text/javascript"> 

    //lijo 








    //lijo 
    function showMakeAndHold() { 

     // alert("HIIIIIII"); 

     var drilldownpopup = $('<div class="myClass">A</div>'); 



     if (!drilldownpopup.data('kendoWindow')) { 
      if (jQuery.support.leadingWhitespace) { 
       drilldownpopup.kendoWindow({ 
        animation: false, 
        modal: true 
       }); 

      } 
      else { 
       drilldownpopup.kendoWindow({ 
        modal: true 
       }); 
      } 
     } 

     drilldownpopup.data('kendoWindow').title(" "); 
     $('.k-window-actions').html('<span class="titletext">' + "MAKE HOLD BALANCE ITEM" + '</span><a href="#" class="k-window-action k-link"><span class="k-icon k-i-close"></span></a>'); 

     var myString = 
         ['<html><body><table id="resultTable">', 
          '<tbody data-template="row-template" data-bind="source: employees">', 
          '</tbody>', 
         '</table></body></html>' 
         ].join('\n'); 


     drilldownpopup.data('kendoWindow').content(myString); 

     drilldownpopup.data('kendoWindow').open(); 
     drilldownpopup.data('kendoWindow').center(); 


    var viewModel = kendo.observable({ 

      employees: [ 
         { name: "Lijo", age: "28", IsSelected: true }, 
         { name: "Binu", age: "33", IsSelected: false }, 
         { name: "Kiran", age: "29", IsSelected: true } 
         ] 
     }); 

     kendo.bind($("body"), viewModel); 



    } 



</script> 




</head> 

<body> 

A B 

<button id = "MakeHoldDetailLinkButton" class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View Make Hold</button> 

<div class="drilldownwindow">SS</div> 

</body> 
+0

我upvoted,因为它帮助我获得弹出更新。但模板内容数据并未出现在这里。 [就是说它没有显示的'employees'数据] – Lijo

+0

我更新的代码上面的检查张贴... – Mani

+0

酷......我要分析你的代码undertsand的变化。但是它会如果你成为一个更好的答案可以用一些关于你所做的改变的口头解释来更新它。 – Lijo