【问题标题】:jQuery sortable changing name attribute not showing input name when posted back to phpjQuery可排序更改名称属性在回发到php时不显示输入名称
【发布时间】:2015-10-10 03:56:40
【问题描述】:

您好,我正在使用 Laravel 和 Jquery 创建一个项目,该项目可以从许多列表中为任务分配许多状态。需要将状态写入assigned_statuses 表,该表具有project_idstatus_id 以形成相关关系。

为了分配这些,我有两个连接的可排序列表,它们有两个隐藏的输入,我使用可排序的,因为项目中的任务将按照回发时分配的特定顺序移动。无论如何,我渲染的刀片文件会输出名称为statuses 的隐藏表单,并将它们全部发回。但是我需要知道哪些是分配的。到目前为止,这是我的代码:

<div class="statuses">
  <div class="statussortableWrapper">
    <ul id="available-statuses" name="available-statuses" class="connected-sortable">
      @foreach($statuses as $status)
        <li class="ui-state-default" id="{{$status->id}}" name="{{$status->id}}">
         {{Form::hidden('available-statuses[]',$status->id,array('class' => 'sortable-hidden-input'))}}
          <span class="label label-primary">{{$status->name}}</span>
         </li>
      @endforeach
    </ul>
  </div>
  <div class="statussortableWrapper">
     <ul id="assigned-stauses" name="assigned-stauses" class="connected-sortable">    
      </ul>
   </div>
</div>


$(function() {
$( "#available-statuses, #assigned-stauses" ).sortable({
      connectWith: ".connected-sortable",
      stop: function(event, ui) {
           var present = $(ui.item).find('.sortable-hidden-input').attr("name", "assigned-statuses[]");
            console.log(present);
        }
    }).disableSelection();
});

名称属性在具有.sortable-hidden-input 类的输入上发生了更改,但是当它被回发时,它在数组中没有键名,数组如下:

array(7) {
    ["project_name"] ""
    ["start_date"] "01/01/2015"
    ["end_date"] "13/03/2015"
    ["available-statuses"] array(2) {
        [0] "17"
        [1] "20"
    }
    array(3) {
        [0] "19"
        [1] "16"
        [2] "18"
    }
}

如您所见,可用状态在其自己的数组中,但其他分配的状态 ID 不在。我不确定为什么代码成功地在输入上分配了新的名称属性。有什么想法我做错了什么以及如何在后端成功捕获它??

编辑

状态转储:

array(5) {
[0] array(8) {
["id"] "16"
["name"] "Backlog"
["order"] "0"
["created_at"] "2015-07-19 17:41:25"
["updated_at"] "2015-07-19 20:29:20"
}
[1] array(8) {
["id"] "17"
["name"] "Open"
["order"] "4"
["created_at"] "2015-07-19 17:41:25"
["updated_at"] "2015-07-19 20:29:11"
}
[2] array(8) {
["id"] "18"
["name"] "In Progress"
["order"] "1"
["created_at"] "2015-07-19 17:41:25"
["updated_at"] "2015-07-19 20:29:11"
}
[3] array(8) {
["id"] "19"
["name"] "Review"
["order"] "2"
["created_at"] "2015-07-19 17:41:25"
["updated_at"] "2015-07-19 20:29:21"
}
[4] array(8) {
["id"] "20"
["name"] "Done"
["order"] "3"
["created_at"] "2015-07-19 17:41:25"
["updated_at"] "2015-07-19 20:30:14"
}
}

完整的表格

@extends('layouts.master')
@section('content')
<div class="create-project-layout">
    <div class="page-intro">
        <h3>Create new Project</h3>
        <span>* required fields</span>
    </div>
    <div class="all-project">
        {{ Form::open(array('url' => route('project.add'), 'class'=> 'create-project-form')) }}
        <div class="form-group">
            {{ Form:: label ('project_name', 'Project name *' )}}
            {{ Form:: text ('project_name', '', array('placeholder' => 'Project Two', 'class' =>'form-control', 'id' => 'project-name') )}}
        </div>

        <div class="form-group">
            {{ Form:: label ('start_date', 'Start Date *' )}}
            <div class='input-group date'>
            {{ Form:: text ('start_date', '', array('placeholder' => '2015/08/31', 'class' =>'form-control', 'data-provide' => 'datepicker', 'data-date-format' => 'yyyy/mm/dd', 'id' => 'start_date') )}}
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
            </div>
        </div>
        <div class="form-group">

        <div class="">
            {{ Form:: label ('end_date', 'End Date *' )}}
            <div class='input-group date'>
            {{ Form:: text ('end_date', '', array('placeholder' => '2015/08/31', 'class' =>'form-control', 'data-provide' => 'datepicker', 'data-date-format' => 'yyyy/mm/dd', 'id' => 'end_date') )}}
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
            </div>
        </div>
        </div>
        <div class="form-group">
        {{Form::label('globalstatues', 'These statuses have been assigned globally to all projects.')}}
            @foreach($globalstatuses as $status)
               <span class="label label-primary">{{$status->name}}</span>
            @endforeach
        </div>
        {{Form::label('overideglobalstatues', 'Would you like to override?')}}
            <div class="override-status">
                <p>The statuses on the left are available for selection. Drag them to the area on the right in the order you would like the scrum board to run. E.g. Backlog > In Progress > Review > Done > Deloyped.</p>
                <div class="statussortableWrapper">
                    <ul id="available-statuses" name="available-statuses" class="connected-sortable">
                        @foreach($statuses as $status)
                        <li class="ui-state-default" id="{{$status->id}}" name="{{$status->id}}">{{Form::hidden('status[]',$status->id,array('class' => 'sortable-hidden-input'))}}<span class="label label-primary">{{$status->name}}</span></li>
                        @endforeach
                    </ul>
                </div>
                <div class="statussortableWrapper">
                    <ul id="assigned-stauses" name="assigned-stauses" class="connected-sortable">
                    </ul>
                </div>
            </div>
        <div class="form-group">
        {{ Form::submit('Create new project', array('class' => 'btn btn-success', 'id'=> 'create-project')) }}
        
        {{ Form::close() }}
        </div>
    </div>

</div>
@stop

【问题讨论】:

  • @crush 不需要,因为我有一个表statuses,它的状态为name,所以我可以使用assigned_statuses 表中的status_id 建立关系
  • 您能否添加您的$statuses 的PHP 定义。需要一些样本数据。
  • @crush 是一个 var 转储好吗?我已经更新了问题,如果没有让我知道你需要什么:)
  • 如何将其发布回您的服务器?当然 var_dump 没问题。
  • atm 我只是通过 php 发回,但我想通过 post ajax 请求来发回

标签: jquery jquery-ui laravel


【解决方案1】:

您的代码应该可以工作,这看起来像一个格式化的数组:

  array(7) {
    ["project_name"] ""
    ["start_date"] "01/01/2015"
    ["end_date"] "13/03/2015"
    ["available-statuses"] array(2) {
        [0] "17"
        [1] "20"
    }
    array(3) {
        [0] "19"
        [1] "16"
        [2] "18"
    }
}

在浏览器上右键查看源码,看看内容是否不同。

【讨论】:

  • @user3410846 你说得对,我有一个插件,它隐藏了数组的名称。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-18
  • 1970-01-01
  • 1970-01-01
  • 2017-06-24
  • 1970-01-01
相关资源
最近更新 更多