Soy nuevo en JQuery Mobile y estoy tratando de mostrar una página con un gráfico JqPlot dependiendo de la elección del usuario.

Leí y experimenté esta mañana que, por diseño, no se ejecuta el código javascript de una página que se muestra / carga al hacer clic en un enlace.

Para tener en cuenta el script JS de una página para cargar, el atributo de datosdata-ajax del enlace se debe establecer en falso. Pero en este caso, el navegador vuelve a cargar toda la página y no es una transición fácil para el usuario.

<p><a href="myUrl.php" data-ajax= "false" data-transition="slideup" data-role="button" data-theme="c">  

He encontrado una manera de averiguarlo,Pero necesito una revisión experta de mi código.. La idea es declarar un evento.pageshow en la página del contenedor gráfico#page-detail Cargar la página de creación de gráficos a través de JQuery..load() función.

De esta manera, soy capaz de:

Tener una transición suave a mi páginaTener un div de carga donde se cargará mi gráficoRenderizar mi gráfico cuando la carga de datos y el gráfico JqPlot estén listos

Mi código :

  $(document).on('pageshow','#page-detail',function(){       
        //Apply a loading layer to the graph container
        $('#graph-container').html("<div id='graph-loading-layer' class='loading loading-col2a'>"+g_graphLoadingText+"</div>");                    

        //Load my graphic page creation. In this page, there are JS code to create the JQplot graphic
        $('#graph-container').load(g_baseUrl+"index/graph/format/html",{chartHeight : newHeight+'px'},function(response, status, xhr) {
            console.log('loaded')
        });                 
    });

Mi solución anterior es dolorosa y estoy seguro de que podría cargar mi gráfico fácilmente ¿Hay alguien con una solución mejor? ¿Mejor implementación de código?