选择不在材料设计中渲染 - 意外的标记`<`

时间:2017-09-15 19:20:27

标签: javascript jquery ajax materialize

我在Ajax调用中获得了结果,但填充的select元素不以材质样式呈现,仅在select browser-default中呈现。我已经在$('select').material_select();$.each$.append以及成功函数中尝试了各种形式的渲染我的功能,但没有结果。

模板方。

  <div class="input-field col s12">
   <select id="getUnit" ></select>
   <label>Units</label>
  </div>

Ajax Jquery Get。

$(function () {
  //request the JSON data and parse into the select element
  $.ajax({
    type: "GET",
    url: '/product/unit-measurement-search',
    success: function (unitMeasurement) {
      //get a reference to the select element
      $unit = $('#getUnit');
      //clear the current content of the select
      $unit.html('');
      //iterate over the data and append a select option
      $.each(unitMeasurement, function (info, unitSearch) {
        $unit.append('<option id="' + unitSearch.descriptionUnitMeasurement + '">' + unitSearch.descriptionUnitMeasurement + '</option>');
      });
    }
  });
});

后端处理请求json。

router.get('/product/unit-measurement-search', function (req, res) {
  connection.query('SELECT 
   acronymUnitMeasurement,descriptionUnitMeasurement FROM unit_measurement',
   function (err, unitMeasurement, fields) {
     if (err) {
       throw err;
     }
     res.send(unitMeasurement);
   }
  );
});

返回前端模板只显示选择标签。

编辑:

这是我的控制台输出:

enter image description here

1 个答案:

答案 0 :(得分:0)

控制台显示此错误:

  

未捕获的SyntaxError:意外的标记a materialize.js:1

...和您加载的其他<脚本的错误相同。

这表明脚本文件已损坏。它可能是保存不正确。也许当您下载它时,您在浏览器中将其作为网页打开,并将该页面以HTML编码保存到最终位置。或者还有其他事情发生了。

要验证它是否适用于正确的脚本文件,请将脚本标记替换为:

modal.js

为:

<script type="text/javascript" src="js/materialize.min.js">

现在您不应再在控制台中收到该错误。然后,您可以继续正确下载该文件(不要打开它),将其复制到<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/j‌​s/materialize.min.js"> 文件夹,然后将js属性恢复到原来的状态。

解决控制台错误后,您仍需要正确渲染src元素。 select循环结束后,执行$.each。这应该使元素按需要呈现。