Foros del Web » Programando para Internet » Javascript »

mostrar datos dinamicos en archivo .JS

 Estas en el tema de mostrar datos dinamicos en archivo .JS en el foro de Javascript en Foros del Web. hola foreros, necesito un apoyo ....si alguno de ustedes podria orientarme para poder establecer datos dinamicos para una archivo .JS, el archivo en si es ...
  #1 (permalink)  
Antiguo 20/03/2013, 07:30
 
Fecha de Ingreso: febrero-2013
Ubicación: Lima
Mensajes: 301
Antigüedad: 11 años, 2 meses
Puntos: 5
Pregunta mostrar datos dinamicos en archivo .JS
hola foreros, necesito un apoyo....si alguno de ustedes podria orientarme para poder establecer datos dinamicos para una archivo .JS, el archivo en si es como se muestra en el codigo de abajo:
Código Javascript: 
Ver original
  1. /*!
  2.  * Grid de Prueba
  3.  */
  4. SampleGrid = function(limitColumns){
  5.  
  6.     function italic(value){
  7.         return '<i>' + value + '</i>';
  8.     }
  9.  
  10.     function change(val){
  11.         if(val > 0){
  12.             return '<span style="color:green;">' + val + '</span>';
  13.         }else if(val < 0){
  14.             return '<span style="color:red;">' + val + '</span>';
  15.         }
  16.         return val;
  17.     }
  18.  
  19.     function pctChange(val){
  20.         if(val > 0){
  21.             return '<span style="color:green;">' + val + '%</span>';
  22.         }else if(val < 0){
  23.             return '<span style="color:red;">' + val + '%</span>';
  24.         }
  25.         return val;
  26.     }
  27.     
  28.     var columns = [
  29.         {
  30.             id:'company',
  31.             header: "Company", 
  32.             width: 160, 
  33.             sortable: true, 
  34.             dataIndex: 'company' 
  35.         },{
  36.             header: "Price", 
  37.             width: 75, 
  38.             sortable: true, 
  39.             renderer: Ext.util.Format.usMoney, 
  40.             dataIndex: 'price'
  41.         },{
  42.             header: "Change", 
  43.             width: 75, 
  44.             sortable: true, 
  45.             renderer: change, 
  46.             dataIndex: 'change'
  47.         },{
  48.             header: "% Change", 
  49.             width: 75, 
  50.             sortable: true, 
  51.             renderer: pctChange, 
  52.             dataIndex: 'pctChange'
  53.         },{
  54.             header: "Last Updated", 
  55.             width: 85, 
  56.             sortable: true, 
  57.             renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
  58.             dataIndex: 'lastChange'
  59.         }];
  60.  
  61.     // allow samples to limit columns
  62.     if(limitColumns){
  63.         var cs = [];
  64.         for(var i = 0, len = limitColumns.length; i < len; i++){
  65.             cs.push(columns[limitColumns[i]]);
  66.         }
  67.         columns = cs;
  68.     }
  69.  
  70.     SampleGrid.superclass.constructor.call(this, {
  71.         store: new Ext.data.Store({
  72.             reader: new Ext.data.ArrayReader({}, [
  73.                    {name: 'company'},
  74.                    {name: 'price', type: 'float'},
  75.                    {name: 'change', type: 'float'},
  76.                    {name: 'pctChange', type: 'float'},
  77.                    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  78.               ]),
  79.             data: [
  80.                 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  81.                 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  82.                 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  83.                 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  84.                 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
  85.             ]
  86.  
  87.         }),
  88.         columns: columns,
  89.         autoExpandColumn: 'company',
  90.         autoScroll : true,
  91.         //forceFit: true,
  92.         height:250,
  93.         width:600
  94.     });
  95. }
  96.  
  97. Ext.extend(SampleGrid, Ext.grid.GridPanel);

este archivo deberia usar un puente(data.PHP) que es el archivo que se muestra lineas abajo:
Código PHP: 
Ver original
  1. <?php
  2. mssql_connect('(local)', 'sa', '.') or die("No fue posible conectar con el servidor");
  3. mssql_select_db('demo') or die("No fue posible selecionar la base de datos");
  4.  
  5.     $sql="select * from pruebas";
  6.  
  7.     $arr = array();
  8.     $rs = mssql_query($sql) or die;
  9.  
  10.     while($obj = mssql_fetch_object($rs)){
  11.         $arr[] = $obj;
  12.     }
  13.     Echo json_encode($arr);
  14. ?>

el problema es que no esta mostrando los datos...y no se porque....alguien podria ayudarme...?
  #2 (permalink)  
Antiguo 20/03/2013, 07:58
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: mostrar datos dinamicos en archivo .JS
Puedes crear un file.js.php me explico en un js puedes tener partes dinamicas generadas por php si el resultado es javascript valido van a ejecutarse como tal... debes poner extension .php para que el servidor se entere de que debe ejecutarlo como tal antes de pasarlo al cliente.

Ahora bien ese data.php que muestras tiene algun error

echo es echo no Echo.

Por otro lado la impresion del array en fomato json directamente sin asignar a una variable no lo va a interpretar el script js... excepto que leas el fichero de alguna manera y lo asignes a una variable....

Si modificas la ultima linea a

echo "var datosjson=".json_encode($arr).";";

