Need iFrame Content to Refresh (Loading Page Content Within Divs)

Question

I am using Codiqa, a mobile prototyping tool, which creates div id layers with iframes inside them, and the menu links just go to that DIV id without any real page loading; so when the main Apps menu is initially loaded, all divs and their respective iframes load simultaneously, and then everything is navigable via div ids for page linking. The issue here is that I am dealing with content that could have been updated while navigating the menu, so if the content changes and you click on a menu item then the iframe doesn't refresh and load any new or updated content; I need to manually refresh my browser every time to see changes! How can I fix this? I was thinking of putting a javascript function on the menu link itself, but not sure how to go about that. Thanks in advance!

enter image description here

HTML

<ul data-role="listview" data-divider-theme="b" data-inset="true">
                <li data-role="list-divider" role="heading">Apps</li>
                <li data-theme="">
                    <a href="#page16" data-transition="flip">
                  Central Office Survey
              </a>
                </li>
               <!-- <li data-theme="">
                    <a href="#page18" data-transition="flip">
                  Manhole
              </a>
                </li>-->
                <li data-theme="">
                    <a href="#page21" data-transition="flip">
                  Prepping A
              </a>
           <!--     </li>

        <li data-theme="c">
                    <a href="#page19" data-transition="flip">
                  Prepping A
             </a>
    -->
                </li>
                <li data-theme="c">
                    <a href="#page20" data-transition="flip">
                  Prepping Z
             </a>
                </li>
                <li data-theme="c">
                    <a href="#page17" data-transition="flip">
                  Extracting
              </a>
                </li>
                <li data-theme="c">
                    <a href="#page15" data-transition="flip">
                  Warehouse
              </a>
                </li>
                 <li class="sample">
                    <a href="#page22" data-transition="flip">
                  Sample
              </a>
                </li>
            </ul>

  <!-- Extracting -->
    <div data-role="page" id="page17">
        <div data-theme="a" data-role="header" id="frame_header">
            <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip">Return To Main Menu</a>
            <h3>Extracting</h3>
        </div>
        <div data-role="content">
            <iframe src="http://gp21.idmyasset.com/mobile/extraction/" id="Cable_Extraction_Worksheet"
            name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
        </div>
        <div data-role="tabbar" data-iconpos="left" data-theme="a">
            <ul>
                <li>
                    <a href="http://gp21.idmyasset.com/mobile/extraction/" target="Cable_Extraction_Worksheet" data-transition="flip" data-theme="" data-icon="arrow-l">
                  Back
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.location.reload();" data-transition="none" data-theme="" data-icon="minus">
                  Reset
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();" data-transition="none" data-theme="" data-icon="check">
                  Submit
              </a>
                </li>
            </ul>
        </div>
    </div>

<div data-role="page" id="page22">
        <div data-theme="" data-role="header" id="frame_header">
            <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip">Return To Main Menu</a>
            <h3>Sample</h3>
        </div>
        <div data-role="content">
            <iframe src="http://gp21.idmyasset.com/mobile/sample/" name="sample" id="sample" class="contentiframe"></iframe>
            <script type="text/javascript">
                document.frames['sample'].location.reload(true);
            </script>
        </div>
        <div data-role="tabbar" data-iconpos="left" data-theme="a">
            <ul>
                <li>
                   <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip" data-theme="" data-icon="arrow-l">
                  Back
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('sample').contentWindow.location.reload();" data-transition="none" data-icon="minus">
                  Reset
              </a>
                </li>
                <li>
                <!--Use Submit Validation Function for iFrame Form-->
                    <a onclick="sample.submitForm();" data-transition="flip" data-icon="check">
                  Submit
              </a>
                </li>
            </ul>
        </div>
    </div>

Are the iframes pointing to the same domain that the menu is on? — Jake, May 20 '13 at 23:03
You should be able to run something like Alex's answer on 4249809 to refresh the iFrames: http://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery — Jake, May 20 '13 at 23:06

score 1 · Accepted Answer · answered May 21 '13 at 13:35

1

Cool you used Codiqa, I made it :)

You can do what you are requesting by listening for the pageshow event on that page and triggering the refresh:

$('#page22').on('pageshow', function() { 
  $('#sample').attr("src", $('#sample').attr("src"));
});

We recently added support to change the page id, so you can customize it now.

answered May 21 '13 at 13:35

Max

6,901
7
46
61

1

dude that's awesome... can I have you on speed dial? haha we are using Codiqa for EVERYTHING and we transfer it to phone gap and voila! we have a mobile app... I am finding iframes to be somewhat cumbersome to work with, however. – jflay May 21 '13 at 16:00
by the way, the above code did not do anything for me... i put it in my.js file that codiqa spits out. – jflay May 21 '13 at 16:40
Ok I got it working... I needed to wrap that code in – jflay May 21 '13 at 16:52

Need iFrame Content to Refresh (Loading Page Content Within Divs)

1 Answers1