DataTables-show column data in modal - javascript

I have a column in my table that is a long string. So i'm trying to show it in a popup modal.
When i click the button to launch the modal, the page just refreshes and nothing is even printed to console.
HTML of Modal:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle"></h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Here is snippet in DataTable creation.
{ data: 'Journal',
render: function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-Journal="'+data+'" data-target="#myModal">'+"Details"+'</button>'} },
The modal show event. Nothing is printed in console so i'm guessing the error is before here.
$("#myModal").on('show.bs.modal', function (e) {
var triggerLink = $(e.relatedTarget);
var journal = triggerLink.data("Journal");
console.log(e.relatedTarget);
console.log(journal);
$("modalTitle").text("Title");
$(this).find(".modal-body").html("<h5>"+journal+"</h5>");});


Try changing your button to type = button as its default is submit'
render: function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-Journal="'+data+'" type="button" data-target="#myModal">'+"Details"+'</button>'} },


Since you didn't provide any relevant details regarding your use case, I've made up my own example, which delivers major idea, though:
//make up random source for DataTable
const tableSrc = [...Array(5)].map((item, index) => {
const rowObj = {};
rowObj.user = 'user'+(index+1);
rowObj.ip = [...Array(4)].map(() => Math.floor(Math.random()*140)+10).join('.');
rowObj.hash = [...Array(256)].map(() => String.fromCharCode(Math.floor(Math.random()*(126-33))+33)).join('');
return rowObj;
});
//initialize DataTable
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: tableSrc,
columns: [
{title: 'Username', data: 'user'},
{title: 'IP address', data: 'ip'},
{
title: 'Hash',
data: 'hash',
render: data => `<span>******</span><button class="showhash">show</button>`
}
]
});
//display 'hash' property for particular row upon clicking the button
$('#mytable').on('click', 'button', function(){
const clickedRow = dataTable.row($(this).closest('tr'));
const modalTitle = `Hash for ${clickedRow.data().user}`;
const modalBody = clickedRow.data().hash;
$('#mymodal .modal-title').text(modalTitle);
$('#mymodal .modal-body').text(modalBody);
$('#mymodal').modal('toggle');
});
td button {
float:right
}
<!doctype html>
<html>
<head>
<!--jQuery DataTables prerequisites-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!--bootstrap prerequisites-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!--DataTable-->
<table id="mytable"></table>
<!--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"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Open custom bootstrap modal with vanilla JavaScript on DoubleClick event

