Como se hace esto en Javascript?

panchompc · #1 (**permalink**) 20/02/2012, 08:50

Hola, yo en php compruebo que un campo tenga una condicion, si es asi, la imprimo, sino no po', jajaja pero no se hacerlo en javascript y no se por donde buscar.

esto es lo que hago en php y necesito hacerlo en javascript.

<?php
if($variable1 !='') {
Echo '<li><img src="../imagenes/ico_absorbente_acustico.png" name="ico" width="96" height="36" id="ico" /></li>';
} ?>

caricatos · #2 (**permalink**) 20/02/2012, 08:57

Hola:

Seguro que para tu ejemplo sea más aconsejable php y pensar en esos condicionamientos con la página ya cargada... la sintaxis es igual, aunque con javascript no se suele usar el "$" para indicar que se trata de una variable...

Con javascript si escribes de forma similar sería usando document.write... pero no es aconsejable con la página cargada, porque esa instrucción escribe en el documento, y eso implica machacar el contenido existente... hay alternativas, el value en controles de formularios; innerHTML en los tags normales... con el DOM más puro usando appendChild + createTextNode...

Cuéntanos tu caso y te diremos las opciones (si no es un caso imposible)

Saludos

panchompc · #3 (**permalink**) 20/02/2012, 09:39

hola, gracias por responder tan rapido, lo que pasa es que estoy haciendo una aplicacion en PHP+ JAVASCRIPT + APIv3 de GOOGLE MAP

Mediante la creación de un xml, saco los datos y coordenadas de las sucursales, estas sucursales tienen 19 atributos ( familias de productos que venden ). la creacion del xml la hago asi:

Código PHP:

Ver original<?php
//conexion a la DB
 
// Start XML file, create parent node
 
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
 
 
 
// Select all the rows in the markers table
 
$query = "SELECT * FROM tblsucursales WHERE 1";
$result = mysql_query($query);
//if (!$result) {  
//  die('Invalid query: ' . mysql_error());
//} 
 
header("Content-type: text/xml"); 
 
// Iterate through the rows, adding XML nodes for each
 
$espacio= ' ';
 
while ($row = @mysql_fetch_assoc($result)){
    
$regg= Nombre_region_2($row['strRegion']) ;
$segg= Nombre_Segmento($row['idSegmento']);
      
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node); 
  $newnode->setAttribute("idd",$row['idSucursal']);  
  $newnode->setAttribute("name",$row['strNombre']);
  $newnode->setAttribute("address", $row['strDireccion'].$espacio.$row['strNumero']); 
  $newnode->setAttribute("comu", $row['strComuna']);  
  $newnode->setAttribute("lat", $row['strLatitud']);  
  $newnode->setAttribute("lng", $row['strLongitud']);
  $newnode->setAttribute("ncon", $row['str_nombre_contacto']);
  $newnode->setAttribute("econ", $row['str_email_contacto']);
  $newnode->setAttribute("tcon", $row['str_telefono_contacto']); 
  $newnode->setAttribute("foto", $row['strFoto']);
  $newnode->setAttribute("type", "sucursales");   
  $newnode->setAttribute("regi", $regg);
  $newnode->setAttribute("segm", $segg);
  $newnode->setAttribute("dist", $row['nombre_distribuidor']);   
  $newnode->setAttribute("atri01", $row['YC_Volcan']);
  $newnode->setAttribute("atri02", $row['YC_Romeral']);
  $newnode->setAttribute("atri03", $row['YC_Knauf']);
  $newnode->setAttribute("atri04", $row['FC_Volcan']);
  $newnode->setAttribute("atri05", $row['FC_Pizarreno']);
  $newnode->setAttribute("atri06", $row['Ln_Volcan']);
  $newnode->setAttribute("atri07", $row['Ln_Romeral']);
  $newnode->setAttribute("atri08", $row['Ys_Volcan']);
  $newnode->setAttribute("atri09", $row['Ys_Romeral']);
  $newnode->setAttribute("atri10", $row['Tj_Volcan']);
  $newnode->setAttribute("atri11", $row['Tj_Transaco']);
  $newnode->setAttribute("atri12", $row['Ftro_Volcan']);
  $newnode->setAttribute("atri13", $row['FC_Lizaflex']);
  $newnode->setAttribute("atri14", $row['Ftro_Becton']);
  $newnode->setAttribute("atri15", $row['Ftro_Dynal']);
  $newnode->setAttribute("atri16", $row['Ftro_AsfalChile']);
  $newnode->setAttribute("atri17", $row['Jp_Volcan']);
  $newnode->setAttribute("atri18", $row['Jp_Solcrom']);
  $newnode->setAttribute("atri19", $row['Jp_Romeral']);    
} 
 
echo $dom->saveXML();
?>

Desde al atri01 al atri19 son los atributos, pueden ser NULL o "vacio"(nada) y/o "On"

Luego los recojo en la pagina que crea el mapa:

Código PHP:

Ver original<?php 
//conexion a la DB
 
