kendo ui autocomplete - источник данных файла json - шаблон - ошибка 404 Not Found - / undefined URL

Код ниже был с благодарностью предоставлен machun для переключения между направлениями RTL и LTR в виджетах Kendo UI.

Код состоит из:

HTML: форма автозаполнения кендо плюс кнопка для активации поддержки языка RTL и LTR.

Сценарий:

  • контейнер класса k-rtl
  • источник данных (файл json)
  • Инициализация виджета автозаполнения кендо + шаблон для отображения изображения рядом с данными и открытия ссылок на данные на той же вкладке
  • к-ртл класс

Проблема в том, что ссылки открываются некорректно. Он показывает ошибку 404 Not Found плюс /undefined в конце URL-адреса.

Демо

<!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>

kendo-ui kendo-autocomplete kendo-template
person Basem    schedule 29.10.2015    source источник
comment
@machun, не могли бы вы взглянуть на этот вопрос?   -  person Basem    schedule 29.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я советую сначала отладить вашу функцию, а затем просто проверить переменную и убедиться, что она содержит правильную вещь. Вы упустили из виду простую вещь: ваш селектор jquery dom не совсем правильный, в результате чего var href содержит "undefined".

Изменять

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

To

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

Посмотрите здесь

person himawan_r    schedule 30.10.2015
comment
Спасибо мачун. Большое спасибо. И извините за упущение вещей - person Basem; 30.10.2015