how to work with jQuery UI Dialog in a trigger?

I ALMOST found an elegant solution to my quest to find a way to provide individual tips for each possible answer in a multiple response question.   I setup a Right click trigger with javascript on each responses check box.   If I use a js alert, I get a consistent message hint for each possible answer, however.... I am trying to use a jQuery UI Dialog as they are very powerful and beautiful.   Here is my code that works perfect in a test web page, that I have tried to use in my triggered java script.

$('<p>This is my per multi response hint text body, it is triggered by a right click on the potential reponse</p>').dialog({
autoOpen:true,
show: "fold",
hide: "explode",
resizable: false,
modal: true,
closeOnEscape: true,
height: 135,
width: 400,
title: 'MR jQuery Dialog Title',
buttons:{
"Ok":function(){
$(this).dialog("close");
}
},
close:function(){
//$(this).dialog("destroy");
}
});

 

however it does nothing as a javascript trigger.  when i run the project the other  MR check box's with javascript alerts work fine, but check box 4, with this code when you right click it does nothing.

 

I copied the jQuery UI libraries to my published project story_content folder after each publish and added the following to my story.html to support jQuery functions in the header section also after each publish

 

<link rel="stylesheet" href="story_content/jquery-ui-1.10.4/themes/base/jquery.ui.all.css">
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/jquery-1.10.2.js" TYPE="text/javascript"></script>

<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.core.js" TYPE="text/javascript"></script>

<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.widget.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.mouse.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.draggable.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.position.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.resizable.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.button.js" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript1.2" src="story_content/jquery-ui-1.10.4/ui/jquery.ui.dialog.js" TYPE="text/javascript"></script>
<link rel="stylesheet" href="story_content/jquery-ui-1.10.4/demos/demos.css">

however the code will not work in storyline, but works fine in a simple web page.  Pls help...  how can I make this work?

 

I have attached a story file that shows this problem, it includes a working example in index.string.html + the jQuery libraries I used for the working web page and not working story.  they are in an archive that is a resource of this project.

6 Replies
Ashley Terwilliger

Ni Neal,

Javascript triggers and coding is not something that our team can provide assistance for, but we've got a number of folks in the community who are likely able to weigh in here. I did want to point out that to properly test you'll need to ensure you're testing the published output in the intended environment vs. viewing it locally as described here. Also, check that you're viewing it in a supported browser and lastly here is some additional information on the best practices of Storyline and Javascript. 

neal vadekar
  1. fyi everyone, i got it working... seems that there are a couple of common issues.

1, some js files provided on the web do not spell every routine exactly the same, so when you include a js in your project, make sure it came from the official author and not some demo of it from another source like i did.....

 

2, when i load my browser,,, for some reason it randomly some times does not load all js files into your site.  clearing cache and trying again i almost always will.   this was my main problem.  f12 developer tools showed me that was the case... and clearing cache and reloading worked.

 

Neal