Passing value in Component Template - knockout JS - javascript

I have a component where I'm handling all the errors / error message. I debug it and successfully passed the error string in variable, but I can't display in template
Here is my code
export class ErrorHandlerComponent {
get ComponentName() {
return "error-handler";
}
constructor() {
this.errorMessage = ko.observable();
if (!ko.components.isRegistered(this.ComponentName)) {
ko.components.register(this.ComponentName, {
viewModel: ErrorHandlerComponent,
template:
`
<div class="modal fade" id="modalError" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop='static' data-keyboard='false'>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-exclamation-circle"></i> Error occurred</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body" data-bind="text: errorMessage">
</div>
<div class="modal-footer modal-btn">
<button type="button" class="btn btn-warning btn-lg" data-bind="click: ClickRefreshPage">Refresh</button>
</div>
</div>
</div>
</div>
`
});
}
}
Show(msg) {
this.errorMessage(msg);
$('#modalError').modal('show');
}
Close() {
$('#modalError').modal('hide');
$(".modal-backdrop").remove();
$("body").css({ 'padding-right': '0px' });
}
ClickRefreshPage() {
alert('refreshing...');
}
}
when I call Show function, the parameter is passed and this.errorMessage() had a value, but in text: errorMessage I can't display it.

john is right though, this refers to the ErrorHandlerComponent at the time of components.register and that is obviously always empty.
What I'm missing is an observable parameter passed through from the parent via the components' param property. if you put that in your constructor, ko will link everything through and passing a validationmessage to the component will be displayed.
https://jsfiddle.net/ezw9q02x/1/

Related

boostrap model throwing backdrop error and prevents showing modal

This is my error code
index.js:130 Uncaught (in promise) TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
at index.js:130:13
at Array.forEach (<anonymous>)
at l (index.js:124:28)
at xe._getConfig (backdrop.js:92:5)
at new xe (backdrop.js:33:25)
at Ne._initializeBackDrop (modal.js:218:12)
at new Ne (modal.js:84:27)
at HTMLDivElement.<anonymous> (modal.js:412:47)
at Function.each (jquery-3.6.0.min.js:2:3003)
at S.fn.init.each (jquery-3.6.0.min.js:2:1481)
I am trying to show bootstrap modal when server send the result as success.
This is my javascript code,
console.log(data);
if (data.result == 'success') {
$('.modal-body').html('Form submission was successful!');
$('#modal-dialog').modal('show');
addRoleForm.reset();
} else {
$('.modal-body').html('There was an error with the form submission.');
$('#modal-dialog').modal('show');
}
console outputs result as success,
{result: 'success'}result: "success"[[Prototype]]: Object
This is my modal code,
<!-- close modal because I prevented default -->
<script>
$(document).ready(function () {
$('#close-modal').on('click', function () {
$('#modal-dialog').modal('hide');
});
});
</script>
<!-- jason model dialog box -->
<div class="modal" tabindex="-1" role="dialog" id="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Feedback</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Modal content goes here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="close-modal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Basically I want to show message based on result.

Alert Box to show when error occur

I am looking to implement the bootstrap alert boxes, for when I have a concurrency error on a page. Currently this is how the Controller is setup:
I would do something like this with sweetalert2:
https://jsfiddle.net/x07g89h9/
or with bootstrap
https://jsfiddle.net/mmq27s86/2/
HTML
declare bootstrap modal
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Errors</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="errors">
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
JS
function showModal(errors){
var $msg = $("#errors");
$msg.empty();
for(var i=0; i<result.errors.length; i++){
$msg.append("<li>" + errors[i] + "</li>");
}
$('#myModal').modal();
}
$.ajax({
url: 'any...',
data: JSON.stringify(model),
type: 'POST',
cache: false,
contentType: 'application/json',
success: function (result) {
// in case of error
if(result.ChangeStatus !== "Success"){
showModal(result.errors);
}
},
error: function () {
$('#errorContainer').show();
$('#errorMessage').html('There was a server error, please contact the support desk on (+44) 0207 099 5991.');
}
});
});
Check this or this.
Articles are too long to report whole code here.

How to display modal instead of alert

