AJAX .load("#kalendar") – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Dobrý den,


mám div id kalendář a při načtení document. ready si do něj vypíšu kalendář. Mám v něm dvě tlačítka předchozi a další měsíc. Který jsou pod id tehdy až když se mi vypíše ten kalendář. Dostávám se k nim pomocí document.ready -> #kalendar.load -> this.find #kprava -> logické operace + #kalendar.load s novými daty. Tímto stylem se mi to provede pouze jednou a pak to umře. Vnitřně tuším proč mě to padá, ale nenapadá mě jak to opravit. (pozn. pokud to vypisuji do jiného divu, tak to funguje správně. Ale výhra není mít dva kalendáře jeden na klikání a druhý o div vedle, který by se příslušně měnil). Snažně prosím o pomoc, či návod a nebo jen myšlenku správným směrem. Děkuji všem co se zúčastní konverzace a přispějí svou trochou do mlýna.

Html - začátek: 

<div id="kalendar">
</div>

ajax.js: 

$(document).ready(function(){

// nastav aktualni datum
datum = new Date(); 
mesic = datum.getMonth() + 1;
rok = datum.getFullYear()

// nacti kalendar
$("#kalendar").load("ajax_kalendar.php", function(){
//klikem na prave posun o mesic vpred 
$(this).find("#kprava").click(function(){ 
mesic++;
if(mesic>12)
{
mesic=1;
rok++; 
} 
$("#kalendar").load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
});
//klikem na leve posun o mesic vzad 
$(this).find("#kleva").click(function(){ 
mesic--;
if(mesic<1)
{
mesic=12;
rok--; 
} 
$("#kalendar").load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
}); 
});
});

Html - po načtení stránky:  

<div id="kalendar">
<table>
<th id="kleva">leva</th>
<th>hlava kalendare</th>
<th id="kprava">prava</th>
<td>... telo kalendare
</table>
</div>

Namiesto 

$(this).find("#kleva").click(function(){...});

pouzi

$(this).find("#kleva").live("click", function(){...});

To prve riesenie nefunguje po ajaxovom loade. Nabinduje sa iba na elementy existujuce v DOM v case loadu stranky. Vsetko, co loadnes cez ajax sa do DOM pridava az potom a povodny "click" listener to nepozna.

Preto musis pouzit metodu "live", ktora pocuva aj na novo vytvorenych elementoch.

#2 Ericsko
Moc děkuji za popostčení směrem kupředu. Když jsem to momentálně nahradil, tak mi to nereaguje, ale zkusím zabrousit do dokumentace a něco málo vyzkoušet, pak sem postnu jak jsem pochodil.  

#3 Romca
Moze byt problem aj s verziou jquery.

V dokumentacii urcite najdes viac.

V novsich verziach treba pouzit namiesto "live" metodu "on"

#4 Ericsko

Tez jsem to ted objevil nejak to nemohu skloubit. Kdyby Vas to zajimalo a chtel jste si to odladit tez. Prilozim dalsi soubory. 

./class/kalendar.php

<?php

class Kalendar
{
  var $mesic;
  var $rok;
  
  // konstruktor kalendare
  function Kalendar($mesic, $rok)
  {
    $this->mesic=$mesic;
    $this->rok=$rok;
  }
  
  // funkce vrati pocet dnu
  function pocetDnu()
  {
    return cal_days_in_month(CAL_GREGORIAN, $this->mesic, $this->rok);
  }

  // nastaveni prvniho dne v kalendari
  function prvniDen()
  {
    $anglickeporadi = date("w", mktime(0, 0, 0, $this->mesic, 1, $this->rok));
    return ($anglickeporadi==0) ? 7 : $anglickeporadi;
  }

  // nastaveni bunky v kalendari
  function bunka($radek, $sloupec, $prvniDen, $pocetDnu)
  {
    $dny=Array(1=>"Po", "Út", "St", "Čt", "Pá", "So", "Ne");
    if ($radek==1) return $dny[$sloupec];
    $chcivratit = ($radek-2)*7 + $sloupec - $prvniDen+1;
    if ($chcivratit<1 || $chcivratit>$pocetDnu) return "&nbsp;"; else return $chcivratit;
  }
  
