Jquery mobile - Как динамически создавать контент на уже существующих страницах с использованием XML

Question

Первый раз здесь, так что успокойся со мной, лол. В настоящее время я пытаюсь загрузить контент на свои "страницы", для которых я уже написал html. Мой скрипт jquery считывает данные из моего файла xml content.xml. Моя первая страница загружается нормально, но на страницах, в которые я пытаюсь вставить данные, ничего нет. Я специально создал каждую страницу как оболочку, чтобы избежать проблем с URL-адресами данных.

Вот фрагменты моего кода (много повторений, поэтому нет смысла вставлять все это): Jquery:

$(function () {
    $.ajax({
        type: "GET",
        url: "content.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {                                                   
    $(xml).find('Phonetic').each(function () {
    var a = 1;
    $test = $("s" +a).append('<div><div class=<div class="S3">' +
            $(this).find("S3").text() + 
            '</div>"S1">' + 
            $(this).find("S1").text() + 
            '</div><div class="S2">' + 
            $(this).find("S2").text() + 
            '</div><div class="S4">' +
            $(this).find("S4").text() + 
            '</div></div>');

    $test.page();
    a++;
});
    }

Вот HTML:

<div data-role="page" id="c1"> 
<div data-role="header"><h1>Test</h1></div> 
<div data-role="content" id="s1"></div> 
<div data-role="footer"><h1>Test release v1.0 - Android tablet test</h1></div> 
</div> 

Любая помощь будет отличной!

Answer 1

У меня есть только одна страница, ключ в том, чтобы в вашем документе был готов pagebeforechange или ondeviceready.

$(document).bind("pagebeforecreate",function( e, data ){
      if ( typeof data.toPage === 'string' ){
           var p = $.mobile.path.parseUrl( data.toPage );

           if( u.hash.search( new RegExp( /^MyPageName/ ) ) !== -1 ) {
                $.mobile.showPageLoading();
                MyCodeToExecForThisPage( p, data.options );
                e.preventDefault();  // tell jquery i will create a page not him
           }
      } 
 });

, так что теперь вам нужна функция для обработки страницы и отображенияhtml, вот что я делаю:

function SetPagesTemplate(  ){
$page = $("#AllPage"); // this is the name of my page in the index file
    $header = $page.children( "#AllHead" ); // my header so i can custom change
$content = $page.children( ":jqmData(role=content)" ); // the content area of page
$header.html( 'custom graphic or text' );
$content.html(''); // clear everything up
$footer = $page.children( "#allFoot" ); // hook into my footer bar
$footer.html( 'custom footer nav and links' );
 }

ниже приведен код, отображаемый при переходе на страницу, для которой необходимо указать значение, например #person? personid = 22 моя страница - это персона, и я буду использовать идентификатор[personid] и, получая правильную информацию, я тогда заполню свою страницу ALLPAGES содержимым и заставлю jquery думать, что я на самом деле на # person.

 // take note here that i take in urlObj [ this was p ]  and options
function LoadPerson( urlObj, options ) {
  try{
// lets get the number sent by stripping everything out
    var id = urlObj.hash.replace( /.*personid=/,"" ),
    extra = "";
SetPagesTemplate(  ); // the code that sets the page so i dont have to repeat myself.

$.ajax({
    url: "http:\/\/" + domain + "/Ajax/MobilePersonProfile",
    type: "POST",
    dataType: "json",
    data: { id: id },
    crossDomain: true,
    success: function ( data ) {
        //loop through data create rows
        if( data.length === 0 ){ ThrowCustomAlert( 'Sorry, unable to load profile.', 'no profile available', true ); } 
        else { 

            // now deal with your data on this example your processed data would be called template
                    // all this page stuff was set up earlier so lets fill it
            $content.append("<section><nav id='profilescroll'>" + extra + template + "</nav></section>" );
            $page.page(); // make our page into a page
            options.dataUrl = urlObj.href;
            template = null;
            data = null;
              // above cleanup, on mobile device to keep memory leaks low
                            // now we navigate to our created page THIS
            $.mobile.changePage( $page, options );


            StartScroller( "profilescroll" );
            HideLoading(); // lets hide the page loading
        }
    },
    error: function ( jqXHR, textStatus, errorThrown ) { CustomError(errorThrown,'',"Profile",true); }
});
}
catch( ee ){ CustomError( ee.message, ee.description, "profile", true ); }

}

это все, что вам нужноэто все, что я когда-либо использовал, я не думаю, что видел примеры, подобные этому, мне пришлось в основном превратить все мое приложение в такой способ работы, чтобы уменьшить использование памяти на iphone 2 при использовании в качестве приложения телефонной пробелы, и это очень и оченьочень быстро с полной навигацией ajax.

Следует отметить, что вам нужна только навигация по хештегам, на вашей странице перед настройкой создайте новый if для каждой страницы, которую вы хотите.w

ну, надеюсь, это поможет

, как и требуется здесь, html для моей страницы:

 <div data-role="page" id="AllPage" class="body" style="overflow:hidden;">

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->

Answer 2

У меня была та же проблема, и у меня сработало следующее решение:

1. Сохраните ваши страницы в глобальном массиве
2. измените ваши якоря, чтобы они выглядели так: <a href='javascript:change_page(1)' /> где 1заменяется индексом вашей страницы.
3. , затем определите метод .change_page() и вызовите jquery.mobile.changePage(arr[index]);, чтобы перейти к динамически добавленной странице.

С уважением.