Update an object in the array using a modal form and display updated details

Question

I\'m trying to update an external object by clicking on the edit button. It brings up a pop-up, wherein I can enter the new information and it should then update the user accord

Answer 1

Alright, I found the problem. It was the variable index which I was using. It was being over-ridden I believe on trying submitting the form, which was causing the problem.

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(
    $('
').addClass('box').append(
    $('').text('Company Website: '),
    $('').addClass('compUrl').attr('href', obj.url).text(obj.company),
    obj.type == 'external' ? $('
').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;
}

Create divs



  

  

    
    

    
      ×
      Close
    
    
Update Data
    
    

    
    

      

      Company Name
      

        
      
      
      

      Website
      

        
      
      
    
    
    

      
      Close
      
      
      Save changes