Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX - Cargar páginas con AJAX</title>
<script type="text/javascript">
function ajaxFunction() {
  var xmlHttp;

  try {

    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
  } catch (e) {

    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
    } catch (e) {

      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
      } catch (e) {
        alert("Tu navegador no soporta AJAX!");
        return false;
      }}}
}


function Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


    console.log("Llamada AJAX");

    ajax.onreadystatechange = function() {
        if (ajax.readyState==1){
            document.getElementById(capa).innerHTML = " Aguarde por favor...";
                 }
        if (ajax.readyState == 4) {

                document.getElementById(capa).innerHTML=ajax.responseText;
             }}

    ajax.send(null);
}


</script>
<style type="text/css">
img{border:none;}
a{color:#000; text-decoration:none;}
a:hover{text-decoration:underline;}
body{background:#fff;
font:14px Arial, Helvetica, sans-serif;
margin:0;}

#contenedor{width:950px;
margin: 0px auto;
overflow:hidden;
}
#loading{
 text-align:center;
background:#6CBF19;
color:#000;
width:30%;
margin:0px auto;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;

}
#loading2{
 text-align:center;
background:#000000;
color:#fff;
width:30%;
margin:0px auto;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;

}
#contenido{
float:right;
padding:5px;
width:750px;
background:#F2F2F2;
}
#enlaces{float:left;}
#encabezado{
background:#999;
list-style:none;
  font-size:14px;
  text-align:center;
   color:#fff;
   }
ul{
margin-top:-10px;
width:150px;
padding:10px;
list-style:none;
}

li{
padding:2px;
margin:3px 0px;
width:150px;
border:1px solid #000000;
}
li:hover{background:#EFFCE0;}

span.test { direction: rtl; unicode-bidi:bidi-override; }

li:first-child{
font:bold 15px Geneva,Georgia;
color:#CCCCCC;
background:#666666;
text-transform:uppercase;
}


</style>
</head>

<body>
<div id="contenedor">
            <div id="encabezado">
            <h1>AJAX: Cargar paginas con AJAX</h1>
  </div>

  <ul id="enlaces">
            <li>enlaces</li>
            <li><a href="javascript:Enviar('<?php  base_url(); ?> Productos/mostrarNP','contenido')" title="Mi Biografia">Llamar Function del controlador</a></li>

            </ul>

            <div id="contenido">
              <p><em><strong>Aca actualiza:</strong></em></p>

  </div>

</div>

</body>
</html>

   <?php

   foreach($Producto_model as $producto){

                    echo $producto['np'] ;

                }

    /*

            echo " <table align='center' border='1'> ";
            echo "<tr><th>Prodcuto</th><th>Subrubro</th></tr> ";

            foreach($Producto_model as $producto){


                    echo "<tr>";
                    echo "<td align='center'>". $producto['np'] ."</td>" ;
                    echo "<td align='center'>". $producto['snp'] ."</td>" ;
                    echo "<td align='center'>". $producto['pre'] ."</td>" ;
                    echo "</tr>";


                }

                echo '</table>';

         */
    ?>