Develop Reference

morris js can't be full width in bootstrap modal

image
my element bootstrap is kura_s and my modal body :
<div class="modal-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="line-chart" style="height: 300px;width:700px;">
</div>
</div>
</div>
</div>
js
$('#kurva_s').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
// Button that triggered the modal
var id_spk = button.data('whatever');
$(function () {
$('#line-chart').empty();
var data = [
{"m":"2022-01-15","r":0,"p":13.33},
{"m":"2022-01-22","r":10,"p":60},
{"m":"2022-01-29","r":15,"p":100},
{"m":"2022-02-05","r":35,"p":100},
{"m":"2022-02-12","r":50,"p":100},
{"m":"2022-02-19","r":55,"p":100}
];
var chart = Morris.Line({
element: 'line-chart',
data: data, // Set initial data (ideally you would provide an array of default data)
xkey: 'm', // Set the key for X-axis
ykeys: ['r','p'], // Set the key for Y-axis
labels: ['Real','Plan'], // Set the label when bar is rolled over
stacked: true,
barGap:10,
barSizeRatio:1,
});
});
});
like the image that I pinned, morris jus can't be full even though I have set the width manually.
Has anyone experienced like me. ?

Going with the example fiddle you posted in the comments, it would appear that the problem occurs when initializing the graph before the modal is open. If you were to change your logic a bit, and initialize the graph on modal opening, the problem would be solved.
Please see the following reworking of your example fiddle.
$("#kurva_s").on("shown.bs.modal",function() {
$('#line-chart').empty();
var data = [
{"m":"2022-01-15","r":0,"p":13.33},
{"m":"2022-01-22","r":10,"p":60},
{"m":"2022-01-29","r":15,"p":100},
{"m":"2022-02-05","r":35,"p":100},
{"m":"2022-02-12","r":50,"p":100},
{"m":"2022-02-19","r":55,"p":100}
];
var chart = Morris.Line({
element: 'line-chart',
data: data, // Set initial data (ideally you would provide an array of default data)
xkey: 'm', // Set the key for X-axis
ykeys: ['r','p'], // Set the key for Y-axis
labels: ['Real','Plan'], // Set the label when bar is rolled over
stacked: true,
barGap:10,
barSizeRatio:1,
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#kurva_s">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="kurva_s" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" 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 class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="line-chart" style="height: 300px;width:100%;">
</div>
</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>
This is the key part.
$("#kurva_s").on("shown.bs.modal",function() {
// the rest of your graph code
});
This tells your graph to:
once the modal is shown, clear whatever was rendered before
render the graph again, with the available data
This will also allow you to work with dynamic data (if you ever encounter a need for that) - if your data comes from an API call, for example, or you're getting it from an AJAX call to your backend, or the data needs to be graphed based on what was selected before opening the modal, etc.

jQuery.width() and height() returns different value on IE and Chrome

I am showing a nvd3 chart on bootstrap modal. I specified width and height of modal-body with css:
#trendModal .modal-dialog {
width: 800px;
}
#trendModal .modal-body {
height: 400px;
}
<div class="modal fade" id="trendModal" tabindex="-1" role="dialog" aria-labelledby="trendModalLabel">
<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="trendModalLabel"></h4>
</div>
<div class="modal-body" id="trend-container">
<svg></svg>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However, when I try to get width and height of modal, I get different answer on IE and Chrome:
width = $("#trendModal .modal-dialog").width(), //IE: 800, Chrome:780
height = $("#trendModal .modal-body").height(), //IE: 400, Chrome:360
It looks like Chrome deduct some padding/margin automatically while IE doesn't.
Does anyone know how this comes? If I want to unify behavior, what should I do? Thanks.

This should work:
var width = $("#trendModal .modal-dialog").outerWidth()
height = $("#trendModal .modal-body").outerHeight();
These give you the total height and width of the element including any margin and padding they might contain.

There can be an issue in Chrome where the height/width is calculated with the document ready trigger, which won't take into account how the content could alter the width/height. Have you tried $(document).load(...)?

How do I change the text of a modal with jQuery/AJAX?

While this question has been asked a few times before, none of the answers have seem to help me. Thus I am asking it again...
I am building the front end of a web site that has no back end (no server calls, etc.). I have a modal that displays content, with a next and a close button. My original design has it that when the next button is pressed, it closes the open modal and opens up a new one with different content. I think this looks unprofessional. I would like it where when a user presses the next button, it takes the content of the next modal and displays it on the open one, without having to keep opening and closing modals. However, I don't know exactly how do this. I'm assuming this is accomplishable with jQuery and AJAX. I will attach my code. Any Feedback is appreciated.
This is the open modal. When the user hits next I would like the content of <h4 class="modal-title> and the <div class="modal-body> to be replaced with the next modal.
<div class="modal fade protein-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- PROTEIN MODAL START-->
<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"> Lean Protien </h4><!--CHANGE THIS WITH NEXT MODAL-->
</div>
<div class="modal-body"><!--CHANGE THIS WITH NEXT MODAL-->
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-1" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- PROTEIN MODAL END-->
The h4, and div should be replaced with the h4 and div of this modal
<div class="modal fade colorful-culinary-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- COLORFUL-CULINARY MODAL START-->
<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">Colorful Carbohydrates</h4>
</div>
<div class="modal-body">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-2" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- COLORFUL-CULINARY MODAL END-->
Currently, I'm just opening and closing modals, which gets redundant. It would be way more efficient to simply replace the text.
$(document).ready(function()
{
$('.colorful-culinary-button').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.protein-button').click(function()
{
$('.protein-modal').modal('show');
});
$('.fat-button').click(function()
{
$('.fat-modal').modal('show');
});
$('.btn-next-slide-1').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.btn-next-slide-2').click(function()
{
$('.fat-modal').modal('show');
});
$('.diet-builder-button').click(function()
{
$('.diet-builder-modal').modal('show');
});
});

