I have two html pages. In the main page, when a link is clicked, the url behind the link should be opened in a small inline window. After searching a lot I found that I could use Innerhtml to load the url into a small div (I also tested iframe and ajax but they did not work in chrome). 1. Is it possible to call a function defined in main page, inside the innerhtml? 2. Inside the main page and innerhtml page I have the same tabs and objects of same name, and one of the tabs is called map. when a button is clicked in innerhtml, I want a point to be added in the map of main page not the map of innerhtml itself.
Here is a part of the code:
<script>
function load_home(url) {
document.getElementById("content").innerHTML = '<object type="text/html"
data = "' + url + '" > < /object>';
}
</script>
<ul class="list-group gn-resultview">
<li class="list-group-item" data-ng-repeat="md in searchResults.records" gn-displayextent-onhover="" gn-zoomto-onclick gn-fix-mdlinks="">
<div class="media-body">
<div draggable id="content"> </div>
<h4>
<input gn-selection-md type="checkbox" ng-model="md['geonet:info'].selected" ng-change="change()" />
<!-- Icon for types -->
<a ng-href="#/metadata/{{md.getUuid()}}" onclick="load_home(this.href);return false;" title="{{md.title || md.defaultTitle}}">
<i class="fa gn-icon-{{md.type[0]}}" title="{{md.type[0] | translate}}"/>
{{(md.title || md.defaultTitle) | characters:80}}</a>
</h4>
<p class="text-justify" dd-text-collapse dd-text-collapse-max-length="350" dd-text-collapse-text="{{md.abstract || md.defaultAbstract}}"></p>
<blockquote ng-if="md.getContacts().resource">{{::md.getContacts().resource}}</blockquote>
</div>
<div>
<gn-links-btn></gn-links-btn>
</div>
</li>
</ul>
In the innerhtml page you can call a function of main page such as "test()" like this:
parent.test()
So as an example:
In the innerhtml url:
<script>
function test1()
{
parent.test();
}
</script>
in the innehtml page:
<button type="button"
class="btn btn-default btn-sm btn-block"
data-ng-show="hasAction(mainType)"
onclick="test1()" >
Related
I'm using anchor tags in my navbar to send users to different sections on the about page. Problem is, it only works if I'm already in the about page. It doesn't jump to the specific location I want it to when I click on those links in my navbar from other pages (like for example, homepage).
This is my navbar.html:
<mat-menu #aboutMenu="matMenu">
<button mat-menu-item>
About
</button>
<button mat-menu-item>
Token
</button>
<button mat-menu-item>
Team
</button>
</mat-menu>
And this is my about.html:
<a name="about">
<h1>About</h1>
</a>
.
.
.
<a name="token">
<h2>Token Details</h2>
</a>
.
.
<a name="team">Team Members</a>
I solved using the following code:
.html:
<a [routerLink]="'/about-us'" fragment="about" (click)="onAnchorClick()"> About </a>
.ts:
onAnchorClick ( ) {
this.route.fragment.subscribe ( f => {
const element = document.querySelector ( "#" + f )
if ( element ) element.scrollIntoView ( true )
});
}
I solved it with the help of #davimargelo's answer like this:
navbar.html
<button
mat-menu-item
[routerLink]="'/about-us'"
fragment="token"
(click)="onAnchorClick()"
class="button__mat--menu"
>
Token
</button>
navbar.ts
onAnchorClick() {
this.route.fragment.subscribe((f) => {
const element = document.querySelector('#' + f);
if (element) element.scrollIntoView(true);
});
}
about-us.html
<a name="token">
<h2 id="token-details">Token Details</h2>
</a>
To navigate to another page on clicking a button just use angular event binding syntax.The event binding listens to the click event of the button and calls its respective method in the component.ts file.
Refer link for more understanding:
https://angular.io/guide/event-binding
So I have a ng-repeat iterating through an array that contains the elements form an API. Through the ng-repeat , I print out the same number of div(s) containing the names of some properties as the number of property present in the API in different objects. Now the next step that I want is that when I click on any property Name div, another screen is opened up which has the details of the property ( details are then fetched from the API which I can do). What I am not able to do is how to use the ng-click that it goes to the details screen but according the property that is clicked. I know that somehow I need to pass the property ID in ng-click and lead it to a different screen. Can't figure out how. Kinda am new to Angularjs so can someone help?
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="Something here which I cant figure out ">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
Now when the divs are created for the different properties when I click on one of them a new screen comes and then I show there what I want to show for the property.
PS- for property ID : prop.id
Use can directly write function call.
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="propDetails(prop.id)">
<p class="propSummaryName">{{ prop.name }}</p>
$scope.showDetails(propId) {
// do want ever you want to };
If you want to show property details on another screen then you can use
modal or routing.
hey it's Simple You can call the #scope function in the ng Click and inside the function call the reset service and then open the popup
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp" ng-controller="test">
<div ng-init="loadData()">
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="openMyPopUp(prop)">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Name : {{popupData.name}}
Id : {{popupData.id}}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('test', function($scope, $http) {
var popup = angular.element("#myModal");
//for hide model
popup.modal('hide');
var url = 'your-url.com/rest/api'
$scope.loadData = function(){
$http.get(url).then(function(res){
$scope.propertyDetails = res.data;
});
}
$scope.openMyPopUp= function(data) {
$http.get(url + '?id=' + data.id).then(function(res){
$scope.popupData = res.data;
});
//for show model
popup.modal('show');
}
});
</script>
If you need to rederct to another page mean you can do like this
var url = "http://" + $window.location.host + "/Account/Login";
$log.log(url);
$window.location.href = url;
inside this function
I've looked for solutions online and it seems that there's something called the data-attribute that I can use to do what I want.
I have two different modal windows, each with its own content, and I want to link each of them to a specific button (or in my case, an image that the user will click on). I tried putting in the "data-attribute", but the second modal window (the one with the id, fujian), is not popping up when I click on the corresponding image.
Does anyone have any suggests or ideas as to why this isn't working and what I should do?
<!--The two image icons that user clicks on-->
<a href='#' onclick='overlay()'><img src="city1.png" alt="sichuan" class="city1"/></a>
<img src="city2.png" alt="sichuan" class="city2"/>
<div id="overlay">
<!--The two separate modal windows-->
<div class="modal">
<img src="sichuan.png" alt="sichuan popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
<div id="overlay">
<div class="modal" id="fujian">
<img src="fujian.png" alt="fujian popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
And here is my overlay() function if you need to see it:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
id's must be unique through out the document and you have repeating id <div id="overlay">
You can achieve with single modal what you are trying to achieve with 2 modals with data-attributes
Missing key div elements in modal HTML and that's why with your code only modal-backdrop is showing, nothing else
as far you asked about data-attribute, the anchor <a></a> element has two custom data attributes: data-toggle and data-target.
The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open.
So whenever <a></a> link like that is clicked, a modal with targeted id will appear.
let's suppose you have 2 images and wants to show in modal, opening modal with default bootstrap behaviour and also can pass the image to modal using data-attributes which in this case data-image and using bootstrap modal event listener, can show the image in modal when modal open (no need of 2 modals)
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-primary">Image 1</a>
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" class="btn btn-warning">Image 2</a>
And Modal HTML will be
<div id="fujian" class="modal fade">
<div class="modal-dialog"> //Missing this Div
<div class="modal-content"> //Missing this Div
<div class="modal-body">
<img class="showimage" src="" /> //Image will be shown Here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and bootstrap event listener
$(document).ready(function () { //Dom Ready
$('#fujian').on('show.bs.modal', function (e) { //Event listener
var image = $(e.relatedTarget).data('image'); //Fetch image url from modal trigger <a> link
$(".showimage").attr("src", image); //load image in modal
});
});
Fiddle
I have been trying and failing to add a line break to a DRY bootstrap modal.
Here is my hyperlink template code that sends the message to the modal show code:
Delete
Here is my jquery bootstrap modal code:
$(document).ready(function() {
//START: Delete code.
$('a[delete-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#deleteConfirmModal').length) {
$('body').append('<div id="deleteConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="deleteConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="deleteConfirmLabel">{% trans "Delete" %} - {{ resume_details_trans }}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button> <a class="btn-u btn-u-red" id="deleteConfirmOK" onclick="showProgressAnimation();">{% trans "Delete" %}</a></div></div>');
}
$('#deleteConfirmModal').find('.modal-body').text($(this).attr('delete-confirm'));
$('#deleteConfirmOK').attr('href', href);
$('#deleteConfirmModal').modal({show:true});
return false;
});
//FINISH: Delete code.
});
Add this to the button to delete the record:
<a href="url"
delete-confirm="Your Message Here!!<br /><br /><span class='confirm_delete_warning_red_bold'>You can even add in css to highlight specific text - Are you sure?</span>"
>
Delete
</a>
And in your jquery code change the .text to .html. Text will render the text and .html will act as html and display the line breaks and css in the span tag.
$('#deleteConfirmModal').find('.modal-body').html($(this).attr('delete-confirm'));
This will work for your code. Just watch your use of ' and " (single & double talking marks). Don't mix them up.
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/