Preview Saved HTML in Bootstrap Model Dialog

By -

I had to create a Bootstap model Dialog using HTML Content Saved in the Oracle Database LONG column,


Its easy . I will keep the HTML in the a div which is hidden and take the contnet to the model HTML when user prometed.

HTML- Dynamic Table Rows


<div style="display: none" id="preview_<?php echo $row['TB_ID'] ?>" > <?php echo $row['TB_HTML'] ?> </div> 

Model Dialog HTML - End of the Page


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS Button Click event to popup the div
$(".btn").on( "click", function() { var id = $(this).attr("data-id"); var mymodal = $('#myModal'); mymodal.find('.modal-body').html($("#preview_"+id).html()); mymodal.modal('show'); }); 

Comments

Post a Comment

Popular posts from this blog

ENOENT: no such file or directory, rename : node_modules/async

By -
Image
I have gone trough follwing error ,when I was updating npm. npm ERR! path /Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async' -> '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/.async.DELETE' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR!     /Users/interlectivethree/.npm/_logs/2017-07-07T14_17_29_016Z-debug.log I have done sevarel things like package wise unstall and install ,package relocating .But no success .But I think compleate unstall and reinstall is the best option and follwing commands used. npm uninstall ` ls - 1 node_modules | tr '/\n' ' ...
Read more

react-quill Integrate quill-image-resize-module

By -
Image
React-qill  is a great free package which can be used for design editors. However, if you are using the image upload feature, there is a problem of integrating resize package. This was discussed in may treads and I was able to find the best approach integrate it with react-starter-app. https://www.npmjs.com/package/quill-image-resize-module If you use the following code, import Quill from ' quill ' ; import { ImageResize } from ' quill-image-resize-module ' ; Quill . register ( ' modules/imageResize ' , ImageResize); const quill = new Quill (editor, { // ... modules : { // ... imageResize : { // See optional "config" below } } }); The following error is common. TypeError: Cannot read property 'imports' of undefined var d = window.Quill.imports.parchment In order to overcome the issue , you have to update the node_modules/react-scripts/config/webpack.config....
Read more