Develop Reference

Problems with multiple and dynamic html popover on showing and hiding

before all thanks for reading.
So... I have a problem with bootstrap popover. I have tried many configurations with no success, so I'll try to explain the problem as clearer as I can.
I have multiple elements within bootstrap columns and when the user click on one of them a popover comes out with a form in its popover-content.
Every form is different due to its attributes, you can choose different options in the popover and then send the form.
Untill this point everything is fine, the popover works correctly. The thing is that when I click a second time over the same element in order to hide the popover, popover hides but not the title and the next popover I click content is empty, I mean, popover content stop working, it only show titles.
I think I'm missing something but I can't find out what.
The code that load the content:
$("[data-toggle=popover]").popover({
trigger: "click focus",
template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3>⊗<div class="popover-body"></div></div>',
content: function() {
var $html = $(this).parent().find(".prod-popover").eq(0).html();
return $(".popover-content").html($html);
}
});
I've tried with trigger focus, click, manual and a mix of them with the same results.
I have also tried changing the wrapper .popover-content with #popover-content.
Code to hide popover:
$(document).on("click", "a.popover-close", function(e) {
e.stopPropagation();
$(".popover-content").popover('hide');
return false;
});
Another for hiding found here in stack overflow
$(document).click(function(e) {
if ($(".popover").has(e.target).length == 0 || $(e.target).is(".close")) {
$("#popoverId").popover("hide");
}
});
Another one:
$("[data-toggle=popover]").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$("[data-toggle=popover]").not(this).popover('hide');
});
HTML:
<div class="col-md-6 col-sm-6 col-xs-12 bt-border k-item" data-placement="right" data-toggle="popover" data-title="Whatever" data-container="body" data-html="true">
<div class="hidden prod-popover">
<form class="cart" role="form" method="post" action="">
<div class="form-group">
<label>Label</label>
<textarea rows="2" placeholder="PLACEHOLDER"></textarea>
</div>
<div class="form-group">
<div class="btn-group pop-quantity" role="group">
<input type="text" value="1" min="1" step="1">
</div>
</div>
<button type="button">Send<button>
</form>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2"><img src="SRC" alt=""></div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h4 class="no-pad-bt">Whatever</h4>
<p class="no-pad-bt">Description</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-right">
<p>Price</p>
</div>
</div>
Any help will be highly appreciated.

It's possible to nest several angular scripts?

I'm trying to nest two scripts, but the second one that opens and closes, closes the first one instead of the second one I open.
I'm using AngularJS in the frontEnd.
The structure is as follows:
<list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
resolve="{openPaisModal: ctrl.openPaisModal,
openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
paisService: ctrl.paisService}"
required="true"
template-url="libro.edicion.html">
</list-form>
<script type="text/ng-template" id="edicion.agente.html">
<uib-accordion close-others="oneAtATime" class="col-sm-12">
<div uib-accordion-group class="panel-default" is-open="element.desplegado"
heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
<input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
</div>
</div>
</div>
<div class="row">
<!-- Inside this row I'm trying to create another list-form and its script -->*
</div>
</div>
</uib-accordion>
</script>
Is there any way to do that?
EDIT 1
I'm not trying to load scripts asynchronously. Added my solution with the code.

No you can't do that.
You can merge the two script as single file, like: But you can copy the code from second script file and past the code inside of first script file, then you just call the first script file.

I was trying to do that:
<list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
resolve="{openPaisModal: ctrl.openPaisModal,
openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
paisService: ctrl.paisService}"
required="true"
template-url="libro.edicion.html">
</list-form>
<script type="text/ng-template" id="edicion.agente.html">
<uib-accordion close-others="oneAtATime" class="col-sm-12">
<div uib-accordion-group class="panel-default" is-open="element.desplegado"
heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
<input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
</div>
</div>
</div>
<div class="row">
<!-- Inside this row I was trying to create another list-form and its script -->*
</div>
</div>
</uib-accordion>
</script>
The solution was to create the list-form within the row and script at the same height as the previous one.
And simply call it up with the template-url from the list-form.
Thank you, everyone.

jQuery not working when I load dynamic component in Angular

