We Keep Coding

How to show same swagger-editor twice on the same page in Angular 6

I want to implement the swagger-editor from npm swagger-editor-dist two times on the same html in Angular 6+. I have displayed swagger-editor on expand button in a modal and also below the expand button. However, it displays swagger only in the expanded modal and not in the div below it.
How can I display the same Swagger both the times?
Front -page ui-
Swagger in Modal -
code -
app.component.html
<div class="form-group">
<i class="fa fa-expand" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12">
<div id="swagger-editorInbox" style="height:500px">
</div>
</div>
</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 class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
declare const SwaggerEditorBundle: any
export class swaggerComponent implements OnInit{
editorInbox :any
ngOnInit(){
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox"
})
mySwagger = '....//my swagger// ...';
this.editorInbox.specActions.updateSpec(mySwagger);
}
}

Create 2 ids. you may need to do styling. very hard to do styling. I will recommend show only one at a time. Toggle content only
Id:
<div id="swagger_editorInbox1" style="height:500px"></div>
</div>
<div id="swagger_editorInbox2" style="height:500px"></div>
</div>
//JS
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox1"
})
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox2"
})

app.component.html
<div class="form-group">
<i class="fa fa-expand" (click)="showSwaggerModalFunction(); showSwaggerModal= 'true'" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [hidden]="showSwaggerModal !== 'true'">
<div class="col-12">
<div id="swagger-editorInboxDummy" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" (click)="onSaveModal()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
showSwaggerModal : string = 'false'
showSwaggerModalFunction(){
this.showSwaggerModal = 'true';
var editorInboxDummy = SwaggerEditorBundle({
dom_id : "#swagger-editorInboxDummy"
})
editorInboxDummy.specActions.updateSpec(mySwagger)
}
onSaveModal(){
this.showSwaggerModal = 'false';
}

Load a modal if a session exists is not working

I want show a modal if session is exist, I am tried like this but it's not showing
<?php if(isset($_SESSION['Message1'])) { ?>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Welcome...</h4>
</div>
<div class="modal-body">
This is test
</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>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php } ?>
Thanx in advance

Maybe this will help you.
Instead of $(window).load() try
$( "#myModal" ).load(function() {
$('#myModal').modal('show');
});

you just forgot to started the session.
so just added this line before you checked the session.
session_start();

How do I remove content from a modal-body upon closing the modal?

My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" 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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->

You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" 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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->

Try doing $('modal-body').empty() instead of clear

How to call class first without call modal if it meets certain conditions?

Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/
My HTML Code is like this :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
My Javascript Code is like this :
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});
When response != 'exist_session', I want the system display alert message without display modal. So only display alert message.
Any solution to solve my problem?
Thank you

You remove data-toggle and data-target in button
<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>
then you can call it in javascript.
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
} else {
$('#myModal').modal()
}
}
})
});
Working Demo
https://jsfiddle.net/xzxrp7nn/4/

How to dynamically change bootstrap modal body

So I have Bootstrap modal defined as:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And I want to edit the empty body with jscript. Im a beginner in Javascript so I'll appreciate the simplest answer.

Please have a look at this fiddle.
Here is the code:
$(function(){
$('.custom-modal').click(function(e){
e.preventDefault();
var mymodal = $('#myModal');
mymodal.find('.modal-body').text('hello');
mymodal.modal('show');
});
})

Try this one:
$('.modalShow').click(function(event){
event.preventDefault();
var e = $(this);
var title = e.data('title');
var body = e.data('value');
$('.modal-title').html(title);
$('.modal-body').html(body);
$('#myModal').modal('show');
});

the simplest solution is - you can use javascript's innerHTML to change html of your modal body like this -
//get your modal body by class and change its html
document.getElementByClass("modal-body").innerHTML = "<p>some text</p>";

I have done this in C# as follows.
C# :
System.Text.StringBuilder stringBuilder = new System.Text.StringBuilder();
stringBuilder.Append(#"<script language='javascript'>");
stringBuilder.Append(#"$('#errorModal').find('.modal-body').text('"+ your error message + "');");
stringBuilder.Append(#"$('#errorModal').modal('show');");
stringBuilder.Append(#"</script>");
ClientScript.RegisterStartupScript(this.GetType(), "JSScript", stringBuilder.ToString());
HTML :
<div class="modal fade" id="errorModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>