  // vypis kalendare
  function vypisTeloKalendare()
  {
    $mesice=Array(1=>"Leden", "Unor", "Brezen", "Duben", "Kveten", "Cerven", "Cervenec", "Srpen", "Zari", "Rijen", "Listopad", "Prosinec");
    if(!is_numeric($this->mesic))
    {
      echo "Měsíc musí být číslo!";
      return;
    }
    if(!is_numeric($this->rok))
    {
      echo "Rok musí být číslo!";
      return;
    }
    if($this->mesic<1 || $this->mesic>12)
    {
      echo "Měsíc musí být číslo od 1 do 12";
      return;
    }
    if($this->rok<2013 || $this->rok>2050)
    {
      echo "Rok musí být číslo od 2013 do 2050";
      return;
    }
    $pocetDnu = $this->pocetDnu($this->mesic, $this->rok); 
    $prvniDen = $this->prvniDen($this->mesic, $this->rok);
    $radku = date("W", mktime(0, 0, 0, $this->mesic, $pocetDnu-7, $this->rok)) - date("W", mktime(0, 0, 0, $this->mesic, 1+7, $this->rok))+4;
    
    // tvorba kalendare
    echo "<table class=\"kalendar\"><tr>";
    // vypis zahlavi
    echo "<th id=\"kleva\" class=\"lr-caption\">«</th>".
         "<th class=\"caption\" colspan=\"5\">".$mesice[$this->mesic]."&nbsp;".$this->rok."</th>".
         "<th id=\"kprava\" class=\"lr-caption\">»</th></tr>";
    // vypis jednotlivych  bunek v kalendari
    // radek
    for ($radek=1;$radek<=$radku;$radek++)
    {
      echo "<tr>";
      // sloupec
      for($sloupec=1; $sloupec<=7; $sloupec++)
      { 
        // pokud sem na prvnim radku, tak vypisu nazvy dnu v tydnu
        if($radek==1)
          echo "<th>".$this->bunka($radek, $sloupec, $prvniDen, $pocetDnu)."</th>";
        else
        {
          // prazdnym bunkam zmenim pozadi
          if($this->bunka($radek, $sloupec, $prvniDen, $pocetDnu)=="&nbsp;")
            echo "<td class=\"prazdna\">".$this->bunka($radek, $sloupec, $prvniDen, $pocetDnu)."</td>";
          else
          {
            // zvyrazni aktualni datum 
            if($this->rok == date('Y') && $this->mesic == date('n') && $this->bunka($radek, $sloupec, $prvniDen, $pocetDnu) == date('j'))
              echo "<td class=\"dnes\">".$this->bunka($radek, $sloupec, $prvniDen, $pocetDnu)."</td>";
            else 
              // bezne bunky vypis 
              echo "<td>".$this->bunka($radek, $sloupec, $prvniDen, $pocetDnu)."</td>";
          }
        }    
      }
        echo "</tr>";
    }
    echo "</table>";
    }
}

?>

./ajax.js

$(document).ready(function(){

  // nastav aktualni datum
  datum = new Date(); 
  mesic = datum.getMonth() + 1;
  rok = datum.getFullYear();
  
  // nacti kalendar
  $("#kalendar").load("ajax_kalendar.php", function(){
    //klikem na prave posun o mesic vpred 
    $(this).find("#kprava").click(function(){  
      mesic++;
      if(mesic>12)
      {
        mesic=1;
        rok++;      
      }   
      $("#kalendar").load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
    });
    //klikem na leve posun o mesic vzad 
    $(this).find("#kleva").live("click", function(){  
      mesic--;
      if(mesic<1)
      {
        mesic=12;
        rok--;      
      }   
      $(this).load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
    });  
  });
  
  
});

./ajax_kalendar.php

<?php 

include './class/kalendar.php';

// vytvoření kalendáře pomoci ajaxu
if(!isset($_POST['k_mesic']) || !isset($_POST['k_rok']))
  $kalendar= new Kalendar(date("n"), date("Y"));
else
  $kalendar= new Kalendar($_POST['k_mesic'],$_POST['k_rok']);
$kalendar->vypisTeloKalendare();

?>

V html staci div s id="kalendar".

Jinak moc si vazim vasi pomoci toto jsem umistil asi na 3 fora o programovani a jste prvni clovek za pul dne co kde zareagoval :-D. Dekuju moc za popostrceni.

Tak tedy užasny hotovo vse slape jak ma :) moc dekuji Erickocss!! Je to zlaty clovek! :)

reseni vypada takto:

$(document).ready(function(){

  // nastav aktualni datum
  datum = new Date(); 
  mesic = datum.getMonth() + 1;
  rok = datum.getFullYear();
  
  // nacti kalendar
  $("#kalendar").load("ajax_kalendar.php");  
});

// po kliknuti na levou sipku o jeden mesic zpet
$(document).on("click", "#kleva", function() {
  mesic--;
  if(mesic<1)
  {
    mesic=12;
    rok--;      
  }   
  $(this).load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
});

// po kliknuti na pravou sipku o jeden mesic vpred
$(document).on("click", "#kprava", function() {
  mesic++;
  if(mesic>12)
  {
  mesic=1;
  rok++;      
  }   
  $("#kalendar").load("ajax_kalendar.php",{k_mesic: mesic, k_rok: rok});
});  

#6 Romca
Prave som to sem isiel postnut ;)

http://kalendar.ixy.sk

Super :D ja si normalne dam tu praci a registruju se sem abyach vam dal palec nahoru jestli to nekde najdu :) Moc dekuju za pomoc, ja se s tim moril asi 2dny a kdyby sem nenarazil na vas tak se s tim budu morit dal. Velkej palec hore :)

#8 Romca
Tak jsem tu registraci opravdu spachal, mate tam to hodnoceni :-)

#9 Romcak
Neni problem.

Kdykoliv. ;)