eso generara en el fichero de salida una variable javascript con el contenido en formato json... apartir de aqui puedes pasarlo a un array javascript y usarlo en tu script.

Código Javascript: 
Ver original
  1. <?php
  2. mssql_connect('(local)', 'sa', '.') or die("No fue posible conectar con el servidor");
  3. mssql_select_db('demo') or die("No fue posible selecionar la base de datos");
  4.  
  5.     $sql="select * from pruebas";
  6.  
  7.     $arr = array();
  8.     $rs = mssql_query($sql) or die;
  9.  
  10.     while($obj = mssql_fetch_object($rs)){
  11.         $arr[] = $obj;
  12.     }
  13.     echo "var datosjson=".json_encode($arr).";";
  14. ?>
  15.  
  16. /*!
  17.  * Grid de Prueba
  18.  */
  19. SampleGrid = function(limitColumns){
  20.  
  21.     function italic(value){
  22.         return '<i>' + value + '</i>';
  23.     }
  24.  
  25.     function change(val){
  26.         if(val > 0){
  27.             return '<span style="color:green;">' + val + '</span>';
  28.         }else if(val < 0){
  29.             return '<span style="color:red;">' + val + '</span>';
  30.         }
  31.         return val;
  32.     }
  33.  
  34.     function pctChange(val){
  35.         if(val > 0){
  36.             return '<span style="color:green;">' + val + '%</span>';
  37.         }else if(val < 0){
  38.             return '<span style="color:red;">' + val + '%</span>';
  39.         }
  40.         return val;
  41.     }
  42.     
  43.     var columns = [
  44.         {
  45.             id:'company',
  46.             header: "Company", 
  47.             width: 160, 
  48.             sortable: true, 
  49.             dataIndex: 'company' 
  50.         },{
  51.             header: "Price", 
  52.             width: 75, 
  53.             sortable: true, 
  54.             renderer: Ext.util.Format.usMoney, 
  55.             dataIndex: 'price'
  56.         },{
  57.             header: "Change", 
  58.             width: 75, 
  59.             sortable: true, 
  60.             renderer: change, 
  61.             dataIndex: 'change'
  62.         },{
  63.             header: "% Change", 
  64.             width: 75, 
  65.             sortable: true, 
  66.             renderer: pctChange, 
  67.             dataIndex: 'pctChange'
  68.         },{
  69.             header: "Last Updated", 
  70.             width: 85, 
  71.             sortable: true, 
  72.             renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
  73.             dataIndex: 'lastChange'
  74.         }];
  75.  
  76.     // allow samples to limit columns
  77.     if(limitColumns){
  78.         var cs = [];
  79.         for(var i = 0, len = limitColumns.length; i < len; i++){
  80.             cs.push(columns[limitColumns[i]]);
  81.         }
  82.         columns = cs;
  83.     }
  84.  
  85.     SampleGrid.superclass.constructor.call(this, {
  86.         store: new Ext.data.Store({
  87.             reader: new Ext.data.ArrayReader({}, [
  88.                    {name: 'company'},
  89.                    {name: 'price', type: 'float'},
  90.                    {name: 'change', type: 'float'},
  91.                    {name: 'pctChange', type: 'float'},
  92.                    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  93.               ]),
  94.             data: [
  95.                 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  96.                 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  97.                 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  98.                 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  99.                 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
  100.             ]
  101.  
  102.         }),
  103.         columns: columns,
  104.         autoExpandColumn: 'company',
  105.         autoScroll : true,
  106.         //forceFit: true,
  107.         height:250,
  108.         width:600
  109.     });
  110. }
  111.  
  112. Ext.extend(SampleGrid, Ext.grid.GridPanel);

Solo deberias acceder a la variable datosjson la qual contendra un string en formato json valido ... http://stackoverflow.com/questions/4...-in-javascript aqui tienes ejemplos de como trabajar con ella.
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 20/03/2013, 08:09
 
Fecha de Ingreso: febrero-2013
Ubicación: Lima
Mensajes: 301
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: mostrar datos dinamicos en archivo .JS
gracias por tu respuesta, pero en el ejemplo hay datos estaticos que se muestran sin problemas, lo que quisiera es eliminar esa data y que me muestre los datos del archivo data.php que habia creado....lo que tu me comentas seria valido para esto...?
y como lo declararia para que me muestre la data....o el ejemplo que me das ya esta..?
  #4 (permalink)  
Antiguo 21/03/2013, 03:04
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: mostrar datos dinamicos en archivo .JS
Si o no ... si cargas ese fichero al inicio los datos seran estaticos a partir del momento que los hayas cargado. Si necesistas cambiar esos datos debes diseñarlo de tal manera que las funciones usen los ultimos datos cargados ...

No tengo un ejemplo para darte pero la logica seria

1. una variabla javascript global que reciba los datos cargados dinamicamente, pero declacarada al inicio.
2. funciones que lean esa variable (estas se pueden cargar al inicio)

Para ello deberas refrescar esa variable con AJAX ... (google: traer javascript con ajax)

http://www.formatoweb.com.ar/ajax/ej...rgado_ajax.php

http://www.forosdelweb.com/f13/que-u...y-json-955415/

http://tecnologiasweb.blogspot.com.e...cript-con.html
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Etiquetas: dinamicos, js, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:25.