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 e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
Inregistrare evenimente la elemente incluse cu jQuery ajax

Last accessed pages

  1. Nume de jucarii si indicarea locatiei (365)
  2. Lectii audio-video de limba engleza (15457)
  3. Titluri, Paragrafe, Un nou rand, Linie orizontala (19609)
  4. Articole - Exercitii si teste engleza incepatori (4474)
  5. Lucrul cu mai multe cadre (2490)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5365)
  2. Curs HTML gratuit Tutoriale HTML5 (4411)
  3. Curs si Tutoriale JavaScript (3776)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3698)
  5. Curs CSS Online Tutoriale CSS3 (3651)