//html del header
 
 
    //<![CDATA[
 
 
    var customIcons = {
      sucursales: {
        icon: './imagenes/Pin.png',
      }
    };
 
 
    function load() {
 
      var map = new google.maps.Map(document.getElementById("map"), {
        <?php coor_region($_GET['region']);?>
      mapTypeId: 'roadmap'
      });
 
      var infoWindow = new google.maps.InfoWindow({
          maxWidth: 500
      });
 
      downloadUrl("crea_xml.php", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
 
 
      for (var i = 0; i < markers.length; i++)
 
            {
                var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                var idd = markers[i].getAttribute("idd");
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var tcon = markers[i].getAttribute("tcon");
                var ncon = markers[i].getAttribute("ncon");
                var econ = markers[i].getAttribute("econ");
                var foto = markers[i].getAttribute("foto");
                var comu = markers[i].getAttribute("comu");
                var regi = markers[i].getAttribute("regi"); 
                var segm = markers[i].getAttribute("segm");
                var dist = markers[i].getAttribute("dist");             
                var dist = markers[i].getAttribute("atri01");
                var dist = markers[i].getAttribute("atri02");
                var dist = markers[i].getAttribute("atri03");
                var dist = markers[i].getAttribute("atri04");
                var dist = markers[i].getAttribute("atri05");
                var dist = markers[i].getAttribute("atri06");
                var dist = markers[i].getAttribute("atri07");
                var dist = markers[i].getAttribute("atri08");
                var dist = markers[i].getAttribute("atri09");
                var dist = markers[i].getAttribute("atri10");
                var dist = markers[i].getAttribute("atri11");
                var dist = markers[i].getAttribute("atri12");
                var dist = markers[i].getAttribute("atri13");
                var dist = markers[i].getAttribute("atri14");
                var dist = markers[i].getAttribute("atri15");
                var dist = markers[i].getAttribute("atri16");
                var dist = markers[i].getAttribute("atri17");
                var dist = markers[i].getAttribute("atri18");
                var dist = markers[i].getAttribute("atri19");
                        
 
 
                // Comenzamos con el HTML
 
                var html    = [
 
'<div style="width:400px; height:300px;">',             
'<div id="tabs">',
'<p id="dir_titulo">' + address + '<br />',
'<h5>' + comu + ', ' + regi + '</h5></p><div class="linea"></div>',
'<ul>',
'<li><a href="#tabs-1"> General </a></li>',
'<li><a href="#tabs-2"> Contacto </a></li>',
'</ul>',
<!--INICIO TAB_GENERAL-->
'<div id="tabs-1">',
'<div class="imagen">',
'<img src="' + foto + '" width="148" height="107">',
'</div>',
'<h4>' + dist + ' / ' + segm +' </h4>',
'<h2>' + name + '</h2><br>',
<!--INICIO FAMILIAS_BOX-->
'<div id="familias_box">',
'<ul>',
 
///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
ACA NECESITO COMPROBAR LAS VARIABLES (ATRIxx) Y IMPRIMIR EN PANTALLA 
 
SI LA VARIABLE NO ESTA VACIA, IMPRIMIR: '<li>Ftro_AsfalChile</li>', , SI ESTA VACIA, NO HACER NADA
 
/////////////////////////////////////////////////
ATRIBUTOS ESTATICOS (CAMBIAR POR DINAMICOS)
 
'<li>Ftro_AsfalChile</li>',
'<li>Ftro_Dynal</li>',
'<li>FC_Pizarreno</li>',
'</ul>',
'</div>',
<!--FIN FAMILIAS_BOX-->
'</div>',
<!--FIN TAB_GENERAL-->
<!--INICIO TAB_CONTACTO-->
'<div id="tabs-2">',
'<div class="imagen">',
'<img src="' + foto + '" width="148" height="107">',
'</div>',
'<h4>' + name + '</h4>',
'<h2>Información de Contacto</h2><br>',
'<div id="familias_box">',
'<ul>',
'<li id="contacto">Encargado:</strong> ' + ncon + ' </li><br>',
'<li id="contacto">Telefono :</strong> ' + tcon + ' </li><br>',
'<li id="contacto">Email:</strong><a href="mailto:' + econ+ '"> ' + econ + '</a></li>',
'</div>',
'</div>',
<!--FIN TAB_CONTACTO-->
'</div>',
'</div>'
 
                            ].join('');     
 
 
                var icon    = customIcons[type] || {};
                var marker = new google.maps.Marker(
                        {
                    map: map,
                    position: point,
                    icon: icon.icon,
                    title: address + ', ' + comu,
 
                });
 
                bindInfoWindow(marker, map, infoWindow, html);                   
 
         }
 
      });
    }
 
 
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
      $("#tabs").tabs();
    });
    infoWindow.open(map, marker);
    infoWindow.setContent(html);
  });
}
 
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;   
 
 
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
 
      };
 
 
      request.open('GET', url, true);
      request.send(null);
    }
 
 
 
    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
 
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
 
 
    }
 
    function doNothing() {}
 
    //]]>
 
 
  </script>

Eso es lo que tengo, puse en MAYUSCULAS donde debe hacerce lo que necesito, para que me avisen en caso de tener alguna precaucion extra ( esta api ya me tiene loco @_@)

saludos