This is the modal pop-up I want to show when a user selects on a button and he is not logged in.
<!--You must be logged in-->
<div class="modal fade" id="must-be-logged-in" tabindex="-1" role="dialog" aria-labelledby="Log-In" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="Login">Delete Account</h4>
</div>
<div class="modal-body">
<form action="#Url.Action("Register","Home")" method="post">
<label for="confirm">Tour could not be added to Wishlist. Please make sure that you are logged in.</label>
<p class="text-center">
<button class="btn btn-template-main"><i class="fa fa-user-times"></i>Log-In</button>
</p>
</form>
</div>
</div>
</div>
</div>
<!--You must be logged in-->
From my javascript function I am calling it as follows:
function addToWishlistFun(tourid) {
if (document.getElementById("wishlist" + tourid).value == "added")
{
$.post('#Url.Action("RemoveFromWishlist", "Home")', { id: tourid }, function (data) {
if (data) {
var elementid = "wishlist" + tourid;
document.getElementById(elementid).innerHTML = "Add to wishlist" + "<i class=\"fa fa-heart-o\"></i>";
document.getElementById(elementid).value = "notadded";
}
else {
//$("#testPopup").toggle();
document.getElementById("#must-be-logged-in")
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}
});
}
However, when the button is clicked nothing is shown.
Replace:
else {
//$("#testPopup").toggle();
document.getElementById("#must-be-logged-in")
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}
For:
else {
$("#must-be-logged-in").toggle();
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}

angular/bootstrap - modal doesn't display (only backdrop changes)

I've created a directive with that contains a button and it's modal. Because it's used twice on the same page I've had to set some additional attributes that are passed to the template so I can set unique IDs. However when I click the button to display the modal, it only changes the div to use backdrop. It doesn't show the modal.
Directive
<div class="col-md-4">
<qas-modal-find-postcode address="record.Address" town="record.Town" county='record.County' post-code="record.Postcode" div="#contactDetailsPostcode" id="contactDetailsPostcode"></qas-modal-find-postcode>
</div>
Yu can see that I am passing a string with a # and one without, I am going to use these scope variables in the HTML of the directive.
myAppModule.directive('qasModalFindPostcode', ['genericService', 'commonUtilities',
function (genericService, commonUtilities) {
return {
templateUrl: 'Scripts/app/shared/qas/tmplModalQasPostcode.html',
scope: {
postCode: '=',
address: '=',
town: '=',
county: '=',
id: '#',
div: '#',
},
controller: [
'$scope', function ($scope) {
$scope.doSearch = function () {
genericService.doQueryByObj("qas", "postcode", null, null, { Address: $scope.address, Town: $scope.town, County: $scope.county }).then(function (data) {
$scope.addresses = data;
if ($scope.addresses == 0 || $scope.addresses == undefined) {
commonUtilities.addAlert('No Postcodes Found', 'info');
}
});
}
$scope.selectPostcode = function (postcode) {
$scope.postCode = postcode;
}
}
]
}
}]);
})();
HTML
<div tooltip="Find Postcode Requires Address, Town & Country">{{id}}{{div}}
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="{{div}}" ng-disabled="
address == undefined || address.length == 0 ||
county == undefined || county.length == 0 ||
town == undefined || town.length == 0" />
<div class="modal fade" id="{{id}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Postcodes for {{address}} <span class="glyphicons glyphicons-home"></span></h4>
</div>
<div class="modal-body">
<ul ng-repeat="item in addresses">
<li class="btn-link list-unstyled">
{{item.Address}}, {{item.Town}}, {{item.Postcode}}
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>
</div>
</div>
</div>
</div>
I want to set in my button data target = "#string" then in my modal it has "string" without the hash.
However it doesn't work and I don't understand why.
If Id is static , then it should be written as 'Id'
HTML
<div class="modal fade" id="id" tabindex="-1" role="dialog">
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#id" ng-disabled="/>
If Id is dynamic , as id={{id}}
HTML
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#{{id}}" ng-disabled="/>
although , id is always static .
HTML
data target = "#id" as modal div has id ={{id}}

Why my click event is attaching many times in modal button inside backbone view

In back bone view i am i am rendering template which is having bootstrap modal. My backbone view having a event for bootstrap modal window, First time when i open bootstrap window its working fine. Next time if i open bootstrap modal window that event attaching many times.
Template:
<script id="adUser-template" type="template/underscore">
<div class="modal fade" id="adUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Active Directory Search</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id='btnSearchUser' class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
View:
var ADSearchView = Backbone.View.extend({
el: 'form',
template: _.template($('#adUser-template').html()),
initialize: function () {
this.render();
},
render: function () {
var renderedTemplate = this.template({});
this.$el.append(renderedTemplate);
$('#adUserModal').modal('show');
},
events: {
'click #btnSearchUser': function (e) {
e.preventDefault();
this.adSearch();
}
},
adSearch: function () {
//below used to detach the click event once function called
$('#adUserModal').on('hidden.bs.modal', function (event) {
$(this).find('#btnSearchUser').off('click');
});
},
});

Categories