Segui skydiamond.org anche su Twitter
 
You are here: Sky ForumWebSviluppo webJquery load
: [1]
Jquery load
Jquery load
« : September 25, 2009, 04:33:26 pm »

Ciao a tutti,

da un pò di tempo mi sono messo a studiare un pò di librerie javascritp per il web e tra le tante, mi sono soffermato sopratutto su Jquery che sembra  essere la più semplice da utilizzare e permette l'applicazione di effetti molto accattivanti con pochi sforzi.

Mi sono imbattuto, tuttavia, in un problema  con i dati caricati attraverso la funzione load() (che magari sarà di semplice risoluzione per voi... ma io sono un niubbone!!).

Quello che voglio realizzare è una pagina delle news che carichi il contenuto di ogni singola news in modo asincrono facendo una iniezione di codice sull'html della pagina stessa.

Ho quindi creato la mia paginetta news_list.html che sull'evento ready della pagina richiama tramite load jquery la pagina php get_list.php:
Code: [Select]
<html>
<head>
<title>
News
</title>
<script language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){

$("#list").load("get_list.php");
                        $(".link").click(function(){
                                       $("#content").get("get_news.php",{new_id:$(this).attr("id")});

                        });



});
</script>
</head>
<body>
<div id="list">
</div>
<div id="content"></div>
</body>
</html>

in pratica la load inserisce il risultato del'esecuzione di get_list.php nel div con id list.
Adesso andiamo a dare un'occhiata alla get_list.php:
Code: [Select]
<?php
include 
'dbconnect.php';
$select_query="SELECT * FROM NEWS";
$result=mysql_query($select_query,$con);
echo "<ul>";
while($row=mysql_fetch_array($result)){
echo "<li><p>".$row['TITLE']."</p><p>".$row['SUBTITLE']."</p><a  class=\"link\" id=\"".$row['NEW_ID']."\">vai all'articolo --></a></li>";
}
echo "</ul>";
mysql_close($con);

?>


come vedete questa pagina stampa tutte le news trovate nel db (successivamente vedrò di renderla parametrica in modo da visualizzare solamente un certo numero di news per volta.)
Ad ogni elemento della lista associo un link che al click dovrebbe scatenare una callback function che caricherà il contenuto della news (preso tramite get_news.php) nel div con id content (una load on in questo caso una get).

Qui il codice di get_news.php
Code: [Select]
<?php
include 
'dbconnect.php';
$select_query="SELECT * FROM NEWS WHERE ID=".$_GET['new_id'];
$result=mysql_query($select_query,$con);

while($row=mysql_fetch_array){
echo "<p>TITLE:<dd>".$row['TITLE']."</p>";
echo "<p>SUBTITLE:<dd>".$row['SUBTITLE']."</p>";
echo "<p>COONTENT:<br>".$row['CONTENT'].."</p>";
}
mysql_close($con);
?>



Primo osservazione:Neanche un errore.
Secondo osservazione: non succede una ceppa!

Ho diverse domande da farvi:
1.Come si fa a passare dei parametri alle funzioni jquery (tipo load o get) da inviare al server?
2.L'html che viene caricato tramite load ... è poi visibile a livello di pagina come qualsiasi altra cosa .. ovvero .. posso ad esempio fare una getElementById su un elemento che è stato inserito successivamente al caricamento della pagina?


Aspetto suggerimenti


 
Re: Jquery load
« #1 : September 25, 2009, 05:11:05 pm »

(*) Primo osservazione:Neanche un errore.
(**) Secondo osservazione: non succede una ceppa!

Ho diverse domande da farvi:
1.Come si fa a passare dei parametri alle funzioni jquery (tipo load o get) da inviare al server?
2.L'html che viene caricato tramite load ... è poi visibile a livello di pagina come qualsiasi altra cosa .. ovvero .. posso ad esempio fare una getElementById su un elemento che è stato inserito successivamente al caricamento della pagina?


Aspetto suggerimenti


 

(*) Controlla con Firebug che tutto vada liscio.
(**) Esegui il codice nei singoli pezzi e poi usa il load.

1) Usa il reference di jQuery http://skydiamond.110mb.com/doc/visualjquery/index.html per il load.
Quote from:  Parametri load
    *  url (String): The URL of the HTML file to load.
    * params (Object): (optional) A set of key/value pairs that will be sent as data to the server.
    * callback (Function): (optional) A function to be executed whenever the data is loaded (parameters: responseText, status and response itself).

Esempio di load con parametri:

Code: (javascript) [Select]
$("#feeds").load("feeds.html",
  {limit: 25},
  function() { alert("The last 25 entries in the feed have been loaded"); }
);

2) Dopo il load dovrebbe essere accessibile se non ricordo male. Comunque prima di tutto pensa a far funzionare il load. Per far eseguire la funzione quando Ajax è stato eseguito metti la funzione che hai creato dentro $().ajaxComplete();
« : September 25, 2009, 05:15:30 pm skydiamond »
Re: Jquery load
« #2 : September 25, 2009, 06:09:04 pm »

Non so se può esserti di aiuto ma questo articolo tratta abbastanza esaurientemente l'argomento:

http://jqueryfordesigners.com/play-school-easy-ajax-load/


Dovrebbe esserci qualcosa in italiano anche sul mio blog, ma sicuramente questo è più completo!
: [1]
You are here: Sky ForumWebSviluppo webJquery load
: