Category Archives: jQuery

Tutorial JSON PHP

In aceste momente vom juca cu transformari JSON in PHP. JSON este o colectie de obiecte . In PHP putem transforma un array in JSON si vice-versa sa transformam un obiect JSON in array .

Fie un array in php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 
$job_arr = array (
  array (
    'title' => 'Programator PHP',
    'description' => 'Descriere post Programator PHP'
  ),
  array (
    'title' => 'Programator JS',
    'description' => 'Descriere post Programator JS'
  ),
  array (
    'title' => 'Programator .NET',
    'description' => 'Descriere post Programator NET'
  )
);

Transformam array-ul din PHP in JSON folosind functia json_encode($param_arr):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
  // initializam variabila $job_arr;
 
  $job_json = json_encode($job_arr); // transformam in JSON si salvam in $job_json. Rezultatul va fi de tip string
 
  echo $job_json;  // afisam JSON-ul.
 
  // pentru a decoda  
  $job_arr = json_decode($job_json);  // am transformat JSON-ul in array 
 
  // afisam continutul array-ului $job_arr
 
  print_r($job_arr); 
?>

JSON-ul este folosit pentru comunicare cu JAVASCRIPT. De exemplu avem un request AJAX si rezultatul actiunii ( cod PHP ) va fi un JSON. Acest obiect se va parsa in Javascript si se va trata dupa cerinte.

Tips and Tricks

Cea mai simpla modalitate de a parsa un JSON este utilizarea librariei JQuery. Aici se poate proceda in felul urmator:

1
var my_obj = jQuery.parseJSON(json_varible);

Valideaza adresa de email in Javascript

Cateodata e bine sa validezi anumite campuri din formular inainte sa trimiti datele spre server, de exemplu o adresa de email . Pentru a citi valoare campului email am folosit jQuery ( este mai putin de scris ).

Fie urmatorul cod HTML:

// cream functia de validare
function validateEmailAddress() {

var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
var email = $(‘#email’).val();
if(reg.test(address) == false) {

alert(‘Invalid Email Address’);
return false;
}
}

Nu uita sa verifici adresa de email pe partea serverului, pentru ca unii s-ar putea sa aiba javascriptul dezactivat si atunci nu se va apela functia de validare.

Ascunde continutului unei etichete HTML

Salut,

Folosind jQuery avem posibilitatea de a ascunde elemente din pagina html si sa le
afisam din nou.

ex:

Acest div va disparea dupa ce apesi butonul ascunde

Din cate se observa nu este ceva foarte complicat. Iar pentru a ascunde un element cu efecte putem folosi urmatoarele evenimente:
onclick=’jQuery(“#textul-meu”).hide(“slow”)’;
sau
onclick=’jQuery(“#textul-meu”).hide(“fast”)’;

Si nu inainte de a inchide acest exemplu, cum afisam din nou continutul elementului HTML cu un efect :

Stergerea etichetelor div cu o clasa specifica

Saptamana trecuta m-am lovit de aceasta tema. Este data o pagina html ce contine:

red
green
red
green
red

Obiectul meu este sa sterg toate divurile din html avand clasa ‘red’ ( div class=’red’ ) .

Si pentru asta am avut de inserat urmatorul cod javascript la sfarsitul paginii:

$(‘div’).remove(‘.red’);

si mi-a rezultat urmatorul cod html:

green
green

———————————————————————-
Bineinteles din acest javascript se poate crea o functie si asocia ca eveniment pentru un link

ex functia javascript:

function delRedDivs() {
$(‘div’).remove(‘.red’);
}

+ inseram urmatorul link in html:

Sterge divurile avand clasa ‘red’

Dupa ce se va da clic pe link va rezulta html-ul ‘curatat’.

ATENTIE! Pentru a folosi jquery trebuie inclusa jquery.js.

Cum sa luam continutul unei etichete div

Salut,

Sper ca mai tineti minte pentru a folosi jquery trebuie inclusa jquery.js in html:

——————————————————————————–
Este data urmatorul fisier html:

Textul din div.

Pentru a extrage continutul avem nevoie de urmatorul script:

alert($(‘div.my-text’).html());

Pentru a transforma in evenimentul unui link vom avea:

function arataContinut(){
alert($(‘div.my-text’).html());
}

Arata continutul divului

Dupa ce se va da clic pe acest link va aparea mesajul:
‘Textul din div.’

Bafta!