Problem
The issue at hand is related to performing operations on the same DOM element during each iteration of a for loop.
Pay attention to your OpenUploaderAndBindContent function.
OpenUploaderAndBindContent(c: UIVideo) {
console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);
this.videosToBeReplaced = new UIVideo();
this.videosToBeReplaced = c;
console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
document.getElementById('videoReplaceTrigger').click(); <-- ISSUE 1
}
You are triggering the same button for each video, leading to attempts to open the same modal. This occurs because the button targets the same modal with id=videoReplace. Refer to the snippet below where the button targets videoReplace.
<button id="videoReplaceTrigger" style="display:none" data-toggle="modal" data-target="#videoReplace"></button>
<div class="add-popup modal fade" id="videoReplace" #videoModal tabindex="-1" role="dialog" aria-labelledby="videoReplace" >
Solution
To solve this issue:
- Avoid targeting the same
button and modal by their id.
- Create multiple modals, one for each video, using a new
modal component named modal-component.
- Move the modal content into this new component.
Make the button and modal id dynamic by utilizing @Input.
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header gredient-bg">
<ul class="card-actions icons right-top">
<li>
<a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close" #closeModal (click)="hideModal">
<i class="ti-close"></i>
</a>
</li>
</ul>
<h4 class="modal-title text-center">Replace Video</h4>
</div>
<div class="modal-body">
<div class="package_summary text-center">
<p>Please upload an MP4 file to replace the existing one. This will replace <strong>{{videosToBeReplaced?.video?.title}}</strong>
</p>
<p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(videosToBeReplaced?.video?.itemId)"
accept="video/mp4" maxFileSize="100000000"
(onBeforeSend)="onBeforeSend($event)"
(onProgress)="onProgressReplace($event)"
(onSelect)="onFileSelect($event)"
(onUpload)="onReplaceVideo($event)"
chooseLabel="Select Video">
</p-fileUpload>
</div>
</div>
</div>
</div>
</div>
4.Use the modal-component inside the for loop
<div *ngFor="let c of uiVideos;let i= index" class="row curriculum-single">
<modal-component [id]="i" ></modal-component>
</div>
Note: The modal-component has an input for id, which generates dynamic ids for the modal and button.
5.The revised method should look like this:
OpenUploaderAndBindContent(c: UIVideo, index:number) {
console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);
this.videosToBeReplaced = new UIVideo();
this.videosToBeReplaced = c;
console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
document.getElementById('videoReplaceTrigger'+index).click(); <-- ID IS GENERATED BY INDEX
}
This approach dynamically generates ids.