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
Related
I'm using Vue (just started learning it) and Bootstrap to make a blog and I want a modal window (that shows the post's name/etc) to pop up when the user clicks on the comment button. However, right now the modal window only gets the post information from the latest blog post. This means that even if you click the 1st post, you would get the id information and post title of the latest one... Any suggestions or solutions? Thanks in advance!
It seems that the main problem with my code is that it makes n numbers of modals in vue if you have n posts. I have tried slots but the modals started displaying the first post instead of the last one. I wonder if all my modals are being displayed at once but I only the last one... Should I use an index instead?
Is there any way to make only one modal that gets and display the information of the post clicked?
Here's my code of the post component
Vue.component('posts', {
props: ['post', 'loggedUser'],
template: `
<div class='blog-post py-2'>
<h3> {{post.title}} </h3>
<h6> Posted by {{post.postedBy}} on {{formatCompat(post.createdAt)}} </h6>
<span class='comments'>
<i class='far fa-comment-dots ml-3' data-toggle="modal" data-target="#commentModal"></i>
{{post.comments.length}}
</span>
</div>
`
My modal component: (mostly from the bootstrap docs)
Vue.component('modal', {
props: ['post'],
template: `
<div>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="commentModalLabel">Comment on {{post.postedBy}}'s post! ({{post.title}})</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
`
})
Here, I'd like the {{posted.title}} and other information to reflect the post where the comment button is clicked, but it's showing the latest post.
Parent element:
const postComponent = new Vue({
el: '#posts',
data: {
posts: null
},
methods: { // mostly code unrelated to modal stuff
}
My pug file:
#posts
if user
posts(name=username, v-for='post in posts' v-bind:post='post' v-bind:key="post.id" v-on:like-post='like' logged-user=loggedUser v-on:comment-post='comment')
modal(v-for='post in posts' v-bind:post='post' v-bind:key="post.id")
You need to add a custom data property that reflects the selected post for the template to read.
data: {
...
selected: '',
...
}
Then, you need a method that will assign the selected property to whichever post is clicked.
methods: {
changeTitle(postId) {
const currentPost = posts.filter((post) => {
return post.id == postId;
});
this.selected = currentPost.id;
}
}
So now that you have a data property to represent the current selected title, and a method to change that property with a click, you need to assign the directive for the method to the post. So, add this to the html tag you want to trigger the method:
#click = "changeTitle(postId);"
This will trigger the method along with the post id from the post that called the method. The current title can now be rendered anywhere in the template that has access to the data, like this:
{{selected}}
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()" >
I just starting in a project where we're using thymeleaf and I'm new to the technology.
It's a simple modal to confirm an object to be deleted. So they want me to add the name of the item we're deleting on the message instead of a generic message like: "Are you sure you want to delete?"
They want: "Are you you want to delete Item_Name?"
So I need to pass this name as parameter.
That's the code I have the display the modal:
<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">
And that's the code I have on the modal html:
<form role="form" th:action="#{/deleteAssignment}"
name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">
<div class="modal-header">
<h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
</div>
<div class="modal-body">
<div class="form-group">
<p>Assignment will be deleted, are you sure you want to proceed?</p>
<input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnDelConfirm" class="btn btn-primary">
Yes
</button>
<button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
No
</button>
</div>
</form>
At this point is where I need to add more information on the confirmation message about the assignment item being deleted.
Already tried some approached to get the parameters but didn't work so I'm looking for more option.
Thank you!
Thymeleaf is just template engine that takes your templeate and generate static html out of it. So passing dynamic values to your modal is a javascript work (unless you generate separate modal for each item, but this would be silly).
Using thymeleaf you have to generate a data- attribute containing desired item's name inside the button which opens modal, and that's all. You've already did such thing within th:attr:
th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'"
The code above will generate attributes data-object-id,data-object-name and data-target inside the button. I assume that data-object-name is the one you want to use (however it looks more like an URL).
Now you can customize your modal's content using javascript. I can see, that you are using bootstrap as your frontend library, so you should take a look at this example, to have an idea how to accomplish that.
Javascript code below should work fine for you:
$('#deleteAssignmentModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var objectName = button.data('object-name') // Extract info from data-object-name attribute
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body p').text('Do you want to delete ' + objectName + '?')
})
The sample project on GitHub you can clone and test it. Full video under the readme.
https://github.com/ibrahimkarayel/todoBoot/blob/master/src/main/resources/templates/home.html
<div class="modal modal-delete" th:id="modal-delete+${task.id }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h3 id="delModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><strong>Are you sure you want to
delete this task ?</strong></p>
</div>
<div class="modal-footer">
<button class="btn " data-dismiss="modal" aria-hidden="true">
Cancel
</button>
<a th:href="#{/task/delete/{id}(id=${task.id})}">
<span class="btn btn-danger" value="delete">Delete</span></a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--end delete modal-->
<script>
$('#modal-delete').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
});
</script>
The question is: How to call popup page from AngularJS side?
Currently I have popup page shown on anchor HREF click in HTML like this:
1) the HTML part is following:
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" template-url="contactus"></modal>
CONTACT
2) the directives created in AngularJS side:
(function(angular) {
angular.module("app")
.directive('modal', function() {
return {
restrict : 'EA',
scope : {
title : '=modalTitle',
header : '=modalHeader',
body : '=modalBody',
footer : '=modalFooter',
callbackbuttonleft : '&ngClickLeftButton',
callbackbuttonright : '&ngClickRightButton',
handler : '=lolo'
},
templateUrl : function(elem, attrs) {
if (attrs) {
if (attrs.templateUrl === 'sendverify') {
return "./pages/register/sendverificationcode.html";
} else if (attrs.templateUrl === 'contactus') {
return "./pages/contact/contact_us.html";
}
}
},
transclude : true,
controller : function($scope, $attrs) {
$scope.handler = $attrs.templateUrl;
},
};
})
}(angular));
3) And contact_us.html :
<div id="{{handler}}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" aria-hidden="true">×</button>
<h4 class="modal-title">
<h2>{{header}}</h2>
</h4>
</div>
<div class="modal-body">
<div>
<p>
<b>HAVE A QUESTION OR COMMENT? NEED HELP?</b>
</p>
</div>
<div>
<p>How can we be of service? For answers to all your questions, call us. We 're happy to help. Or, send us an email below and we 'll get back to you as soon as we can.</p>
</div>
</div>
<div class="modal-footer">
<button>1-844-WHATEVER(123-4567)</button>
<button>hello#whatever.com</button>
</div>
</div>
</div>
</div>
Everything works fine, you click CONTACT Anchor element and it shows the popup, but How to call popup page from AngularJS side?. For example you have some logic in AngularJS and based on the result you call the pop up and pass some other data to it to display?
Hoping someone might be able to help me with something I am experimenting with in MVC 4 using bootstrap.
I have a strongly-typed index view which displays items in a table along with edit and delete action icons in each line.
#model IEnumerable<Models.EquipmentClass>
....
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#item.ClassId
</td>
<td>
#item.ClassName
</td>
<td>
<a href=#Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-edit"></i>
</a>
<a href=#Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
The EquipmentClass controller returns the Edit view for the selected item based on the id. All great and as expected at this point
public ViewResult Edit(int id)
{
return View(equipmentclassRepository.Find(id));
}
What I would like to know is how to open the edit form in a bootstrap modal dialog.
I could try and substitute the edit action in the table with the following and then have a modal div at the bottom of the view but how do I pass in the ID of the selected item and which html helper should I use in the modal section?
<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>
....
<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
#Html.Partial("Edit")
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I'd greatly appreciate any advice, many thanks
I think that I have a solution to your problem. To make your MVC application work as you want it to you should make some changes to the code you provided:
1. Add a div representing a modal for editing an item at the bottom of your layout page:
<div id="editModalContainerID" class="modal hide fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that this modal is strictly connected to the controller action responsible for editing an EquipmentClass item.
2. Add a jQuery function to your custom javaScript:
function showModal(modalContainerId, modalBodyId, id) {
var url = $(modalContainerId).data('url');
$.get(url, { id: id }, function (data) {
$(modalBodyId).html(data);
$(modalContainerId).modal('show');
});
}
As you can see this function takes id as one of its parameters. In general its purpose is to replace the empty modal body with what we will put in a separate partial view and than display whole container as a modal page.
3. Put your modal div in a separate partial view, and call it Edit (has to be the same as your controller action name). You will have to change your Edit partial name to sth else, for example EditBody.
The Edit partial view should now look sth like this:
#model EquipmentClass
<!-- modal div -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
#Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
Close
Save changes
</div>
4. Change the controller action so that it returns the partial view created in the previous step:
public PartialViewResult Edit(int id)
{
return PartialView(equipmentclassRepository.Find(id));
}
5. Change the edit 'a' anchor so that it calls created jQuery function:
#model IEnumerable<Models.EquipmentClass>
....
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#item.ClassId
</td>
<td>
#item.ClassName
</td>
<td>
<a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', #item.ClassId)">
<i class="icon-edit"></i>
</a>
<a href=#Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
This way each time an 'a' anchor with edit icon is clicked the showModal function (with related id being passed) is fired and a bootstrap modal with related data is displayed.
I'm sure there is a better way to do it, but this way worked for me just fine :)
Hope this helps you a bit :)
Przemo answer worked for me, however do note that I only managed to get it to work when I changed the first block of code from
<div id="editModalContainerID" class="modal hide fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
to
<div id="editModalContainerID" class="modal fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that I removed the "fade" class from editModalContainerID. Otherwise the partial view does not load. Hope this helps anyone else with the same issue.