Guias para la Web
refrescar diferentes divs con javascript y ajax
En un POST anterior les deje un tutorial de como refrescar un div tag sin necesidad de refrescar la pagina completa, bien en esta ocasión e pulido mejor el código y e creado una función que refresque cualquier cantidad de DIVs sin necesidad que se refresque la pagina completa..
Esto facilita el uso del código para cualquier circunstancia que nos enfrentemos al crear nuestra web..
Refrescando diferentes div tags usando javascript y ajax.
La función que usaremos se llama refreshDivs(divid , secs , url) , la función acepta 3 parámetros mandatarios:
- divid = este es el ID del div que quieres refrescar.
- secs = los segundo en que deseas que el div se refresque.
- url = La dirección del documento que deseas que aparezca en el DIV.
El URL puede ser cualquier clase de documento, sea php, html, shtml etc ..
Ok ahora el paso a seguir es colocar en tu html entre los “<head>” tags el siguiente código abajo mostrado.
<script type="text/javascript" language="javascript">
function refreshDivs(divid,secs,url)
{
// define our vars
var divid,secs,url,fetch_unix_timestamp;
// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}
// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}
// Timestamp para evitar que se cachee el array GET
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>
La parte del código donde indicamos que divs hay que refrescar es la siguiente:
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
Utilizando el evento window.onload hacemos que nuestro explorador corra la función y esta nos refresque los divs que deseamos que sean refrescado sin necesidad de recargar o refrescar la pagina completa..
Repite las funciones con diferentes div, tiempos y urls no hay limitaciones a la cantidad de veces que quieras usarla.
En nuestro ejemplo, usare documentos php, pero no es necesario puede ser cualquier clase de documentos mientra sean soportados por tu webserver o hosting service.
div1.php
div1.php sera un simple script que cambiara números al azar, como verán este es el documento llamado en la función arriba que es refreshDivs(‘div1′,5,’div1.php’).
Este documento sera llamado cada 5 segundos y se mostrara en el div1
Los otros dos ejemplos son similares a este primero, solo cambian el ID del DIV el tiempo en segundos y la url o la dirección del documento PHP.
<?php echo "<p style=\"background-color:#FF7400\">Aquí obtendremos números al asar ".rand(1, 1000)."</p>"; ?>
div2.php
div2.php repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() .
<?php
$veces = rand(1,20);
for($i= 0; $i <= $veces; $i++)
{
echo "<p style=\"background-color:#356AA0\">".$i." Por favor repite me, ".$veces." veces.</p>";
}
?>
div3.php
Es el mismo caso para el div3.php, repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() , con la única diferencia que el color de el fondo es diferente y la cantidad de segundos a refrescar…
<?php
$veces = rand(1,20);
for($i= 0; $i <= $veces; $i++)
{
echo "<p style=\"background-color:#C79810\">".$i." Por favor repite me, ".$veces." veces.</p>";
}
?>
Estos son simples ejemplos donde podrás observar como trabaja la función de la que hablamos..
Con esto podrás refrescar varios div tag , sin necesidad de refrescar o recargar la pagina completa..
No hay limitaciones en cuantas veces quieras utilizar la función solo repite la función con diferentes div ids, segundos y urls o documentos a llamar.
Veamos todo el código con el HTML:
<html>
<head>
<title>Ejemplos de como refrescar varios div tags usando javascript y ajax.</title>
<script>
function refreshDivs(divid,secs,url)
{
// define our vars
var divid,secs,url,fetch_unix_timestamp;
// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}
// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}
// Timestamp para evitar que se cachee el array GET
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
Puedes ver los ejemplos funcionando dando click en Refrescar varios Divs tags con javascript y ajax.
La función esta completa pues chequea que los parámetros estén definidos si no lo están un javascript alert te advetira del problema y el script terminara su función..
Por favor si te a gustado el código deja tu mensaje, y si encuentras algún problema no temas en postear aquí mismo gracias por Leer..
flashchat-6-0-8 and PHP fusion V7.02.03
Flashchat 6.0.8 and PHP-FUSION V7.02.03 Integration.
Works also with older version PHP-FUSION v7.02.01 in fact the script was created using this version then tested the version previously announced..
Download available PHP-FUSION v7.02.03
In the v7.01.04 and maybe lower the php-fusion team still used md5() hashed to encrypt the user_passoword, but in version 7.02.01 and over the encryption was updated for use of more secured hashes..
This is good, better protection overall..
- Connect the usernames from database.
- Super Admin becomes Admin in Flashchat 6.0.8
- Admin user Without any privileges in PHP-FUSION becomes Moderator in Flashchat 6.0.8
- Auto login when user is logged in PHP-FUSION V7 site.
- Login to the chat and to the site using Flashchat login Form..
- User banned cannot login the chat if is banned from the PHP-FUSION site itself..
The php files that we need to create are the following:
In the folder “/inc/cmses” create “fusion7_02_03CMS.php” will use this higher version because I created the script thinking in this specific version..
<?php
/*
* Integration fix by Neumann Valle aka utan, july 30, 2011
* original code and post at http://vcomputadoras.com/flashchat-6-0-8-php-fusionv7-02-03/
* where php-fusion used hash_hmac() for hashing passwords.
*
* */
ini_set('display_errors', 'OFF');
error_reporting(E_ALL);
$fusion_root_path = realpath(dirname(__FILE__) . '/../../../') . '/';
require_once($fusion_root_path . 'config.php');
class FusionCMS {
var $userid;
var $loginStmt;
var $getUserStmt;
var $getUsersaltStmt;
var $getUsersStmt;
function FusionCMS()
{
$this->getUserStmt = new Statement('SELECT user_id AS id, user_name AS login, user_level FROM '.DB_PREFIX.'users WHERE user_id=? LIMIT 1');
$this->getUsersStmt = new Statement('SELECT user_id AS id, user_name as login FROM '.DB_PREFIX.'users');
$this->userid = NULL;
if (isset($_COOKIE[COOKIE_PREFIX."user"])) {
$cookie_vars = explode('.', $_COOKIE[COOKIE_PREFIX."user"]);
$cookie_1 = is_numeric($cookie_vars['0']) ? $cookie_vars['0'] : NULL;
$cookie_2 = (preg_match('/^[0-9a-z]{32}$/', $cookie_vars['1']) ? $cookie_vars['1'] : '');
$this->userid = $cookie_1;
}
}
function isLoggedIn() {
return $this->userid;
}
function getRoles($group) {
$rv = ROLE_USER;
if ($group == 101)
{
$rv = ROLE_USER;
}
if ($GLOBALS['fc_config']['liveSupportMode'] && $group == 101)
{
$rv = ROLE_CUSTOMER;
}
if ($group == 102)
{
$rv = ROLE_MODERATOR;
}
if ($group == 103)
{
$rv = ROLE_ADMIN;
}
return $rv;
}
function getUserProfile($userid) {
if ($userid == SPY_USERID) $rv = NULL;
elseif ($user = $this->getUser($userid)) {
$rv = ($id = $this->isLoggedIn() && ($id == $userid)) ? '../edit_profile.php' : '../profile.php?lookup=' . $userid;
return $rv;
}
}
function getUser($userid) {
// if ($userid == SPY_USERID) return NULL;
$rv = NULL;
if(($rs = $this->getUserStmt->process($userid)) && ($rec = $rs->next())) {
$rec['roles'] = $this->getRoles($rec['user_level']);
$rv = $rec;
}
return $rv;
}
function login($login, $password) {
$this->loginStmt = new Statement("SELECT * FROM ".DB_PREFIX."users WHERE user_name='".$login."'");
$rs = $this->loginStmt->process();
$rec = $rs->next();
if ((hash_hmac($rec['user_algo'] , $password , $rec['user_salt'])) === $rec['user_password'])
{
if ($rec['user_status']) return NULL; /* user is banned from the site */
$cookieExpiration = time() + 172800;
$key = hash_hmac($rec['user_algo'], $rec['user_id'].$cookieExpiration, $rec['user_salt']);
$hash = hash_hmac($rec['user_algo'], $rec['user_id'].$cookieExpiration, $key );
$cookie_value = $rec['user_id'].".".$cookieExpiration.".".$hash;
setcookie(COOKIE_PREFIX."user", $cookie_value, $cookieExpiration, '/', '', '0');
return $rec['user_id'];
}
}
function userInRole($userid, $role) {
if($user = $this->getUser($userid)) {
return ($user['roles'] == $role);
}
return false;
}
function logout() {
}
function getUsers() {
$rv = $this->getUsersStmt->process();
return $rv;
}
function getGender($userid) {
// 'M' for Male, 'F' for Female, NULL for undefined
return NULL;
}
}
$GLOBALS['fc_config']['db'] = array(
'host' => $db_host,
'user' => $db_user,
'pass' => $db_pass,
'base' => $db_name,
'pref' => DB_PREFIX . 'fc_'
);
$GLOBALS['fc_config']['cms'] = new FusionCMS();
foreach($GLOBALS['fc_config']['languages'] as $k => $v) {
$GLOBALS['fc_config']['languages'][$k]['dialog']['login']['moderator'] = '';
}
?>
Now we need to override “consts.php” located in the “install_files” folder with the new content .. copy paste everything overriding the old content..
<?php
/**
** Constants used for installation file.
**/
define('INC_DIR', dirname(__FILE__) . '/../inc/');//for config.php
define('NAVY_FILE_SIZE', 1992);//necessary for check uploaded in binary mode
define('CHAT_ROOMS', 'The Lounge, Hollywood, Tech Talk, Current Events');//default rooms
define('CONFIG_FILE', INC_DIR . 'config.php');
define('INST_DIR', './install_files/');
$cmss = array(
//'aedatingCMS' => 'aeDating 2.0/3.0 (FlashChat is built in to aeDating 3.x)',
//'aedatingCMS2'=> 'aeDating 2.0/3.0 (which only permits access to Gold members)',
//'aedating4CMS'=> 'aeDating 4.0',
'azdgCMS' => 'AZDG Dating Lite 2.1.2',
'cpgNukeCMS' => 'CPGNuke',
'cpgNukeDragonfly921CMS' => 'CPGNuke Dragonfly 9.2.1',
'datingProCMS'=> 'Dating Pro',
'e107CMS' => 'e107 0.617',
'eMeetingCMS' => 'eMeeting',
'efriendsCMS497' => 'Alstrasoft E-friends 4.9.7',
'fusionCMS' => 'PHP Fusion 4.0.0',
'fusionCMS2' => 'PHP Fusion 5.0.1',
'fusion6CMS' => 'PHP Fusion 6',
'fusion7CMS' => 'PHP Fusion 7.01.04',
'fusion7_02_03CMS' => 'PHP Fusion 7.02.03',
'geeklogCMS' => 'GeekLog 1.3.9',
'joomlaCMS' => 'Joomla 1.1',
'ipbCMS' => 'Invision Power Board (IPB) 2.0.0',
'ipbCMS2' => 'Invision Power Board (IPB) 2.0.3',
'ipbCMS2' => 'Invision Power Board (IPB) 2.1.0',
'ipb30CMS' => 'Invision Power Board (IPB) 3.0.3',
'lunabyteCMS' => 'LunaByte / Enigma 1.3',
'mamboCMS' => 'Mambo 4.5.0',
'mamboCMS2' => 'Mambo 4.5.2',
'mambo465CMS' => 'Mambo 4.6.5',
'mdproCMS' => 'MD-Pro 1.0.7',
'mdpro1081CMS' => 'MD-Pro 1.0.81',
'moodleCMS' => 'Moodle',
'moodle16CMS' => 'Moodle 1.6',
'moodle17CMS' => 'Moodle 1.7',
'moodle18CMS' => 'Moodle 1.8',
'moodle19CMS' => 'Moodle 1.9',
'osdateCMS' => 'osDate Dating System',
'phpBB2CMS' => 'phpBB 2.0.10 and above',
'phpBB3CMS' => 'phpBB 3.0.B2 and above',
'phpBB307CMS' => 'phpBB 3.0.2 and above',
'phpBB305CMS' => 'phpBB 3.0.5 and above',
//'phpNukeModCMS' => 'PHP-Nuke 7.3(module version)',
'phpNukeCMS73' => 'PHP-Nuke 7.3',
'phpNukeCMS76' => 'PHP-Nuke 7.6',
'phpNukeCMS78' => 'PHP-Nuke 7.8',
//'postNukeModCMS' => 'PostNuke 0.726-3(module version)',
'postNukeCMS' => 'PostNuke 0.726-3',
'postNukeCMS0762' => 'PostNuke 0.762',
'phorumCMS518' => 'Phorum 5.1.8',
'phorumCMS527' => 'Phorum 5.2.7',
'smfCMS' => 'Simple Machines 1.0',
'smfCMS2' => 'Simple Machines 1.1',
'smfCMS20' => 'Simple Machines 2.0',
'ubbCMS' => 'UBB.Threads 6.5',
'ubb70CMS' => 'UBB.Threads 7.0',
'ubb71CMS' => 'UBB.Threads 7.1',
'ubb74CMS' => 'UBB.Threads 7.4',
'vbulletin30CMS'=> 'vBulletin 3.0',
'vbulletin35CMS'=> 'vBulletin 3.5',
'vbulletin36CMS'=> 'vBulletin 3.6',
'vbulletin37CMS'=> 'vBulletin 3.7',
'vbulletin38CMS'=> 'vBulletin 3.8',
'vbulletin40CMS'=> 'vBulletin 4.0',
'webDateCMS' => 'Web Date',
'wotCMS2' => 'WoltLab Burning Board 2.3.4',
'wowCMS' => 'WowBB 1.6.1',
'wowCMS2' => 'WowBB 1.6.2',
'wowCMS165' => 'WowBB 1.6.5',
'wowCMS170' => 'WowBB 1.7',
'xmbCMS' => 'XMB 1.9.1',
'xoopsCMS' => 'Xoops 2.0.7',
'xoops2016CMS' => 'Xoops 2.0.16',
'phpkitCMS' => 'phpkit 1.6.1',
'MyBBCMS' => 'MyBB 1.0',
'easysiteCMS' => 'EasySite 3.2.5',
'SBDatingCMS' => 'Softbiz Dating',
'phpFox108' => 'phpFox 1.0.8',
'phpFox11' => 'phpFox 1.1',
'phpFox16CMS' => 'phpFox 1.6',
'inspirations31CMS' => 'Inspirations 3.1',
'drupalCMS' => 'Drupal',
'drupal613CMS' => 'Drupal 6.1.3',
'punbbCMS' => 'punBB 1.2.10',
'wordpress22CMS' => 'WordPress 2.1.0 - 2.7',
);
?>
Now that will do it, Install the chat as usual, when the integration page come up , chose to install PHP fusion V7.02.03.
I have installed the script using the root folder where all the php-fusion files resides, the “FLASHCHAT” folder is with the php-fusion files.
Please leave message about any error or suggestions.. if you don’t leave any feed back then I will not be able to fix problems with the script.. please leave a comment good or bad.. thanks for reading..
Actualiza un DIV usando menus y ajax.
Bueno,
Un amigo que posteo por acá, me pidió que como le aria para que se actualizara un DIV usando un evento onClick de un Menú y que cuando este se presionara este llenara con el contenido de otro documento un respectivo DIV..
Como actualiza un DIV con un documento determinado , dependiendo de el enlace o hyperlink que fue cliqueado, usando AJAX..
Cliquea aquí para ver una demostración de como quedo..
Entonces me vi en la tarea de hacerlo un echo e aquí el resultado:
- Primero, nuestro interés esque cada hyperlink en el Menú, lleve respectivamente a una pagina HTML, PHP o TXT.
- Segundo, saber el ID del DIV donde quieras que aparezca.
- Tercero crear los documentos y colocar su ubicación el los “lis “del menu.
Ahora en una pagina html, php, shtml. copia y pega esto:
<html>
<title>Request a page onclick Menu</title>
<head>
<script type="text/javascript">
function getPages(divid,url)
{
if(divid !="" && url != "")
{
var ob= AjaxObject();
var unixTimeStamp= fetch_unix_timestamp();
var nocacheurl = url+ "?t=" + unixTimeStamp;
ob.onreadystatechange=function()
{
if(ob.readyState==4)
{
if(ob.status == 200)
{
if(ob.responseText != null)
{
document.getElementById(divid).innerHTML=ob.responseText;
}else
{
alert('There was an error: no data was received');
}
}else
{
alert('Ajax error:' + ob.statusText);
}
}
}
ob.open("GET",nocacheurl,true);
ob.send(null);
}else{
alert('Se te a olvidado colocar el id del DIV o el URL en el href del achor tag, en el evento de onClick ');
}
}
function fetch_unix_timestamp()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
function AjaxObject()
{
var xmlHttp;
try{
return xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
return xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
return xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Sorry AJAX is not supported by your browser.");
return false;
}
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="my_text.txt" onClick="getPages('response',this); return false" >Cliqueame porfavor</a></li>
<li><a href="second_text.txt" onClick="getPages('response',this); return false" >Cliqueame aqui tambien.</a></li>
</ul>
<div id="response"></div>
</body>
</html>
Ahora explico la función getPages(divid,url) es la que ara todo el trabajo por nosotros, esta función puede ser pasada en el onclick de un boton o de A (anchor tag) de un hyperlink.
Solo pasas en el primer argumento el id del DIV donde quieres que aparezca el contenido del documento y en el segundo el url del documento que aparecerá en el DIV del primer argumento , que en este caso esta definido en el HTML markup, que es el DIV id=”response”.
Entonces en el href del anchor tag colocas el onClick=”getPages(‘response’,this)” donde el “response” es el ID del DIV, y this es referido al objeto que es el URL del href.
Así mismo si quieres usarlo en diferentes DIV también funcionaria solo colocas el ID del DIV donde quieras que el conteniendo del documento aparezca..
Así si lo deseas puedes colocar el contendido de cualquier documentos en diferentes DIVs sin ningún problema..
Bueno hasta la próxima, gracias por leer este tutorial..
document.getElementById(“recaptcha-submit-btn-area”) is null
Desde que instale el plugin de recaptcha Versión 3.1.3 en mis blogs me econtre con este error de javascript que lo muestra firebug:
document.getElementById(“recaptcha-submit-btn-area”) is null.
Y entonces me apreste a tratar de eliminar el error, y lo e echo posible el error pasa porque el ID=”recaptcha-submit-btn-area” no esta definido dentro del HTML para evitar este error debemos probar con un if condicional si el ID esta en el html cargado..
este fix es para la versión recaptcha Versión 3.1.3:
abre el documento PHP “recaptcha.php” que se encuentra en el folder “/plugins/wp-recaptcha/”.
en la linea 403 en la funcion save_comment_script().
marca toda la función y pega el siguiente código.
function save_comment_script() {
$javascript = <<<JS
<script type="text/javascript">
var sub = document.getElementById('submit');
if(document.getElementById('recaptcha-submit-btn-area')){
document.getElementById('recaptcha-submit-btn-area').appendChild (sub);
document.getElementById('submit').tabIndex = 6;
if ( typeof _recaptcha_wordpress_savedcomment != 'undefined') {
document.getElementById('comment').value = _recaptcha_wordpress_savedcomment;
}
document.getElementById('recaptcha_table').style.direction = 'ltr';
}
</script>
JS;
echo $javascript;
}
Prueba el plugin otra ves y ya no tendrás el error de javascript..
Bueno el fix es rapido y simple, gracias por leer..