I want to open custom bootstrap modal using data from an object when double clicked on an element.
How to do this using vanilla JavaScript.
Also how to add all functionalities in it :
Ease Transition
Modal should remove when clicked on cross or outside of body
always clear the previous data(no caching)
https://jsfiddle.net/awo0hq4c/
NOTE : Modal used is basic bootstrap modal which is given below but instead of button it is a div in my case
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div 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>```

Append this line of code into the last line of showModal() function.
new bootstrap.Modal(modalItem).show();
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
const div = document.querySelector('.container');
div.addEventListener('dblclick', (event) => {
showModal({
id: '1',
title: 'Title Modal',
value: 'this is modal content',
});
});
const showModal = (data) => {
console.log(data, 'here is');
const modalItem = document.getElementById('exampleModal');
modalItem.innerHTML = '';
modalItem.innerHTML = ` <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${data.title}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
${data.value}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
`;
new bootstrap.Modal(modalItem).show();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- <link rel="stylesheet" href="./modal.css"> -->
</head>
<body>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
></div>
<div class="btn btn-primary container">Launch modal</div>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<!-- <script src="./modal.js"></script> -->
</body>
</html>

bootstrap 4 modal function not working on click

I have a modal that when the button for it is clicked an action occurs for this example write to the console. The modal is opening but event is not happning.
HTML File
<button type='button' data-toggle="modal" data-target="#myModal">Launch modal</button>
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
JS File
jQuery.noConflict();
(function($){
$(function() {
$('#myModal').on('show.bs.modal', function(e) {
console.log('new button clicked');
});
});
})(jQuery);

<button type='button' data-toggle="modal" data-target="#myModal">Open modal</button>
<!-- The Modal -->
<div class="modal" id="myModal">
try above this will open your modal ... you just had two closing tags of button i.e </button>

Your code works perfectly by the way
$('button[data-target="#myModal"]').on( "click", function() {
console.log('clicked')
});
$('#myModal').on('shown.bs.modal', function () {
console.log('modal opened')
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button type='button' data-toggle="modal" data-target="#myModal">Open modal</button>
<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>

Using javascript take a screenshot of bootstrap modal

var takeScreenShot = function(){
html2canvas(document.body, {
onrendered: function(canvas) {
var tempcanvas=document.createElement('canvas');
tempcanvas.width=1350;
tempcanvas.height=1350;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,112,0,288,200,0,0,350,350);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS
link.download = 'screenshot.jpg';
link.click();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="container">
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button onclick="takeScreenShot()">Snapshot</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to take a screenshot of bootstrap modal and save it as image file. I'm using html2canvas library. When snapshot button clicks but i want convert modal into image.
Anyone have solution for this..

Try this !!
html2canvas($("#modelId"), {
useCORS: true,
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "Project.png");
});
}
});

Pop up alert doesn't work

I try to display a pop up alert using modal but the pop up doesn't appear
Here is the code that I have written
function CallService() {
$.ajax({
url: '/url,
type: "POST",
dataType: "xml",
success: function(xml, status) {
$(xml).find('occurrences').each(function() {
alert("Demande soumise avec succès");
});
$(xml).find('errors').each(function() {
$(this).find("error").each(function() {
var label = $(this).find('label').text();
$(document).ready(function() {
$(".erreur").append("<div class='alert alert-danger' role='alert' style='width=50%'> <strong>" + label + "<strong></div>").modal('show');
});
});
});
},
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="erreur"></div>

close quotes in url parameter.
Change
url: '/url,
to
url: '/url',
Try this
$(document).ready(function(){
$("#openme").click(function(){
$("#myModal").modal();
});
});
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="openme" class="btn btn-default">open!</button>
<div class="modal fade" id="myModal" 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>confirm </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
Updated
I change your function to open alert popup try this,
function CallService(){
var label ='your success response';
var modalContent ='<div class="modal fade" id="myModal" 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">Alert</h4></div><div class="modal-body">'+
'<p>'+label+'</p></div></div></div></div>';
$(".erreur").html(modalContent);
$("#myModal").modal();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="erreur"></div>
<button onclick="CallService()">click me</button>

issue in rendering jquery datetimepicker into a modal

i am trying to show jquery datetimepicker into a bootstrap modal..
HTML:
<div class="modal fade" id="availability_modal" 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">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<div id="availability_calender"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
and the jquery i used is...
$(document).on("click","#open_availability",function(e){
setTimeout(function(){
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline:true,
timepicker:false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
},1000);
});
it works fine when i am not rendering into a modal...
any help is appreciated

I am not sure why do you want a div element to initialize a datetimepicker, but i would suggest you to change that element to a form input with same id.
There is a callback, when modal shows up in the browser which is shown.bs.modal and you can initialize the datetimepicker in it:
jQuery('#availability_modal').on('shown.bs.modal', function() {
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline: true,
timepicker: false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script>
Date.parseDate = function(input, format) {
return moment(input, format).toDate();
};
Date.prototype.dateFormat = function(format) {
return moment(this).format(format);
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#availability_modal">
Launch demo modal
</button>
<div class="modal fade" id="availability_modal" 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">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<div id="availability_calender"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>

It's not clear what your problem is. Does the modal show? Or is it just the datetimepicker that doesn't work?
Try adding this before the setTimeout Call
$('#availability_modal').modal('show');
Also you wont need the setTimeout call if your #availability_calender div is already in the dom

You must initialize event after $('#availability_modal').modal('show'); as #availability_calender is not present in the DOM when you are initializing the datetimepicker
Edit: #availability_calender should be input element not div element.
Try this:
$('#btn').on('click', function() {
$('#availability_modal').modal('show');
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline: true,
timepicker: false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
0
})
<div class="modal fade" id="availability_modal" 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">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<input id="availability_calender">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<button id='btn'>Open</button>
Fiddle here

Categories

Resources