Each object from the 'myData' array is being used to create divs. Additionally, there is a bootstrap modal with a form for adding an external object. Once this external object is added to the array 'myData', it will be displayed in the same format as described above.
The issue I am facing is that upon successful creation of the external object, I need to:
Close the Modal when the 'save' button is clicked and the external object is created successfully.
Ensure that whenever the 'Add external object' button is clicked, the form in the modal does not contain any pre-filled content.
I have attempted to achieve this using the reset method, but it doesn't seem to be working. Can you assist me in resolving this issue? Below is my complete code -
var myData = [{
company: "ABC",
url: "www.abc.com",
type: "internal"
}, {
company: "CDE",
url: "www.cde.com",
type: "internal"
}, {
company: "DEF",
url: "www.def.com",
toolName: "reportTool",
toolURL: "http://www.toolURL.com",
type: "internal"
}, {
company: "EFG",
url: "www.efg.com",
type: "internal"
}, {
company: "FGH",
url: "www.fgh.com",
type: "internal"
}];
$('#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),
)
);
});
}
var objIndex;
$(document).ready(function(){
});
function createData() {
companyName = $('#companyName').val();
companyUrl = $('#companyUrl').val();
toolName = $('#newToolName').val();
toolURL = $('#newToolUrl').val();
var extObj = {
company: companyName,
url: companyUrl,
toolName: toolName,
toolURL: toolURL,
type: 'external'
};
myData.push(extObj);
createDisplay();
alert('Data created successfully!');
}.box {
height: 100px;
background-color: skyblue;
border: 1px solid black;
border-radius: 4px;
margin-top: 5px;
}