Curs Javascript

Pentru a inregistra cu jQuery un eveniment JavaScript la elemente HTML, se foloseste aceasta sintaxa:
$('element').nume_eveniment(function() {
  // cod ce va fi executat cand "nume_eveniment" e declansat
})

De exemplu, urmatorul cod afiseaza o fereastra alert cand se apasa clic pe un link cu class="cls".
<script type="text/javascript"><!--
$(document).ready(function() {
  // la clic pe link cu class="cls", afiseaza alert cu textul link-ului
  $('a.cls').click(function() {
    alert($(this).text())
  });
});
--></script>
<a href="https://marplo.net" title="Cursuri Gratuite" class="cls">marplo.net</a>

Dar daca link-ul e intr-un cod inclus mai tarziu in pagina prin ajax, scriptul de mai sus nu va functiona si pentru acel link deoarece cand codul jQuery este executat (cand pagina e incarcata), acel link nu se afla in pagina.
Dar solutia e simpla, astfel, pentru a inregistra evenimente (click, mouseover, submit, ...) la elemente HTML adaugate cu ajax, codul ce inregistreaza acel eveniment trebuie executat si dupa ce raspunsul ajax e primit. Pt. a face acest lucru, doar scrieti acel cod jQuery intr-o functie, apoi apelati acea functie in jQuery.ready(), si in functia ajax, dupa ce raspunsul de la server e primit si adaugat in pagina.
- Exemplu (vedeti comentariile din cod):
<script type="text/javascript"><!--
// seteaza o functie ca sa inregistreze evenimentul click la "a.cls"
function clickAcls() {
  // la clic pe un link cu class="cls" afiseaza alert cu textul link-ului
  $('a.cls').click(function() {
    alert($(this).text())
  });
}

$(document).ready(function() {
  clickAcls();       // acceseaza functia ca sa inregistreze eveniment click pt "a.cls"

  // cand datele din formularul "#frm" sunt transmise
  $('#frm').submit(function() {
    // aici se pot pelua datele din formular, si se definesc datele_de_trimis

    // seteaza metoda ajax() si include raspunsul in tag-ul HTML cu id="resp"
    $.ajax({
      type: 'post',
      data: 'datele_de_trimis',
      url: 'script.php',
      error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },
      success: function(response) {
        $('#resp').html(response);

        // acceseaza functia ca sa inregistreze eveniment click pt "a.cls" adaugat in raspuns
        clickAcls();
      }
    });

    return false;      // ca sa nu deschida pagina ca se trimite formularul
  });
});
--></script>

• Aceasta metoda poate fi aplicata pt. toate tipurile de evenimente.
Iata inca un exemplu. Se inregistreaza "submit" pentru toate formularele, ca sa trimita datele din formular prin ajax, apoi include raspunsul in tag-ul cu id="resp". Evenimentul "submit" va fi inregistrat inclusiv pt. formulare adaugate cu ajax.
<script type="text/javascript"><!--
// Executa cererea Ajax
function ajaxSend(file, datele_de_trimis, resp) {
  // defineste si executa jQuery Ajax
  $.ajax({
    type: 'post',
    url: file,
    data: datele_de_trimis,
    error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },     // alert mesaj in caz de eroare
    success: function(response) {
      resp.html(response);

      // apeleaza submitForm() ca sa inregistreze submit la formulare din raspunsul ajax
      submitForm();
    }
  });
  return false;
}

// trimite formularul cu ajaxSend()
function submitForm() {
  // cand sunt transmise date dintr-un formular
  $('form').submit(function() {
    // aici se pot pelua datele din formular, si se definesc datele_de_trimis la server

    ajaxSend('script.php', 'datele_de_trimis', $('#resp'));        // acceseaza functia pt Ajax

    return false;      // ca sa nu deschida pagina ca se trimite formularul
  });
}

$(document).ready(function() {
  submitForm();       // apeleaza functia ca sa inregistreze eveniment submit
});
--></script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Inregistrare evenimente la elemente incluse cu jQuery ajax

Last accessed pages

  1. Lectia 86, Recapitulare 71-72 (62)
  2. Genul substantivelor 1 (9677)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (70652)
  4. Limba spaniola curs online incepatori si avansati (31357)
  5. Cursuri Franceza, Germana, Italiana si Rusa (8303)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (194)
  2. Coduri pt culori (103)
  3. Gramatica limbii engleze - Prezentare Generala (97)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (85)
  5. Cursuri limba engleza gratuite si lectii online (76)