Dynamically added modals aren't triggering - html

I am loading cards and there modals dynamically and the problem I am facing is that the dynamically added cards aren't triggering the dynamically added modals.
The cards are this
data.forEach(eve => {
console.log(eve.data());
event = eve.data();
pastEventCards+=`
<li class="cards_item">
<div class="card">
<div class="card_image">
<img src="images/posters/cpp_2021.jpeg" />
</div>
<div class="card_content card-body d-flex flex-column">
<h2 class="card_title">${event.title}</h2>
<p class="card_text">
</p>
**<button data-modal-trigger="past-event-modal-${event.eventNo}" class="mt-auto demo__btn demo__btn--secondary">
Read More
</button>**
</div>
</div>
</li>
`
pastEventModals+=`
<div class="modal" data-modal-name="past-event-modal-${event.eventNo}">
<div class="modal__dialog">
<button class="modal__close" data-modal-dismiss>×</button>
<header class="modal__header">
<h2 class="modal__title">${event.title}</h2>
</header>
<div class="modal__content">
<h4 class="modal_description">Description</h4>
</p>
<p>${event.description}</p>
<p class="modal_description">
${event.date}
</p>
<p class="modal_description">Attendees : ${event.attendee}
</p>
<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal-dismiss>Close</button>
</div>
</div>
</div>
`
});
cardsList.innerHTML = pastEventCards ;
modalList.innerHTML = pastEventModals ;
I have tried referring to other stack overflow questions related to this and couldnt find a understandable solution to why this is happening , can anyone tell why the buttons cant trigger the modals ?
**EDIT :: **
The button that triggers the modal is inside this ** ** in the pastEventCards variable and the modal is in pastEventModals and when i use "data-modal-trigger = "something" " it will trigger the modal with modal name "something" right ? So y isnt it happening. If I dont add this modals and trigger cards dynamically and add it in the html template then it works fine but after adding dynamically it doesnt work

Related

How to call a container component from within contained component

my landing page component declares in it a header component like so
<div class="container-fluid">
<div class="intro-section">
<div class="background">
//some stuff
</div>
<div class="content">
<app-page-header></app-page-header>
<div class="row">
<div class="col-12 text header mt-3">
Hello World
</div>
<div class="col-12 text-center mt-4 mb-4">
<button class="btn know-more-btn text" (click)="scroll(subscriptions)">Tell me More</button>
</div>
</div>
</div>
</div>
<div #subscriptions></div>
<div id="others" class="otherSection">
//other stuff
</div>
</div>
the scroll function in landing-page.component.ts is
scroll(el: HTMLElement) {
el.scrollIntoView({behavior:"smooth"});
}
I've also tried this
scrolling() {
(document.getElementById('others')).scrollIntoView({behavior:"smooth"});
}
I want to have a button in my app-page-header component that triggers or perform the same action an "scroll(subscriptions)" i.e in the landing page scroll to subscriptions. How can I achieve this?
Create an EventEmitter inside you app-page-header like
#Output() onButtonClicked: EventEmitter<any> = new EventEmitter();
The button in your app-page-header will emit the action to the parent component like:
buttonClicked() {
onButtonClicked.emit();
}
On your landing page add this to call the scroll function whenever the event is emitted.
<app-page-header (onButtonClicked)="scroll(subscriptions)"></app-page-header>

getting my scrollIntoView working (total noob)

I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>

How to make a Textbox editable on click and add a button to the side Angular

I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>

Add software back button in app designer intel xdk at the top

I have 2 pages in my index.html in XDK. I navigate from one to the other. I want to add a back button just like the templates but it's not possible.
This is my html:
<div class="upage vertical-col left" id="mainpage">
<div id="SubPage" class="upage-content vertical-col left ">
<div class="tarea widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" name="uib_w_1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div class="text-container">
<p>This is the main page</p>
</div>
</div>
<button class="btn widget uib_w_2 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="buttonSubPage">Go to sub page</button>
</div>
<div id="SubPage2" class="upage-content vertical-col left hidden"><span class="widget uib_w_3 d-margins badge" data-uib="twitter%20bootstrap/badge_and_label" data-ver="1">This is subfile 2</span>
</div>
</div>
I want to add the back button to "SubPage2". How can I achieve this? I'm working with a blank template in the app designer.
Add This code
$(document).ready(function(){
$("#buttonSubPage").click(function(){
$(".text-container").hide();
$("#SubPage2").show();
});
});
See Fiddle
After you add your header to the app designer, switch to the Code view look for the following code in newly created header
<div class="widget-container content-area horiz-area wrapping-col left"></div>
and then add the button code,
<button data-uib="twitter%20bootstrap/button" data-rel="back" data-ver="1" id="back">Back</button>
the data-rel controls the back action, without need for extra javascript.

