使用模态表单更新数组中的对象并显示更新的详细信息

Posted 2023-05-09

【中文标题】使用模态表单更新数组中的对象并显示更新的详细信息

【英文标题】：Update an object in the array using a modal form and display updated details

【发布时间】：2017-09-23 11:44:10

【问题描述】：

我正在尝试通过单击编辑按钮来更新外部对象。 它会弹出一个弹出窗口，我可以在其中输入新信息，然后它应该相应地更新用户。 但不知何故，它似​​乎不起作用。它只是触发页面刷新，什么都没有发生。 你能帮我解决这个问题吗？

var myData = [
    company: "ABC",
    url: "www.abc.com",
    type: "internal"
  , 
    company: "CDE",
    url: "www.cde.com",
    type: "internal"
  , 
    company: "DEF",
    url: "www.def.com",
    type: "external"
  , 
    company: "EFG",
    url: "www.efg.com",
    type: "internal"
  , 
    company: "FGH",
    url: "www.fgh.com",
    type: "external"
  ];

  $('#createData').click(function() 
    createDisplay();
  );
function createDisplay() 
  myData.forEach(function(obj) 
  $('.container').append(
    $('<div>').addClass('box').append(
    $('<label>').text('Company Website: '),
    $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
    obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr("data-toggle":"modal", "data-target":"#updateData") : ''
    )
  )
  );

$(document).on('click', '.edit-btn', function()
 var index = getIndex(this);
  $("#updateForm").submit(function(index)
      updateData(index);
    return false;
  );
);
function getIndex(item)
  return $(item).parents('.box').index();


function updateData(obj) 
  companyName = $('#companyName').val();
  companyUrl = $('#companyUrl').val();

  var upObj = 
    company: companyName,
    url: companyUrl,
    type: "external"
  
  myData.splice(index, 1, upObj);
  createDisplay();

.box 
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

</div>

<button id="createData">Create divs</button>
<!-- Modal -->

<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Update Data</h4>
    </div>
    <form id="updateForm">
    <!-- Modal Body -->
    <div class="modal-body">
    <div class="form-group">
      <label class="col-sm-4 control-label" for="companyName">Company Name</label>
      <div class="col-sm-8">
      <input type="text" class="form-control" id="companyName" placeholder="Company Name" required/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label" for="companyUrl">Password</label>
      <div class="col-sm-8">
      <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required/>
      </div>
    </div>
    </div>
    <!-- Modal Footer -->
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">
      Close
    </button>
    <button class="btn btn-primary">
      Save changes
    </button>
    </div>
  </form>
  </div>
  </div>
</div>

【问题讨论】：

您的代码的哪一部分不起作用？

在问这样的问题之前，请确保您的类引用和 ID 引用都是正确的。 .edit-user、#newName、#newDob、#newImg .. 等是不匹配的选择器。难怪它不起作用。此外，您没有用值填充#updateForm 的代码。并且在$(document).on('click', '.edit-user', function() ...之后没有关闭括号的语法错误

对错误深表歉意！我以某种方式混合了代码，这就是原因。我可以在这里使用 replaceWith() 吗？比如，jQuery(obj).replaceWith(upObj)？

我已经更新了代码和描述，让它变得更简单了。

【参考方案1】：

好的，我发现了问题。这是我使用的变量索引。我相信在尝试提交表单时它被覆盖了，这导致了问题。

var myData = [
  company: "ABC",
  url: "www.abc.com",
  type: "internal"
, 
  company: "CDE",
  url: "www.cde.com",
  type: "internal"
, 
  company: "DEF",
  url: "www.def.com",
  type: "external"
, 
  company: "EFG",
  url: "www.efg.com",
  type: "internal"
, 
  company: "FGH",
  url: "www.fgh.com",
  type: "external"
];

$('#createData').click(function() 
  createDisplay();
);
function createDisplay() 
  $('.container').empty();
  myData.forEach(function(obj) 
  $('.container').append(
    $('<div>').addClass('box').append(
    $('<label>').text('Company Website: '),
    $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
    obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr('data-toggle':'modal', 'data-target':'#updateData') : ''
    )
  )
  );

var currentIndex;
$(document).on('click', '.edit-btn', function()
  currentIndex = $(this).parents('.box').index();
);
$('#updateForm').submit(function()
  updateData(currentIndex);
  return false;
);

function updateData(index) 
  companyName = $('#companyName').val();
  companyUrl = $('#companyUrl').val();

  var upObj = 
  company: companyName,
  url: companyUrl,
  type: 'external'
  
  myData.splice(index, 1, upObj);
  createDisplay();

.box 
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

</div>

<button id="createData">Create divs</button>
<!-- Modal -->

<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Update Data</h4>
    </div>
    <form id="updateForm">
    <!-- Modal Body -->
    <div class="modal-body">
      <div class="form-group">
      <label class="col-sm-4 control-label" for="companyName">Company Name</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="companyName" placeholder="Company Name" required/>
      </div>
      </div>
      <div class="form-group">
      <label class="col-sm-4 control-label" for="companyUrl">Website</label>
      <div class="col-sm-8">
        <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required/>
      </div>
      </div>
    </div>
    <!-- Modal Footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">
      Close
      </button>
      <button class="btn btn-primary">
      Save changes
      </button>
    </div>
    </form>
  </div>
  </div>
</div>