Dynamic Content in Panel not showing unless navigating to page with full refresh

Thu Apr 16, 2015 6:12 pm

I have noticed rendering issues when I inject content dynamically into the page on the Load event. The only way it seems to render the content correctly is if I force a page refresh when the page is loaded. I'm hoping that I don't have to do this and there's another way around it. If it is the required solution then how do I do this in javacript- with the mobile.changepage method?

Thu Apr 16, 2015 6:13 pm

code
if(NavigationPages!=""){
// Create ul append it to panel
// Create li from JSON to ul

Code: Select all

     var panelID="#" + DSID +"_rightNav&quot 

     var panelHTML='<ul data-role="listview" id="ReportNavigation" class="ui-listview ui-group-theme-b" name="mobilelist_24" dsid="ReportNavigation" data-theme="b" data-divider-theme="b" data-count-theme="b" style="" data-split-icon="carat-r">'; 

     $(panelID)&#46;html(panelHTML); 

     alert("panelID:" + panelID); 

     for(page in NavigationPages&#46;VehicleReports){ 
         &#47;&#47;alert("Got page:" + JSON&#46;stringify(NavigationPages&#46;VehicleReports[page])); 
         if (NavigationPages&#46;VehicleReports[page]&#46;navigate==true){ 
             var li='<li class="ui-first-child" data-icon="arrow-r">' + 
                 '<a id="'+ NavigationPages&#46;VehicleReports[page]&#46;pageName + 'ID"  tabindex="1" class="ui-btn ui-btn-icon-right ui-icon-arrow-r" href="' + NavigationPages&#46;VehicleReports[page]&#46;pageName + '&#46;html" >' + 
                     '<h3>' + NavigationPages&#46;VehicleReports[page]&#46;pageDescription + '</h3>' + 
                     '</a>' + 
                 '</li>';                

          $("#ReportNavigation")&#46;append(li); 
                                           &#47;&#47;<li><a href='"+NavigationPages&#46;VehicleReports[page]&#46;pageName +"'>"+ NavigationPages&#46;VehicleReports[page]&#46;pageDescription +"</a></li>");     
         } 
     } 

$(panelID)&#46;trigger( "updatelayout" );

/code

Fri Apr 17, 2015 3:37 pm

Guys I'm a paying customer, I would like a response on how to do this. How can use the exact same code in javascript as what's being done when you create a ui event "Navigate to page" option (full refresh). Whatever I try to use to refresh my dyamic nav panel content won't show it .

I would like to know how I can do things on page load through javascript and modify the dom so that I can render custom nav.

I'm thinking of just using a generic service to do this and see if it will work that way but I like putting all my code in javascript libraries.

Fri Apr 17, 2015 4:03 pm

Hello Miguel,

Please use page show event instead of load