I am using quill editor and inside the bootstrap modal and its work fine while inserting the data in data-* attribute in the form of JSON
So what's the problem :
The problem is when I tried to set the data in the quill editor using setContent api it does not work
/*
====================
Quill Editor
====================
*/
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
Here is my jsfiddle ( before using this read the instruction below )
How to use my fiddle:
Click on the add element button.
Type anything inside the quill editor
Hit the save change button.
Now you will see an element prepend dynamically using js
Inspect the Dynamic Element. You will see the data-text attribute with quill json data.
Now, Click on the Dynamic Element it opens the modal now the problem occurs it does not set the content value that it is fetching form data-* attribute.
The trick was converting the JSON string back into a JSON object:
From this: var dataText = $(this).attr('data-text');
To this: var dataText = JSON.parse($(this).attr('data-text'));
Updated Fiddle
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
function modalclick() {
$(".dynamic-element").on('click', function(event) {
var dataText = JSON.parse($(this).attr('data-text'));
$('#exampleModalLong').modal('show');
quill.setContents(dataText);
console.log(dataText);
})
}
$("#addElement").on('click', function(event) {
var delta = quill.getContents();
var $_textDelta = JSON.stringify(delta);
console.log($_textDelta);
$html = "<div class='dynamic-element' data-text='" + $_textDelta + "'>" +
"<div>dynamic-element</div>" +
"</div>";
$(".element").prepend($html);
modalclick();
$('#exampleModalLong').modal('hide');
})
//modalclick();
$("#openmodal").on('click', function(event) {
$('#exampleModalLong').modal('show');
})
$('#exampleModalLong').on('hidden.bs.modal', function(e) {
quill.deleteText(0, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<input type="button" id="openmodal" class="btn btn-info btn-rounded mb-4" value="Add element">
<div class="element">
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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 id="editor-container">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="addElement" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Related
This question has already been answered, but those answers don't work for me. I've already tried to update my dependencies and I've even added some.
I am using tabulator to do the management of the users. When I click a cell in tabulator, I want it to open a modal so that I can auto-populate it.
How can I open the modal on row/cell click? I know for the row click I am not using the right function, I am only using cell click for testing.
I'm getting the following error:
gestaoutilizadores:338 Uncaught TypeError: $(...).modal is not a function
at t.cellClick (gestaoutilizadores:338)
at HTMLDivElement. (tabulator.min.js:4)
Dependencies
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></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">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>
Javascript (Tabulator)
var table = new Tabulator("#example-table", {
height: "100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
pagination: "local", //enable local pagination.
paginationSize: 5, // this option can take any positive integer value (default = 10)
columns: [ //Define Table Columns
{
title: "ID",
field: "id",
width: 150
},
{
title: "Tipo Utilizador",
field: "type",
align: "center",
/*, align:"left", formatter:"progress"*/ formatter: "lookup",
formatterParams: {
"0": "Super User",
"1": "Admin",
"2": "Utilizador Normal",
}
},
{
title: "Username",
field: "username",
align: "center",
cellClick: function(e, cell) {
var data = cell.getData();
$('#exampleModal').modal('toggle');
console.log(data);
console.log("username")
},
},
{
title: "Password",
field: "password",
align: "center"
},
{
title: "Empresa",
field: "empresa",
align: "center"
},
{
title: "Data de Criacao",
field: "createDate",
sorter: "date",
align: "center"
},
],
});
You will need to import the jQuery library before the bootstrap library.
This is because the bootstrap library will register the modal plugin with jQuery when the package loads, if jQuery is not there when this happens then the modal plugin will not be loaded and your code will error.
<script>
$(document).ready(function(){
//get the pie chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var data = {
// labels: cData.label,
datasets: [{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderWidth: [1, 1, 1]
}]
};
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "All Subject Progress",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
// labels: {
// fontColor: "#333",
// fontSize: 16
// }
}
};
var canvas = document.getElementById("pie-chart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
var url = "http://example.com/?label=" + label + "&value=" + value;
//console.log(url);
//alert(url);
$("#myChartmodal").modal("show");
}
};
});
</script>
<div id="myChartmodal" class="modal fade" 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 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>
In this code I am creating pie-chart where it working perfectly. Now, I want to show bootstrap modal when I canvas.onclick. Here, What happen when I click on canvas.onclick only alert message are showing right now but $("#myChartmodal").modal("show"); is not working I don't know why. So, How can I open bootstrap modal after click on every slice of pie-chart? Please help me.
Thank You
Your show modal code should work as shown below, just need to include the bootstrap libraries as shown below
$(function(){
$('show').on('click', function(){
$('#myChartmodal').modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="myChartmodal" class="modal fade" 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 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>
<input type="button" value="Show Popup" id="show" data-toggle="modal" data-target="#myChartmodal">
On the page I have a button with several data attributes, title and audioURL. One click, I have some javascript that populates a modal window with the title, and simple html5 audio player with the data-audioURL in the src attribute. Once that is complete, I initialize MediaElement. On success, I play the audio.
When the user closes the modal window, I want to remove the MediaElement so that another button with a different title and audioURL can populate the audio player and then reinitialize MediaElement. Currently, the code I have succeeds to stop the audio playback, but it doesn't destroy the player.
HTML:
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="Song Title" data-audio="audio.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<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 text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var me;
$('#closerLook').on('shown.bs.modal', function (event) {
$('#audioSample').attr("src", "");
var button = $(event.relatedTarget);
var theTitle = button.data('title');
var theAudio = button.data('audio');
var modal = $(this);
modal.find('#cl-title').text(theTitle);
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function (event) {
console.log(me);
me.remove();
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
success: function(mediaElement, originalNode, instance) {
mediaElement.play();
me = mediaElement;
}
});
}
I know I'm missing something in the hide.bs.modal function to properly remove the player, I just don't know what. Thanks in advance.
move var me out of document.ready and initialize the variable inside the success function with instance see the working example below
var me;
$(document).ready(function() {
$('#closerLook').on('shown.bs.modal', function(event) {
let button = $(event.relatedTarget);
let theTitle = button.data('title');
let theAudio = button.data('audio');
let modal = $(this);
modal.find('#cl-title').text(theTitle);
//setSrc (src)
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function(event) {
console.log('removing');
//me.pause();
me.remove()
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
error:function(mediaElement, originalNode, instance) {
console.log('error');
},
success: function(mediaElement, originalNode, instance) {
console.log('success');
console.log(mediaElement)
instance.play();
me = instance;
}
});
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="SoundHelix" data-audio="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<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 text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>
In back bone view i am i am rendering template which is having bootstrap modal. My backbone view having a event for bootstrap modal window, First time when i open bootstrap window its working fine. Next time if i open bootstrap modal window that event attaching many times.
Template:
<script id="adUser-template" type="template/underscore">
<div class="modal fade" id="adUserModal" 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">Active Directory Search</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" id='btnSearchUser' class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
View:
var ADSearchView = Backbone.View.extend({
el: 'form',
template: _.template($('#adUser-template').html()),
initialize: function () {
this.render();
},
render: function () {
var renderedTemplate = this.template({});
this.$el.append(renderedTemplate);
$('#adUserModal').modal('show');
},
events: {
'click #btnSearchUser': function (e) {
e.preventDefault();
this.adSearch();
}
},
adSearch: function () {
//below used to detach the click event once function called
$('#adUserModal').on('hidden.bs.modal', function (event) {
$(this).find('#btnSearchUser').off('click');
});
},
});
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/