You can do follow this example in order to make it (needs to be adapted to your code, but the idea should work).
HTML (modal):
<div id="container">
<p>this is the first text in the modal</p>
</div>
<input id="nextBtn" type="button" value="NEXT"/>
jQuery:
$(document).ready(function() {
var objPos = 1;
var ajaxReturnObj = ["this is the first text in the modal","this is the second text in the modal","this is the third text in the modal"];
$('#nextBtn').click(function(){
$('#container p').text(ajaxReturnObj[objPos]);
objPos++;
});
});
http://fiddle.jshell.net/tv4zwpn0/2/

If you have a static page and want to change the content whithout closing the modal dialog on the next button you need to have the content stored in your file, statically.
I propose the following solution:
var eleToDisplay = ["next1", "next2"];
var indexOfEles = 0;
$('#btn').click(function () {
$("#dialog").dialog({
title: "Change text on Next without closing ",
resize: "auto",
modal: true,
buttons: {
"Next": function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
},
Close: function() {
$(this).dialog( "close" );
}
},
open: function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
$(this).parent().find('.ui-button:last').focus();
}
});
});
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Skeleton of default dialog -->
<div id="dialog" title="Basic dialog">
<p></p>
</div>
<!-- The first dialog content -->
<div id="next1" style="display:none">
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<!-- The second dialog content -->
<div id="next2" style="display:none">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<button id='btn'>Click me</button>

Bootstrap Modal Not Displaying, outputs JS

I have a bootstrap modal setup with the following code:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Testimonials</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button>
However, I am getting only a black background when clicking the button.
I am also seeing some of my js appearing at the bottom of my page (only when the modal code is inserted):
.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); });
Here is the site where everything exists:
http://bit.ly/1dbf4Rz
For reference, this is the section with the modal setup:
http://i.imgur.com/1SlNR1s.png

Check out the source of your page. However it's being generated has a pretty clear error: http://screencast.com/t/GZv0KwPktoO
Look at line 762. There is no opening script tag, so that would explain why you're seeing your JS appearing at the bottom of the page.
As for the rest of it, BaBL86 is right, you will want to fix the issue with your mousewheel script as it's throwing errors that cause the page to stop rendering JS.
Once those two issues are fixed, let us know if there are still problems.
Edit: You also have incorrect HTML for your modal window (based off the bootstrap 3 documentation). Try using this instead, and moving your modal window to right after the body tag:
<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">
<a class="close" data-dismiss="modal">×</a>
<h3>Test Header</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>

You have an error in your mousewheel function. Check this answer, it's about this problem:
function handler(event) {
< ---- >
return $.event.handle.apply(this, args); // error here
}
Edit your function to:
return $.event.dispatch.apply(this, args);

You have given !important to .hide. Remove the imporant
From this
display: none!important;
To
display: none;
I can also see that you are not giving any background-color. Use the same code from bootstrap

Passing Data to Bootstrap Modals

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.

The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );