Question

machun幸运地提供了以下代码，用于在Kendo UI小部件中切换RTL和LTR方向。

代码包括：

HTML： kendo自动完成表单以及激活对RTL和LTR语言的支持的按钮。

脚本：

k-rtl类容器
datasource（json file）
kendo自动完成小部件初始化+模板以在数据旁显示图像并在同一选项卡中打开数据链接
k-rtl class

问题是链接无法正确打开。它显示404 Not Found错误加上URL末尾的/ undefined。

<!DOCTYPE html>
        <html>

        <head>
          <meta charset="utf-8">
          <title>Untitled</title>

          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">

          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
        </head>

        <body>
          <div id="container">
            <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
            <input id="autocomplete" type="text" />
          </div>

        </body>

        </html>

<script>
    /*------k-rtl class container----------*/
    function createAutoComplete(){
          if($("#autocomplete").data("kendoAutoComplete") != null){
            $("#autocomplete").parent().remove();
            $("#container").append("<input id='autocomplete' type='text' />")
          }
    /*------datasource (json file)---------*/
    var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
    url: "json.txt",
    dataType: "json",
    data: {
    q: "javascript"
    }
    }
    },
    schema: {
    data: "results"
    }
    });
    /*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
          $("#autocomplete").kendoAutoComplete({
                dataSource: dataSource,
                dataTextField: "name",
                template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg"  /></span>' + '<span data-href="#:link#">#:name#</span>',
                select: function(e) {
                    var href = e.item.find("span").data("href");
                    location.assign(href);
                }
            });
     }
    /*------k-rtl class----------*/
     createAutoComplete();
     $('#toggleRTL').on('click', function(event) {
       var form = $('#container');
       console.log(form);
       if (form.hasClass('k-rtl')) {
         console.log("test1");
         form.removeClass('k-rtl')
       } else {
         console.log("test2");
         form.addClass('k-rtl');
       }
       createAutoComplete();
     })
    </script>

Answer 1

我建议首先调试你的函数然后只需检查变量并确保它包含正确的东西。您忽略了一个简单的事情，即您的 jquery dom选择器不是很正确，因此 var href 包含＆＃34; 未定义＆＃34 ;

更改

 var href = e.item.find("span").data("href");

要

var href = e.item.find("span[data-href]").attr("data-href");

看看here

kendo ui autocomplete - json file datasource - template - 404 Not Found error - / undefined URL

1 个答案: