We Keep Coding

Passing value in Component Template - knockout JS

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/

PHP & Ajax , Javascript - How to display modal when data is fetched into the database instead of text

How can I fetch the data and displayed it as a Modal Popup and not a Text,
and here comes the problem because this code
errors
database structure
index.php
<!-- The Modal -->
<div id="myModal" class="modal">
?>
</div>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "select.php", //create a php for the SELECT STATEMENT
//data: $("#signin").serialize(), // serializes the form's elements.
success: function (data) {
$("#myModal").html(data);
modal.style.display = "block";
}
});
</script>
Here is the second page which is select.php
here is where the modal will be fetched
select.php
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link, "autorefresh");
$res = mysqli_query($link,"select * from table1");
while($row=mysqli_fetch_array($res))
{
echo ' <div class="modal-content">
<span class="close">×</span>
<p>'.$row["name"]." ".$row["city"].'</p>
</div>';
}

You did't define what modal is.... Try this lines,
success: function (data) {
$("#myModal").html(data);
$("#myModal").slideDown('slow');
}
The line $("#myModal").slideDown('slow'); will show your model with slideDown effect.
Also you can use $("#myModal").css('display','block'); to display instead of the slideDown effect.
MODAL POPUP
To create a modal popup you need to use bootstrap.
add boostrap to your project then try this,
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And in your javascript,
success: function (data) {
$("#myModal .modal-body").html(data);
$("#myModal").modal('show');
}
The line $("#myModal").modal('show'); will popup the modal.

Linking a modal to an entry field and validating using JavaScript

With the following code I'm trying to validate an entry field in JavaScript. The validation requires only 10 characters. When you authenticate, it is supposed to display a modal with a confirmation message:
function myFunction() {
var con_code, text;
//getting the field
con_code = document.getElementById("con_code").value;
if ($.trim($('con_code').val()).length == 0) {
text = "Authentication code is not valid";
}
//trigger to the modal if it meets the condition
$(document).ready(function() {
$("#con_code").click(function() {
$("#myModal").modal();
});
});
document.getElementById("error_con_code").innerHTML = text;
}
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<div class="form-group">
<label>Confirmation Code.</label>
<input type="text" name="con_code" id="con_code" class="form-control" required="required" placeholder="Enter your Confirmation Code" />
<br> //the error code display
<span id="error_con_code" class="text-danger"></span>
<br> //the authenticate button
<button type="button" class="btn btn-success btn-sm" id="con_code" onclick="myFunction()">Authenticate</button>
</div>
<!-- Modal -->
<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> //the modal
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
However, it is not authenticating the confirm code. How can I fix it?

You have an error at:
if($.trim($('con_code').val()).length ==0){...}.
It should be $('#con_code')
Also you have 2 elements with the same id="con_code".
Please check with the following codes.
I am assuming you want to show the modal when there is 10 chars in the input field. If the rule changes, then please edit at: 'if ($.trim(con_code.val()).length != 10) {}' in the below codes.
$(document).ready(function() {
myFunction();
});
function myFunction() {
$("#con_code_btn").click(function() {
var con_code = $('#con_code');
var error_con_code = $('#error_con_code');
error_con_code.html('');// Remove Previous Error Message(if any);
if ($.trim(con_code.val()).length != 10) {
error_con_code.html("entication code is not valid");
}
else {
$("#myModal").modal();
}
});
}
Also please change the id of the button to "con_code_btn" in the form:
<button type="button" class="btn btn-success btn-sm" id="con_code_btn" onclick="myFunction()">Authenticate</button>

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.

PHP jQuery load data into bootstrap modal box

I need to load dynamic data into bootstrap modal box.
JS:
$(function() {
$('.push').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: '../controller/booksdetails.php', // in here you should put your query
data: 'cmid=' + id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function(r) {
// now you can show output in your modal
$('#cm').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
PHP file :
if(isset($_POST['cmid'])){
$DB = mysqli::f("SELECT * FROM " . BOOKS . " WHERE id = ?",filter_var($_POST['cmid'], FILTER_VALIDATE_INT));
print_r($DB);
}
and print data into modalbox div with class="something". this method true worked and print all php array result.
now I need to work with php array aftar load data into modalbox(work with php class, secure data, ....). I mean is: load php data into modalbox (ie : json) not print result into modalbox.
how do can I generate this?

Hi man here an example: http://jsfiddle.net/leojavier/kwh2n00v/1/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="insert">
insert data
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal title</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" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS
$('#insert').on('click', function (){
// This should be on your AJAX Success
var data="some dynamic data";
$('.modal-body').html(data);
$('#myModal').modal('show');
//--------------------------------------
})
I hope this helps...
http://jsfiddle.net/leojavier/kwh2n00v/1/