John M. John M. - 4 months ago 10
jQuery Question

Need modal code to also execute some additional code

I have a modal window that works fine but upon opening I want it to also execute some additional commands and I'm having no luck doing this. When you look at my javascript, near the top you'll see some 'alert' code that represents for now what I'm trying to execute. How do I get this additional command to execute after my modal window opens. Thank you.

HTML

<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">One Minute Meditation Video</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/F6eFFCi12v8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>


JS

<script>

$(document).ready(function(){
<!--We have to pull the global variables from localStorage-->
var name = localStorage.getItem('name');
var email = localStorage.getItem('email');
var act1 = "the Mindfulness page";
//start the 'launched' function
launched(email, name, act1);
});


$("#myModal").on("show", function () {
alert("Hey");
});



//Sending the 'launched' statement
function launched(actorEmail, actorName, activ) {
var stmt = new ADL.XAPIStatement(
new ADL.XAPIStatement.Agent('mailto:' + actorEmail, actorName),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched'),
new ADL.XAPIStatement.Activity('act:http://example.com/2016/06/resiliency.html', activ,
'Clicked to move to a page in the resiliency training.')
);
//generates a unique ID for the statement
stmt.generateId();
//Other contextual information about the Activity
stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('http://www.example.com/articles/34257') );
//Registration: An instance of a learner experiencing a particular Activity.
stmt.generateRegistration();
configLRS();
sendTheStatement(stmt);
}

//this tells the app where to send the xAPI statements
function configLRS() {
ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': '',
'password': '',
'auth': ''
});
}

//fires off the statement to the LRS
function sendTheStatement(stmt) {
ADL.XAPIWrapper.sendStatement(stmt);
}

/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');

/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});

/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});

</script>

Answer

One solution could be to set an ID on your button and then hook the on click event

$("#mybutton").on("click", function () {
alert("Hey");  }); 

Instead of

$("#myModal").on("show", function () {
alert("Hey");  });