Casey Crookston Casey Crookston - 28 days ago 9
Javascript Question

Passing data to modal with $('#MyModal').modal('show');

Dygraphs is a plugin that allows you to easily turn json into charts in an HTML page. From with a dygraphs chart, I am able to annotate the chart, and the annotations can have a clickHandler event:

annotations.push({
series: "@Model.Project.id_project",
x: date,
shortText: "X",
text: message,
cssClass: "annotation",
clickHandler: function(annotation, point, dygraph, event) {
$('#ChangeOrderModal').modal('show'); //<<<<<------------------------
}
});


This line:

$('#ChangeOrderModal').modal('show');


Does a good job of opening this modal:

<div id="ChangeOrderModal" class="modal hide fade">
<div class="modal-body">
This is a test
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>




But, I need to pass some data into this modal, and I'm not sure how to do this. For the sake of simplicity, let's just say it's a string:

<div class="modal-body">
This is a test. String passed in: ______
</div>


From the annotation where I open modal, how would I pass in a string? And how would I display it in the modal?

Thanks!

Answer

Add some element in your modal to hold the data:

<div class="modal-body">
  This is a test. String passed in: <span id="passed-in-string"></span>
</div>

And then simply set the element's value before showing the modal:

clickHandler: function(annotation, point, dygraph, event) {
  var stringToPass = 'Something';
  $('#passed-in-string').html(stringToPass);
  $('#ChangeOrderModal').modal('show');  //<<<<<------------------------
}
Comments