ajax

Mattepuffo's logo
Creare un array in Javascript da php

Creare un array in Javascript da php

A volte può capitare di dover creare un array in Javascript prendendo i dati da PHP.

Nel mio caso eseguo una query e i dati che prendo da PHP li devo spezzare e metterli dentro a delle input text.

La parte in PHP sarà una cosa del genere:

<?php

foreach ($objCerca->getCliente($_GET['id']) as $var) {
    echo $var['an_codice'] . ',', $var['an_ragsoc'] . ',', $var['an_piva'] . ',', $var['an_cf'];
}

La funzione getCliente() si occupa di eseguire la query (non mi soffermo su questo punto) e di inviare i dati separati da virgola, come li vuole JS per gli array.

Mattepuffo's logo
jQuery, AJAX e CodeIgniter

jQuery, AJAX e CodeIgniter

Oggi vedremo come è possibile sfruttare AJAX attraverso jQuery in applicazioni scritte con il framework CodeIgniter.

Il primo step è sempre quello di includere la libreria jQuery nell'head della pagina:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Dopo di che nella view ho un link, che al click attiva una funzione Javascript per la chiamata AJAX:

<a href="javascript:dtlArticolo('<?php echo $var->articolo_codice; ?>');" ><?php echo $var->articolo_codice; ?></a>

<script type="text/javascript">
    function dtlArticolo(articolo) {
        $.ajax({
            url: "<?php echo base_url('ajax/getdtlarticolo/'); ?>/" + articolo,
            type: 'POST',
            dataType: 'html',
            success: function(response) {
                $("#dtl_articolo").html(response);
            },
            error: function() {
                $("#dtl_articolo").html('ERRORE');
            }
        });
    }
</script>

In genere in CI si usano la funzione anchor() per creare link, e anche io in effetti la uso sempre.

Questo è l'unico caso in cui non la uso perchè trovo più intuitivo fare alla maniera "classica" in questo specifico caso.

Come vedete la funzione l'ho messa nella view, e questo perchè l'url glielo passo attraverso PHP e la funzione di CI base_url().

Ricordate che di default CI non usa i classici parametri GET, e quindi in questo non avremo potuto costruire l'url come siamo abiautati a fare:

url: 'pagina.php',

data: 'id=3&cm=7'

Non so se mi sono spiegato, ma penso di si visto che prima di arrivare a usare AJAX avrete di sicuro studiato un pò il framework e capito come funzionano i link e i parametri.

Mattepuffo's logo
Asp.NET AJAX

Asp.NET AJAX

Il .NET Framework ha già tutto incluso per usare AJAX senza ricorrere a Javascript.

Di default anche il Web.config è configurato per usarlo; in caso potrete usarlo per cambiare alcune impostazioni.

Vediamo quindi come usare AJAX nelle nostre pagine aspx.

Prima di tutto dobbiamo incorporare un controllo ScriptManager; io consiglio di metterlo nella Master Page in modo da averlo disponibile per qualsiasi pagina:

<asp:ScriptManager ID="scriptManagerDefault" runat="server" />

Tutto qua.

Mattepuffo's logo
Usare AJAX con jQuery

Usare AJAX con jQuery

Se avete letto questo articolo su AJAX avete visto come sia possibile creare codice cross-borwser e in parte riutilizzabile per effettuare chiamate AJAX attraverso Javascript e PHP.

Se vedete però il codice scritto non è proprio poco per delle semplici chiamate.

Se già utilizzate jQuery per altre cose vale di sicuro la pena usare le funzioni AJAX integrate.

Questo soprattutto perchè possiamo scrivere codice cross-browser con molte meno righe.

E non è poco....

Una descrizione delle API AJAX di jQuery le trovate qua.

Le opzioni più utili e importanti sono:

  • type -> indica il tipo di richiesta (GET o POST)
  • dataType -> il tipo di risposta che ci aspettiamo (HTML, XML, JSON.....)
  • url -> del file lato server da interrogare
  • data -> eventuali valori da passare in querystring
  • success -> cosa fare in caso di richiesta eseguita con successo

Io ho messo su una funzione che poi richiamo tramite link:

<a href="javascript:creaStorico('2012-02-20 14:22:17')">2012-02-20 14:22:17</a>

Richiamo la funzione creaStorico passandogli una data.

Mattepuffo's logo
Introduzione ad AJAX

Introduzione ad AJAX

Mi sto dedicando un pò più approfindatemente ad AJAX in quanto mi servirà per un lavoro che sto facendo per un'azienda.

Qui vediamo un semplce script facilmente realizzabile e soprattutto multi-borwser.

Prima di tutto create un file js; io l'ho chiamato ajax.js (che fantasia eh?).

Includetelo nell'head della pagina a cominciamo a scrivere.

Il file si comporrà di varie funzioni.

var xmlHttpObj = createXmlHtttpRequest();

function createXmlHtttpRequest() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
var XmlHttpVersions = new Array(
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActivexObject(XmlHttpVersions[i]);
} catch(e) {}
}
}
if(!xmlHttp) {
alert("Errore durante la creazione dell'oggetto XMLHttpRequest");
} else {
return xmlHttp;
}
}

Prima di tutto memoriziamo in una variabile, visibile a tutto il file, un oggetto di tipo XMLHttpRequest o ActivexObject.

Nella funzione sottostante creiamo appunto l'oggetto a seconda che sia un browser Internet Explorer (ActivexObject) o no (XMLHttpRequest).

Mattepuffo's logo
Integrare CKEditor e CKFinder

Integrare CKEditor e CKFinder

CKEditor e CKFinder sono due tools scritti in AJAX molto usati nei blog.

Il primo è un editor HTML che viene usato per inserire posto in un db usando un'interfaccia user frindly.

Il secondo invece è un file manager.

Con CKEditor è possibile anche inserire immaggini dentro a un articolo; il problema però è che di default la salva dentro al db, e non è una buona cosa.

La cosa migliore è integrarlo con CKFinder per salvare l'immagine su disco e poi richiamarla tramite codice HTML.

Per prima cosa scompattate i due archivi in una directory; la situazione dovrebbe essere tipo questa:

/root_del_sito/lib/ckfinder

/root_del_sito/lib/ckeditor

Poi richiamiamo le librerie nell'head della pagina:

<script type="text/javascript" src="lib/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="lib/ckfinder/ckfinder.js"></script>

Il passo seguente è installare CKEditor e richiamare CKFinder: