AngularJS Dynamic Template containing Bootstrap Popover - javascript

I have an AngularJS app which has a dynamically added form element which contains a Bootstrap popover. When the popover is clicked, nothing pops up. I know that popovers are 'opt-in', and have included the required Javascript in my index.html file. However, the popover doesn't appear when clicking on the button in my template form. If I place the popover outside the dynamic form (in index.html), the popover will show. Any advice?
Button for Popover (index.html and phone-number.template.html):
<button type="button" class="btn btn-info" data-toggle="popover" data-trigger="focus"
title="Works outside of template!"
data-content="The popover works when not in the template form! Odd!" >
<span class ="glyphicon glyphicon-question-sign"></span>
</button>
Code to opt in (index.html):
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
relevant plnk: http://plnkr.co/edit/jpvafUhLd0RcAKfsrFWA?p=preview
Thanks, JR

You are initiating popover in document ready but it's initiating before directive load it's html. you need to initiating it on your directive load.
Add a link function put popover init there
Try like this
app.directive('phoneNumber', function(){
return {
replace:true,
scope: {
ngModel: '=',
},
templateUrl: "phone-number.template.html",
link:function($scope,element,attrs){
$('[data-toggle="popover"]').popover();
}
}
});

Related

How to update modal body and open on a link click

I want to change some contents of bootstrap modal body on link click.
Here is the link code:
<a href="" id="login_link" data-toggle="modal" data-target="#myModal" >Log In</a>
And Here is the JQuery code:
$('#login_link').click(function (element) {
$('#myModal').find('#signup_form').hide();
});
Here is the form inside Modal body:
<form class="form-horizontal" id="signup_form" name="signup_form" ></form>
On link click the modal is opening but modal body is not changing.
please help me.
[UPDATES]: Modal is not getting the external js file that manupulate the modal body.
<script type="text/javascript" src="js/code.js"></script>
the js codes works fine when it is the js codes directly embed along with modal.
So I need to know exactly where i have to put the external js file.Currently is it before tag.
Why do you need click function if it is bootstrap modal?
Anyhow you have given "data-target and data-toggle" attribute so you can directly click a button without any click function.
refer https://www.w3schools.com/bootstrap/bootstrap_modal.asp for better understanding of modal
You can try below code. This will hide form on popup of your modal
$('#myModal').on('shown.bs.modal', function () {
$(this).('#signup_form').hide();
});
Try this
$(document).on('click', '#login_link', function(){
$('#myModal').find('#signup_form').hide();
});

Boostrap Modal example doesn't show

I'm testing Bootstrap Modal example "live demo" and I've included bootstrap jquery and js in bootstrap starter template, and also the custom javascript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
but the modal run from my text editor doesn't show like the one on their website does. I click the button and nothing happens.
I've tried using Google Chrome Inspector/console and it shows:
Uncaught ReferenceError: $ is not defined
at the line where the function starts. When I remove the custom js, it doesn't show error but still the modal doesn't show on Chrome, Edge or Firefox.
My code is just the combination of Bootstrap starter template and its modal live demo code in the body so there's no need to post the code here.
Also, please note that I could make the code work (the button works like the example shown on boostrap website) by assigning an id to the button:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">
then add a custom function later:
<script type="text/javascript">
$("#button").click(function() {
$('.modal').modal('show');
});
</script>
However, that's not the same as the sample code provided by Bootstrap.
Generally, this error occurs because you're trying to use JQuery without having referenced it in your project first.
Try adding the following to the top your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Thank you all for your suggestions. I've found out the answer:
The sample code by bootstrap has an error:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
the data-target="" should contain the id of the modal, which, in this case is #myModal not #exampleModal.
it means you are running your script before document is ready. Try this
$(function(){
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
});

AngularJS ng-click not firing from anchor click

I have an AngularJS link that is not firing, so that when the item is clicked, nothing happens. The click event only has one line of code, that works in other parts of the website:
// Load Add Job Template
dashboard.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
And the click element is a simple link:
<a ng-click="loadAddJob()">
<i class="fa fa-plus-square-o"></i><br />
Add <br />Job
</a>
Everything else works on the page so I know the controller and app are both declared correctly. Is there something I'm missing?
your function should be,
$scope.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
if you are using Controller as syntax, the HTML should be changed to,
<a ng-click="dashboard.loadAddJob()">

Ionic not changing views/state unless it is a tab

I have a tab bar system in my Ionic app. However I wanted to have some views that weren't apart of the tab bar and were just a sepertate page to be opened by a button.. For some reason whenever the page isn't a tab it will not open the view. I can see the URL change but it will not change to that view unless the view is also a tab as well. Hopefully that makes sense. I initially was trying to switch pages using Href, but then decided to try ng-click when href wasn't working.. here is my code below..
Where I have the state defined:
.state('tab.friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
Here is the button I had that would call the function:
<button class="button button-clear button-assertive" ng- click="changeview()">New Group</button>
and then here is my changeview() function, which I know is called correctly because the statement is printed:
$scope.changeview = function() {
console.log("hey why isnt this working");
$state.go("tab.friendsadd"); //change state
}
Not sure if this could be the issue but here is my template for the new view that I am trying to open as well:
<script id="templates/friends-add.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<p> Header </p>
<p> Tom brady </p>
</ion-content>
</ion-view>
</script>
Thanks for any help. I hope this is an easy fix...
try
.state('friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
and this in the html
<button class="button button-clear button-assertive" href="#/friendsadd" ui-sref="friendsadd">New Group</button>
and if your template is an actual file, then you don't need the <script></script> tags
If this won't solve it or even if it will, add some debugging to your routes
https://stackoverflow.com/a/28750792/4050230
Hope this helps..

Loader visible while upto ng-include completed

using angularjs to load a jsp page content in div tag. within the jsp page some text and button there. It was successful completed. But it take some time to load the jsp page content within the div. Here i'm using some class to load a loader span. I want to disable the loader after jsp content load in that div.
index.html
<div ng-include="path"></div>
<div>
<span ng-show="loader" class="glyphicon glyphicon-refresh-animate"></span>
</div>
angular.js
$scope.path='https:/..../url.jsp?orderNo='+$scope.orderNo+'&amount='+$scope.amount;
I found the answer and forgot to post them
$rootScope.$on('$includeContentLoaded', function(event) {
$scope.loader = false;
});

Categories