Using Jquery to change IFrame content

Hello there!

Today let’s talk about a cool hack: How to change the IFrame content using JQuery!

I’ve created this code to substitute the Layout feature in Document using IFrame, so when you click on a selector element or image, for example, it will change the IFrame content using the report/document specified for that selector element or image.

You must to execute your document in Interactive Mode to make it works.

To do that you have to:

For images:

1. Create a new document;

2. Insert 1 HTML Container and use it as an IFrame:

pic1

Rick click on the HTML Container inserted and go to Properties and Formatting…

pic1

Choose IFrame and click Ok:

pic1

3. Insert 2 images:

pic1

4. Use Google Chrome or Firefox with Firebug to inspect element to see their ids. In my case, I’m going to use Google Chrome and right click on a blank area to see the image ids.

Execute the document in Interactive Mode -> Right click on a blank area and choose Inspect Element -> Click on the Search button in the inspect section and click on the image -> Get the span id that has the image:

pic1

pic1

pic1

In my case is W46 and W48.

5. Insert another HTML Container and paste this code inside of it. Note that I inserted the W46 and W48 in the click event, you must use your id value. In the http//localhost… you must insert the link to your report/document:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#W46').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=4E7D7D5B46726C89E069ADBF1CF540AD&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
$('#W48').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
 });
</script>

After you changed the $(“#W48”) and $(“#W46”) to your span id and changed the urls, you can now execute your documet in interactive mode and see that your IFrame will update using each chosen url. Remember to insert:

&hiddensections=header,path,dockTop,dockLeft,footer

After your urls.

pic1

Tip: Set border none in each html container:

pic1

For each button, repeat this code:

$('#W48').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});

Just remember to change the W48 id to the id of the span that has your image.

For selectors:

1. Repeat steps 1 and 2;

2. Add a dataset with Country attribute, for example;

3. Create a button bar selector and use Country as source. Disallow multiple selections and remove the All element;

4. Execute your document and see every element that you have in this selector:

pic1

In my case I have USA and Web.

5. Insert a new HTML Container and paste this code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="button"][value="USA"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=4E7D7D5B46726C89E069ADBF1CF540AD&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
$('input[type="button"][value="Web"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
 });
</script>

Just change the USA and Web to your element names. If you have more than 2 elements in your Country attribute, just repeat this code changing the value to the name of your elements:

$('input[type="button"][value="Web"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});

In this case, for each element that you have in your selector, you can display a different report/dashboard.

pic1

Hope it helps!

God bless you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s