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!

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>

Answer 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.