Develop Reference

Bootstrap Modal refresh in Javascript

I am working on project, from datatable i have button, when user clicks on it, it will open popup and shows pdf, (which i am rendering). Once user closed modal, next time if he opens button, it will show previous data. its not refreshing.
I have tried $(this).removeData('bs.modal'); it doesn't worked for me.
Here is my Modal code. Any idea how we can refresh only modal?
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-xl">
Modal content
<div class="modal-content">
<div class="modal-header">
Preview
<button type="button" class="close" data-bs-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="my_pdf_viewer">
<div id="navigation_controls" style="text-align:center">
<button class="btn btn-primary" id="go_previous">Previous</button>
<input id="current_page" value="1" min="1" max="5" type="number" />
<button class="btn btn-primary" id="go_next">Next</button>
</div>
<br />
<div id="zoom_controls" style="text-align:center">
<button class="btn btn-primary" id="zoom_in">Zoom In (+)</button>
<button class="btn btn-primary" id="zoom_out">Zoom Out (-)</button>
</div>
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
</div>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How to implement signature pad in wordpress

I am trying to get signature pad to show up in my wordpress page.
I go to https://github.com/szimek/signature_pad and install the script. But nothing renders in wordpress. is there a specific way to make js work in wordpress?
Here is a js fiddle link of it: https://jsfiddle.net/szimek/jq9cyzuc/
*Ive added the following to header, and the html to the body (nothing happens) :
placed the following html
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>

I have created signature code, it's working fine. Take a look at demo.
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas width="664" height="235" style="touch-action: none;"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
</div>
<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<script src="https://szimek.github.io/signature_pad/js/app.js"></script>

ng-repeat inside a script template not rendering

I have the following script template that I use to display a modal dialog inside a div element.
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Export a Table</h3>
</div>
<div class="modal-body">
<h3>Select Entity</h3>
<select id="selected-entity" >
<option ng-repeat="num in entities" value={{num}}></option>
</select >
<h3>Select Environment</h3>
<select id="selected-environment">
<option ng-repeat="e in envs" value={{e}}></option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Create</button>
<button class="btn btn-default" ng-click="open()">Export</button>
<button class="btn btn-default" ng-click="open('sm')">Import</button>
</div>
When I perform a console.log on the two objects (entities, and envs) for which I am calling ng-repeat, I am able to successfully log their contents to the console. Their content, however, is not displayed in the modal dialog that I pop up.
I'm new to Angular and any help would be greatly appreciated.

Its better to use ngOptions to achieve this, but if you still want to do it with ng-repeat then see the following plunker.
<select>
<option ng-repeat="e in envs">{{e}}</option>
</select>
Please follow the plunker link for code.
Plunker

Issue on Click and Alert on Button in Bootstrap Popover

Can you please take a look at this demo and let me know why the
$(".onealert").on("click",function(){
alert("You clicked on A");
});
is not functioning?
here is the code I have :
<div class="the-box">
<div class="pull-right btn-group btn-group-sm" id="downloadSelect">
<button type="button" class="btn btn-default">1</button>
<button href="#" class="trigger btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="head hide">Alphabet Select</div>
<div class="content hide">
<div class="form-group">
<div class="btn-group btn-group-sm">
<button type="button" id="1Download" class="btn btn-default onealert">A</button>
<button type="button" id="2Download" class="btn btn-default">B</button>
<button type="button" id="3Download" class="btn btn-default">C</button>
</div>
</div>
</div>
</div>
I am not getting any error message too!
Thanks

That's because Bootstrap builds new markup for the little dialog as it appears, using the hidden markup as a template only, which means it's dynamic content that didn't exist when you added the event handler, and you'll need a delegated handler
$('.the-box').on("click", ".onealert", function(){
alert("You clicked on A");
});
FIDDLE

showing multiple buttons inline in HTML

i have the following code
<div class="form-horizontal" >
<div class="form-actions" id="sub" >
<button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
<div class="form-horizontal" >
<div class="form-actions" id="sub1" style="display :none" >
<button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
The problem is since i am using style="display :none" on the second Div class the schedule1 button and Cancel button are showing in different line. if we remove the style from the Div tag it will be inline. Any idea how to solve this?
am using the java script and based on certain conditions i will make the seconf DIV as visible

use
visibility:hidden
it will make then invisible but they will still keep their place in the document and you keep the formatting. display will make it vanish and no keep it place in the document flow, viability makes it invisible but still keeps its place in the flow.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:
The 'visibility' property specifies whether the boxes generated by an
element are rendered. Invisible boxes still affect layout (set the
'display' property to 'none' to suppress box generation altogether).
Here is a jsFiddle example (Scroll over the text box)
http://jsfiddle.net/joshnh/7JyRH/
good article on the topic:
http://joshnh.com/2011/07/30/display-none-vs-visibility-hidden/

You can do this as well, using style="display:inline-block":
<div class="form-horizontal" style="display:inline-block" >
<div class="form-actions" id="sub" style="display:inline-block" >
<button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
<div class="form-horizontal" style="display:inline-block" >
<div class="form-actions" id="sub1" style="display:inline-block" >
<button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
http://jsfiddle.net/6bFFf/1/