Home/ Questions/Q 6767913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:00:30+00:00

I m using jquerymobile, I want to put content inside the page fetched by

  • 0

I m using jquerymobile, I want to put content inside the page fetched by $.mobile.changePage(‘external.html’) or page called directly when we clicked on link, like:

My app has two physical files, index.html and external.html.
Index.html anchor link call external.html, but during changing the view from index.html to external.html, I m getting json from another server that I want to use in that

$.mobile.changePage(‘external.html’) is fetching page properly but display it imediately and ajax call is not even completed.

var ProductDetailEvent = function(){

     thisProd = $(this);
     $.mobile.showPageLoadingMsg();
     Product.id   = thisProd.attr('data-id'); 
     Product.name = thisProd.find('h3').html(); 


    $.mobile.changePage( "productView.html", {
        transition: "pop",
        reverse: false,
            changeHash: false
        });
}

    ////LOAD DATA FOR E PAGES::4
$(document).bind( "pageload", function( event, data ){


            if(data.page[0].id != null)
            switch(data.page[0].id)
            {
                case 'detailView':

                    var pageData = {
                        page: data.page,
                        header: Product.name,
                        url: 'pDetail&productId='+Product.id,
                        loadDataCB: function(_resp){
                            strHtml = '';
                            img = 'http://10.0.1.64/magento/media/catalog/product/' + _resp.image;

                            strHtml += '<div style="text-align:center"><img src="'+img+'"  width="50%" /><br/><b>Description:</b>'+_resp.short_description;
                            strHtml += '</div><br/><input type="button" value="Add to Cart" data-role="button" /><br/><div class="ui-grid-a ui-bar-d">\
                                        <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Price</div></div>\
                                        <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.price+'</div></div>\
                                        <div class="ui-block-a"><div class="ui-bar ui-bar-d" >Weight</div></div>\
                                        <div class="ui-block-b"><div class="ui-bar ui-bar-d" >'+_resp.weight+'</div></div>\
                                        </div>';
                            return  strHtml;        
                        }   
                    };

                    loadExternalView(pageData);

                break;


                case 'externalView':

                break;
            }
        });


    ////Load List::Inner Pages///
    var loadExternalView = function(_data)
    {

            var NPage  = _data.page;
            pHeader    = NPage.find('.header h1').html(_data.header);
            var pContent = NPage.find('.content');
            ServerCall(_data.url,function(result){  
                var strHtml = _data.loadDataCB(result);
                pContent.html(strHtml);
            }); 
    };

var ServerCall = function(_url,callback)
{
    $.ajax({
           type: "POST",
           url: 'consumeservice/magentoapi.php?option='+_url,
           data: '',
           dataType:'json',
           success: 
             function(result) {
                callback(result);
           },
            error: function (data, status, e)
            {
                alert("error:"+e);
            }
        });
};

External Page HTML:

    <!DOCTYPE html> 
    <html> 
      <head> 
         <meta charset="utf-8" /> 
      </head> 
      <body> 
         <!-- Begin Page 4 --> 
        <div id="detailView" data-role="page"> 
          <div class="header" data-role="header" data-icon="back" data-theme="a">
            <h1></h1>
          </div>
          <div class="content" data-role="content">
                <div class="ui-grid-a ui-bar-d">
                    <div class="ui-block-a"><div class="ui-bar ui-bar-d" >A</div></div>
                    <div class="ui-block-b"><div class="ui-bar ui-bar-d" >B</div></div>
                </div>
          </div> 
        </div> 
         <!-- End Page 4--> 
      </body> 
    </html>

I don’t want to create too many internal pages b/c it will affect the performance and increase the page size.

When external page is called it immediately display the page on screen, I want to change it content and then render the page.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you want to change the content BEFORE showing the page? If so, bind ‘pagebeforecreate’:

    $('#pageID').live('pagebeforecreate',function(){
    //Change content
});

    Or do you want to show the page, then change the content and update the page? If so, use .trigger("create") on the div:

    //Change content first
$('#pageID').trigger('create');
    • 0