AdminLTE collapsed boxes by default

AdminLTE is based on Bootstrap: https://github.com/almasaeed2010/AdminLTE
Live Preview: http://almsaeedstudio.com/preview/
But I'm unsure as to how to make the collapsable boxes collapsed by default.
I'm assuming since it is built on Bootstrap, this should be rather straightforward. I've tried fellow implementations such as setting the id to "collapsedOne" and attempting to treat the divs as accordions, but to no avail.
On the AdminLTE/app.js ~line 45 there is code that implements slide up/slide down to collapse boxes. Ideally, what we'd want is to have the boxes be in the "slide up" state by default with the class "collapsed-box" so that when the icon is clicked, it executes "slide down".
/*
* Add collapse and remove events to boxes
*/
$("[data-widget='collapse']").click(function() {
//Find the box parent
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!box.hasClass("collapsed-box")) {
box.addClass("collapsed-box");
bf.slideUp();
} else {
box.removeClass("collapsed-box");
bf.slideDown();
}
});
Any suggestions?
Thanks in advance.
When the page loads in its initial state, why not just add the collapsed-box class to box element?
The below will render in the collapsed state and function without modifying AdminLTE:
<!-- Default box -->
<div class="box box-solid collapsed-box">
<div class="box-header">
<h3 class="box-title">Default Solid Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
<button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div style="display: none;" class="box-body">
Box class: <code>.box.box-solid</code>
<p>bla bla</p>
</div><!-- /.box-body -->
</div><!-- /.box -->
$("[data-widget='collapse']").click() Add that to a JavaScript file that runs at the bottom
Here are the steps:
Change the minus icon to plus .
Add explicit style "display:none" to box-body
Add the class "collapsed-box" to the box
For those who are using AdminLTE 2.1.1
just simply add sidebar-collapse class on the <BODY>
Before:
<body class="skin-blue sidebar-mini">
After:
<body class="skin-blue sidebar-mini sidebar-collapse">
An open box:
<div class="box">
A collapsed box:
<div class="box collapsed-box">
And then ofcourse change the icon on the button
In Admin LTE 3 collapse by default by using the class collapsed-card on the main card.
Like this
<div class="col-md-3">
 <div class="card collapsed-card">
   <div class="card-header" >
     <h3 class="card-title">Expandable</h3>
     <div class="card-tools">
       <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
       </button>
     </div>
   </div>
   <div class="card-body" >
     The body of the card
   </div>
 </div>
</div>
You should change the icon to a fas fa-plus then the initial box starts with a plus
$("[data-widget='collapse']").click(function() {
//Find the box parent........
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!$(this).children().hasClass("fa-plus")) {.
$(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
bf.slideUp();
} else {
//Convert plus into minus
$(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
bf.slideDown();
}
});
and use in section div
for one specify div
$(function() { $('your-button-id').click(); })
for all
$(function() { $("[data-widget='collapse']").click(); })
Simply add "collapsed-box" to the box and change this:
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
to
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
This should work for me
The correct tested Steps which worked for me are :
Add explicit style "display:none" to box-body
You are done :)
<div class="box ">
<div class="box-header with-border bg-yellow">
<h3 class="box-title">Box Title Here</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: none;">
<div class="table-responsive">
<!--Your content here -->
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
This soluction worked for me:
I added "collapse-left" class for the menu and added the "strech" class for the main content.
I use the version 1 for the AdminLTE. It is divided in aside class="left-side" for the left menu and aside class="right-side" for the main content.
So, this is the final code:
<aside class="left-side collapse-left">
<!-- put the left menu here -->
</aside>
<aside class="right-side strech">
<!-- put the main content here -->
</aside>
I added this to the boxWidget object:
setInitialCollapseStatus: function (container) {
var _this = this;
var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');
collapsedBoxes.each(function (index) {
var box = $(this);
//Convert minus into plus
box
.removeClass(_this.icons.collapse)
.addClass(_this.icons.open);
});
}
and called it during initializiation:
activate: function (_box) {
var _this = this;
if (!_box) {
_box = document; // activate all boxes per default
}
//Listen for collapse event triggers
$(_box).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(_box).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
// Set initial collapseStatus
_this.setInitialCollapseStatus($(_box));
},
Add css classes into body tag in the index.html file:
sidebar-closed sidebar-collapse
<body class="hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed">
With Adminlte 3:
Card Parent add ID: <div class="card card-default" id="a">
Change <i class="fas fa-minus"></i> TO => <i class="fas fa-plus"></i>
Add Display:none <div class="card-body" style="display:none">
Add jquery $('#a').CardWidget('toggle');