【问题标题】:Retrieving Data from Database - Laravel从数据库中检索数据 - Laravel
【发布时间】:2017-11-19 20:33:23
【问题描述】:

我可以使用下面的代码将数据保存到我的数据库中。当用户单击复选框时,项目的名称将显示并存储在数据库中。但是我现在的问题是,当我编辑存储的数据时,我能够检索已检查的项目(之前选择并保存的项目),但用于附加代码的 JS 没有运行。

当我取消选中并再次检查时,它可以正常工作。

编辑时,会检查保存在数据库中的项目,但显示所选项目名称的代码的 JS 部分没有运行。为什么会这样?

HTML

<div class="form-group">
  <label for="name" class="col-lg-1 control-label"> Name</label>
  <div class="col-lg-8">
    <input type="text" class="typeahead form-control" id="name" value="{!!$item->products['name']!!}" placeholder="  Name" name="name" required>
  </div>
</div>
<input onclick="return data(this)" data-food="{{$product->toJson()}}" type="checkbox" id="{!! $product->id !!}" name="{!! $product->name !!}" 
value="{!! $product->price !!}"  @foreach ($product->emps as $deliver)   @if($product->id == $deliver->id) checked @endif @endforeach  />

JS

function data(item)
{ 
  var ad = JSON.parse(item.dataset.food);

  if(item.checked == true)  {
    $('.container').append(
    '<div class="shipment_container" > '+ 
    '<p  class="name" >'+ad.name+'</p>'+
    '</div>');
  }
  else {
    $(".container.shipment_container [data-id=" + ad.id + "]").parent().remove();
  }
}

【问题讨论】:

  • 当属性为data-food 时为什么要dataset.stuff?还使用单引号将 json 包装在 html
  • 我已经在我的代码中进行了编辑,请@charlietfl
  • item.dataset.food 不是 item.dataset.item 因为数据属性是食物
  • @YouneL,我已经进行了编辑,但我的项目仍然没有显示。这些项目应该在文档加载时显示
  • @charlietfl,如何在文档加载时检索容器上的项目?

标签: javascript laravel


【解决方案1】:

我认为如果您已经检查过容器元素,您想在容器元素中显示您的产品,您可以试试这个:

$( document ).ready(function() {

    // get input id
    var item = $('#{!! $product->id !!}');

    // parse json
    var ad = JSON.parse(item.data('food'));
    if(item.prop("checked") )  {
        $('.container').append(
            '<div class="shipment_container" > '+ 
            '<p  class="name" >'+ad.name+'</p>'+
            '</div>');
    }
    else {
        $(".container.shipment_container [data-id=" + ad.id + "]").parent().remove();
    }

});

【讨论】:

  • 这不能解决我的问题。请理解我想要达到的目标。当用户点击编辑页面时,之前选择的项目应该出现在容器上。目前,我选中了复选框,但这些项目没有出现在容器上
  • 我的容器在页面加载时仍然是空的,尽管复选框被选中
  • 使用item.attr('data-food') 而不是item.data('food')
  • 我确定这行var item = $('#{{!! $product-&gt;id !!}}'); 有问题,因为当我在此行之后提醒项目时,我收到错误Uncaught Error: Syntax error, unrecognized expression: #{10} `
  • 是的,我的错,改成这样:var item = $('#{!! $product-&gt;id !!}');
猜你喜欢
  • 1970-01-01
  • 2018-09-19
  • 2013-05-15
  • 2021-09-24
  • 2021-01-18
  • 2018-06-21
  • 1970-01-01
  • 1970-01-01
  • 2021-07-06
相关资源
最近更新 更多