jQuery可排序更改名称属性在回发到php时不显示输入名称

Posted 2023-03-14

【中文标题】jQuery可排序更改名称属性在回发到php时不显示输入名称

【英文标题】：jQuery sortable changing name attribute not showing input name when posted back to php

【发布时间】：2015-10-10 03:56:40

【问题描述】：

您好，我正在使用 Laravel 和 Jquery 创建一个项目，该项目可以从许多列表中为任务分配许多状态。需要将状态写入assigned_statuses 表，该表具有project_id 和status_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 请求来发回

【参考方案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 你说得对，我有一个插件，它隐藏了数组的名称。谢谢！