title: ajax implement on internal pages jquery mobile
body: <p>im making an internal page jquery mobile ive search question here in stackover but those are not similar to mine.i want to know if it is possible to use ajax in loading internal pages.i want to load my about1 page and about2 page in the about page here is my sample code:</p>
  
  <pre><code>&lt;!-- start about --&gt;
      &lt;div data-role="page" id="about" data-url="about" data-theme="a"&gt;
              &lt;div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;
                              Header
                          &lt;/h3&gt;
                  &lt;!-- working back button &lt;a href="javascript:history.go(-1)"&gt;go back&lt;/a&gt; --&gt;
                   &lt;a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Back
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                   &lt;a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Home
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" &gt;
                   &lt;h1 class="ui-title"  &gt;About&lt;/h1&gt;
  
              &lt;/div&gt;
              &lt;!-- start ajax --&gt;
                  &lt;ul data-role="listview" data-theme="a" id="mylist" class="ui-listview"&gt;
                      &lt;li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-screen-hidden"&gt;
                          &lt;div class="ui-btn-inner ui-li"&gt;
                          &lt;div class="ui-btn-text"&gt;
                          &lt;a href="#about" class="ui-link-inherit" data-transition="fade"&gt;about&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;span class="ui-icon ui-icon-arrow-r ui-icon-shadow"&gt;&amp;nbsp;
                          &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a"&gt;
                          &lt;div class="ui-btn-inner ui-li"&gt;
                          &lt;div class="ui-btn-text"&gt;
                          &lt;a href="#about1" class="ui-link-inherit" data-transition="pop"&gt;about&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;span class="ui-icon ui-icon-arrow-r ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;                
                          &lt;li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-a"&gt;
                          &lt;div class="ui-btn-inner ui-li"&gt;
                          &lt;div class="ui-btn-text"&gt;
                          &lt;a href="#about2" class="ui-link-inherit" data-transition="turn"&gt;about2&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;span class="ui-icon ui-icon-arrow-r ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;!-- end ajax --&gt;
               &lt;div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;Footer&lt;/h3&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end about --&gt;
      &lt;!-- start about1 --&gt;
      &lt;div data-role="page" id="about1" data-url="about1"&gt;
              &lt;div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;
                              Header
                          &lt;/h3&gt;
                  &lt;!-- working back button &lt;a href="javascript:history.go(-1)"&gt;go back&lt;/a&gt; --&gt;
                   &lt;a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Back
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                   &lt;a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Home
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" &gt;
                   &lt;h1 class="ui-title"  &gt;About1&lt;/h1&gt;
  
              &lt;/div&gt;
               &lt;div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;Footer&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- end about1 --&gt;
          &lt;!-- start about2 --&gt;
      &lt;div data-role="page" id="about2" data-url="about2"&gt;
                  &lt;div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;
                              Header
                          &lt;/h3&gt;
                  &lt;!-- working back button &lt;a href="javascript:history.go(-1)"&gt;go back&lt;/a&gt; --&gt;
                   &lt;a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Back
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                   &lt;a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;
                              Home
                              &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" &gt;
                   &lt;h1 class="ui-title"  &gt;About2&lt;/h1&gt;
              &lt;/div&gt;
               &lt;div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" &gt;
                   &lt;h3 class="ui-title"  &gt;Footer&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- end about2--&gt;
  </code></pre>