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.

how can i create a modal by remote and initial textbox in the same function using jquery?

script.js
function change_val(){
$("#remoteModal2").modal({
remote:"modals/edit_text_value.html",
show:true
});
$("#my_textbox").val("this is a text")
}
index.html
<div class="modal fade" id="remoteModal2" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<button onclick="change_val()" >show modal</button>
edit_text_value.html
<div class="modal-header">
header
</div>
<div class="modal-body">
<textarea id="my_textbox"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
The problem is that I must run it twice to make it work !
How to do all the operations in a function ?

shown.bs.modal OR show.bs.modal
When we use this code :
.on('shown.bs.modal')
.
$('#remoteModal2').on('shown.bs.modal', function (e) {
$("#my_textbox").val("this is a new text);
return e.preventDefault();
});
import modal (remote "edit_text_value.html")
Open modal
After the completion of loading and effects , change value..
show new value...
But this code :
.on('show.bs.modal')
Apply the changes ,Before reading the tags and remote the modal...
Therefore, it is not effective.
Because it can not find this ID (#my_textbox) Before remote modal page!
more information...

Getting the id of the anchor tag which was clicked

This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.
<?php foreach($array as $iterate):?>
<div class="col-sm-3">
<div class="panel panel-default">
**<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">**
<div class="panel-heading">
<img src ="audi_sillhouete.jpg" style="height:100%; width:100%;">
<p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p>
</div>
</a>
</div>
</div>
<?php endforeach;?>
As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page.
The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part.
So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.
<script type="text/javascript">
function theFunction()
{
var id = $('a', this).attr('id');
alert(id);
}</script>
From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.
$('a',this).attr('id');
$this.id;
Everything return 'undefined'.
Reference-This is the code for the modal window part.
<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Please try this
$(document).on('click', 'a', function () {
alert(this.id);
});
DEMO

You can use other attribute in anchor like :
<a href='' id='hello' para-id='somevalue'></a>
alert($("#hello").attr("para-id"));

The below jQuery function runs through all the a tags on page load and adds id to the end of the link.
$(function(){
$('a').each(function(){
var id = $(this).attr('id');
var url = $(this).attr('href') + '?id=' + id;
$(this).attr('href',url);
});
});
https://jsfiddle.net/yc1hswet/

How do you pass data using "data" fields? [duplicate]

This question already has answers here:
Passing data to a bootstrap modal
(16 answers)
Closed 8 years ago.
I am trying to make some fields "editable" on my page and I am trying to "pass" data from an html element to a modal popup.
So far, I create an HTML link
<h1 class="head-title animated bounceInDown animation-delay-8">my header
<i class="fa fa-pencil-square-o"></i>
</h1>
When I click on that, it shows the modal popup
<div tabindex="-1" class="modal fade" id="editField" role="dialog" aria-hidden="true" aria-labelledby="editFieldLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title" id="editFieldLabel">Modal title</h4>
</div>
<div class="modal-body">
NEED DATA HERE
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
</div>
What I'd like to do is somehow get the content, display to use user for edit. I know I can use javascript on the href to set some variable, but I was wondering if there was a better way.

DEMO
It's quite straight forward. If the element you click is the following:
<a data-some-value="some value" href="#" data-toggle="modal" data-target="#editField" data-field="header">........
Then you can use the following to read and use data-some-value, for example:
$(function() {
$('a[data-target="#editField"]').on('click',function(e) {
e.preventDefault();
var selector = $(this).data('target'),
somevalue = $(this).data('some-value');
$( 'div.modal-body', selector ).html( somevalue );
});
});

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