I have implemented dynamic components in Angular and whenever a dynamic component is loaded its corresponding jQuery is not working. Same jQuery script is working elsewhere.
This is where my dynamic component loads:
<div class="listing-table-outer" [#myAwesomeAnimation]='state'>
<app-dynamic-question [componentData]="componentData"></app-dynamic-question>
</div>
Below html will be loaded dynamically.
<div class="panel panel-default " >
<div class="panel-body" >
<h1>{{textLabel}}</h1>
<p>{{textHeader}}</p>
<div class="form-inline display-one" role="form">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="">
</div>
<div class="learn-more magtop10">
<a> <i class=" glyphicon glyphicon-play"></i> Learn More</a>
</div>
<div class="display_advance">
<div class="well">
<p>{{textFooter}}</p>
</div>
</div>
<div class="bs-component">
Clear
Skip
Continue
</div>
</div>
</div>
I have written this script
$(document).ready(function(){
$('.learn-more').click(function() {
$('.display_advance').slideToggle('1000');
$("i", this).toggleClass(" glyphicon-play glyphicon-triangle-bottom");
});
});
I have checked this script and it is working perfectly elsewhere.
Please let me know why this is happening.

As you already stated yourself, the html is loaded dynamically. That means that this html is not yet there when $(document).ready(function() { ... }) is executed. So you're trying to add a click event to an element that doesn't exist at that moment.For this exact situation there's a thing called event delegation.
Instead of doing
$('.learn-more').on('click', function() { ... });
you would do
$(document).on('click', '.learn-more', function() { ... });
This way any elements below document with class learn-more, now or in the future, will get this click event.

How to call $scope.closePopup on click in angular js?

I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl

You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>

they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on

Specify options for multiple modals - Materialize

I am designing a webpage with 2 materialize modals. I want to set dismissible:false for both of them, but it only seems to work with one. The documentation is pretty vague on how to specify which modal you are setting options for, and right now it only works with the first modal. Here is the code where I set the dismissible option to false:
$(document).ready(function () {
$('.modal-trigger').leanModal({
dismissible: false
});
});
And here is the html for the modals:
<div class="row">
<div id="forgotPasswordPIN" class="modal col s10 offset-s1 m8 offset-m2 l6 offset-l3">
<form name="emailForm" ng-submit="submitForm()" novalidate>
<div class="modal-content">
<h4>Forgot PIN/Password</h4>
<span class="flow-text">Send PIN and password to: </span>
<br />
<br />
<div class="input-field">
<input required id="email" type="text" style="font-size:175%;" name="email" ng-model="email" ng-minlength="2" ng-pattern="/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/"/>
<label for="email" class="flow-text">Email</label>
<div ng-messages="emailForm.email.$error">
<div class="red-text" ng-message="required">This field is required</div>
<div class="red-text" ng-message="pattern">Invalid Email</div>
</div>
</div>
</div>
<div class="modal-footer">
Send
<a class="btn disabled" ng-hide="emailForm.$valid">Send</a>
Cancel
</div>
</form>
</div>
</div>
<div id="bottomModal" class="modal bottom-sheet">
<div class="modal-content">
<h4 id="successTitle">Email Sent</h4>
<p id="successContent">
Your password will be sent to <span ng-bind="email"></span>.<br /> Please allow up to 10 minutes for the email to be received.
</p>
<h4 id="errorTitle">Invalid Email</h4>
<p id="errorContent" class="red-text">
Sorry, we do not recognize that email. Please try again.
</p>
</div>
</div>
How do I specify which modal I am setting options for? Thanks in advance.
EDIT: My main issue is that I am opening the second one programmatically, and not with an anchor tag. In Materialize documentation the only way it shows to set options is according to the trigger, or anchor tag. So I may not be able to do it without using an actual trigger.

I know this was asked a while ago, but maybe someone else is having similar issues.
If you use the modal options, as listed by the OP, inside the function you use to open the modal it will work.
For example:
$('#bottomModal').openModal({
dismissible: false
});

you just have to initialize both modals in different calls, using different classes. Doing that you can use different parameters to each one.
$(document).ready(function () {
$('.modal-trigger1').leanModal({
dismissible: false
});
$('.modal-trigger2').leanModal({
dismissible: false
});
});
//Them:
<a class="modal-trigger1 waves-effect waves-light btn" href="#forgotPasswordPIN">Modal</a>
<a class="modal-trigger2 waves-effect waves-light btn" href="#bottomModal">Modal</a>