I'm trying to print a button in html passing it as a parameter in angular2 but angular2 never translate it.
modal.component.ts
this.footer = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`
modal.component.html
<div class="modal-footer" [innerHTML]="footer"></div>
output html
<div class="modal-footer" ng-reflect-inner-h-t-m-l="Close">Close</div>
Should be innerHtml instead of innerHTML. It is case sensitive.
For example :
<div class="modal-footer" [innerHtml]="footer"></div>
Related
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>
</tr>
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td><a ng-href="">{{product.productName}}</a> </td>
<td>{{product.shortDescription}}</td>
<td>{{product.url}}</td>
<td>{{product.likes}}</td>
<td><img src="img/trash.png" alt="Delete" data-toggle="modal" data-target="#myModal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Delete Pitch</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete the pitch?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closebtn(product.productName)">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></td>
</div>
</div>
</div>
</div>
</tr>
Am creating a list of products from a service. Wen the user clicks on delete button in a particular row, i want to pass the corresponding product name as a parameter to the function. Have created a modal view to ensure the delete using bootstrap. The ng-click method picks only the first productname in the list whichever row am selecting. Please help to fix this.
Instead of using the Bootstrap javascript, you should use a directive like the modal of ui-bootstrap. See this
You add an ng-click to your image and pass the item to the modal. With the callback of the opened modal you can decide to delete your item or not.
try this:
<td><img src="img/trash.png" alt="Delete" data-toggle="modal" data-target="#myModal" ng-click="productToDelete = product"></td>
your button:
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closebtn(productToDelete.productName)">Delete</button>
in the solution below you define productToDelete variable, that take value after clicking by img, further you can work with this variable
When the click event is fired the variable product used within the loop references to the same object because it's overwrittern each cycle and point to the last object.
try this way:
ng-click="closebtn(products[$index].productName)
First of all, use ui-bootstrap plugin instead of bootstrap's JavaScript. It has $uibModal service to manage modal windows with AngularJS style. Your code should be look like this:
Main view
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td><a ng-href="">{{product.productName}}</a> </td>
<td>{{product.shortDescription}}</td>
<td>{{product.url}}</td>
<td>{{product.likes}}</td>
<td><img src="img/trash.png" alt="Delete" ng-click="delete(product)"></img></td>
</tr>
Click-handler in your controller
$scope.delete = function(product) {
$uibModal.open({
controller: 'your-modal-controller',
templateUrl: 'path-to-modal-template',
resolve: {
productToDelete: product
}
}).result.then(function(success){
// delete product from list
})
};
Don't forget to inject $uibModal. resolve property allows you to pass your product to controller named your-modal-controller. Then you can get any property of product. For example, it's name.
If you need only pass the product name, you can use this resolve block:
resolve {
productName: product.productName
}
This drives me crazy. I want to pass a string literal as a parameter to a function in HTML onclick property containing a double quote.
My HTML element looks like this:
<button onclick = "ok_button_click(""Harry Potter "")" type="button" class="btn btn-default">ok</button>
But when I load the page and open it by Inspect Element, I see a space inserted between the first quote resulting in this:
<button onclick = "ok_button_click(" "Harry Potter"")" type="button" class="btn btn-default">bad</button>
Why does the browser insert a space ???
If you are trying to pass a string value with quotes then you have to use " like this:
<button onclick = "ok_button_click('"Harry Potter"')" type="button" class="btn btn-default">bad</button>
If you just want to pass in a string literal you can just use a single quote (or the opposite of what the attribute started with) like this:
<button onclick = "ok_button_click('Harry Potter')" type="button" class="btn btn-default">bad</button>
That is because when the DOM is being parsed the browser uses " as delimiters, so in your case it is assigning ok_button_click( to the attribute onclick and Harry Potter as a separate (and unknown) attribute.
A better way of writing this code would be mixing single and double quotes as in:
<button onclick="ok_button_click('Harry Potter')" type="button" class="btn btn-default">ok</button>
A good start on HTML debugging is to run it through a validator, like in https://validator.w3.org/#validate_by_input
Try :
<button onclick = 'ok_button_click("Harry Potter")' type="button" class="btn btn-default">ok</button>
I'm trying to show one alert in some screen with this code:
<div id="errorDiv" class="alert alert-danger hidden">
<label id="errorLabel"></label>
<button type="button" class="close" data-hide="alert" aria-hidden="true">×</button>
</div>
By default, errorDiv div is hidden because it has the value hidden in the class attribute (I'm using bootstrap).
I would like to find in Thymeleaf something similar something similar to th:classappend but instead of adding a value, removing the 'hidden' value in the class attribute to show the div.
I think you can use conditional css class include with elvis operator, something like:
<div id="errorDiv" class="alert alert-danger" th:classappend="*{isError}?:'hidden'">
<label id="errorLabel"></label>
<button type="button" class="close" data-hide="alert" aria-hidden="true">×</button>
</div>
this should append 'hidden' to the class attribute only if *{isError} is null.
see http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#default-expressions-elvis-operator
I have this piece of code in a ASP.NET MVC view:
<div ng-repeat="it in (#source)">
<button class="btn hvr-glow btn-success" >
{{it.name}}
<p ng-if="it.check==true"><i class="fa fa-check-circle-o" ng-click="it.check=false"></i></p>
<p ng-if="it.check==false'"><i class="fa fa-circle-o" ng-click="it.check=true"></i></p>
</button>
</div>
source is a list of objects of type ApplicationStatus, which contain a boolean field named check. I want to change the type of the font awesome icon on click. But I don't see the icons. Source is correctly loaded. Where is the problem ?
You can use ng-class for that. For example:
<i ng-class="{'fa fa-check-circle-o': check, 'fa fa-circle-o': !check}"
Here's another question related to ng-class
Note - a ternary operator would probably be best in your case
<div ng-repeat="it in source">
<button class="btn hvr-glow btn-success" ng-click="it.check = !it.check">
{{it.name}}
<p>
<i ng-class="{'fa fa-check-circle-o': it.check, 'fa fa-circle-o': !it.check}"></i>
</p>
</button>
</div>