AJAX .load("#kalendar") – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Romca
~ Anonymní uživatel
12 příspěvků
18. 12. 2013   #1
-
0
-

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>
Nahlásit jako SPAM
IP: 88.100.53.–
Reklama
Reklama
Ericsko+3
Stálý člen
18. 12. 2013   #2
-
0
-

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.

Nahlásit jako SPAM
IP: 88.212.34.–
Romca
~ Anonymní uživatel
12 příspěvků
18. 12. 2013   #3
-
0
-

#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.  

Nahlásit jako SPAM
IP: 88.100.53.–
Ericsko+3
Stálý člen
18. 12. 2013   #4
-
0
-

#3 Romca
Moze byt problem aj s verziou jquery.

V dokumentacii urcite najdes viac.

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

Nahlásit jako SPAM
IP: 88.212.34.–
Romca
~ Anonymní uživatel
12 příspěvků
18. 12. 2013   #5
-
0
-

#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.

Nahlásit jako SPAM
IP: 88.100.53.–
Romca
~ Anonymní uživatel
12 příspěvků
18. 12. 2013   #6
-
+1
-
Zajímavé

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});
});  
Nahlásit jako SPAM
IP: 88.100.53.–
Ericsko+3
Stálý člen
18. 12. 2013   #7
-
+1
-
Zajímavé
Nahlásit jako SPAM
IP: 88.212.34.–
Romca
~ Anonymní uživatel
12 příspěvků
18. 12. 2013   #8
-
+2
-
Zajímavé

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 :)

Nahlásit jako SPAM
IP: 88.100.53.–
Romcak0
Duch
18. 12. 2013   #9
-
0
-

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

Nahlásit jako SPAM
IP: 88.100.53.–
Ericsko+3
Stálý člen
18. 12. 2013   #10
-
0
-

#9 Romcak
Neni problem.

Kdykoliv. ;)

Nahlásit jako SPAM
IP: 88.212.34.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 22 hostů

Podobná vlákna

Kalendář — založil don_Dominique

Kalendár — založil Tomas

Kalendar — založil don_Dominique

EF 5.0 Metoda LOAD vs. WHERE — založil VladislavK

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý