Jquery Dialog box losing CSS when report is run.

[jvickers]

I'm currently trying to create just a simple dialog box that popups when a button is click.  When I run the report the dialog box will open when I click the button I've created but all or most of my CSS has been stripped out it seems. 

I've created a simple report with only an HTML item inside of it.  I then inserted this simple jquery:

Code Select Expand


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$(function(){

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
});

</script>

Any ideas what might be cause the css  to not appear correctly?

[isabel123]

I'm currently trying to create just a simple dialog box that popups when a button is click.  When I run the report the dialog box will open when I click the button I've created but all or most of my CSS has been stripped out it seems. 

I've created a simple report with only an HTML item inside of it.  I then inserted this simple jquery:

Code Select Expand


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$(function(){

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
});

</script>

Any ideas what might be cause the css  to not appear correctly?

I had the same problem... But on IExplorer, on Firefox works fine.

[qvixote]

Hi!

I don't know if its related with your problem, but I remember when I've used jQuery in Report Studio I always used noConflict(), to avoid conflicts with RS scripts.

Code Select Expand


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
var jq;
jq = jQuery.noConflict(true);

// From now on you must use 'jq()' instead of '$()'.
jq(document).ready(function() {
 
  // Insert your code here!

});
</script>


Regards.

[navissar]

Don't know about your specific scenario, but some general rules for using jQuery in Cognos I have learnt through bitter experience:
1. If you can at all, avoid. jQuery is used by report studio for many things (Date prompts, for instance), and it behaves erratically. I had a script that drove me up the walls - whenever I'd run it, it would break all the date prompts. To this day I'm not sure why. Unless you're using jQuery UI for something (An accordion, for instance), almost anything you can do with jQuery you can do with pure javascript, and often it would perform better (example: looping through a list's column. A for loop would run significantly better than an each loop).
2. Do NOT use the $ sign. either use "jquery" or even better, a noconflict as per jvickers' suggestion.
3. When all else fails, timeout your jQuery to load only when the report has finished rendering.