Bonjour, je suis nouveau ici, j'espère que vous ne m'en tiendrez pas rigueur !
Je suis en train de bidouiller de l'Ajax dans l'admin de Wordpress 3.2.1 pour la première fois.
J'ai créé une metabox avec un input. La valeur de cet input me sert à faire une requête ajax avec jQuery. Ce qui marche très bien. Mais je veux maintenant pouvoir cliquer sur les résultats de ma requête afin de déclencher une deuxième requête ajax. (en gros, j'ai un input qui me pemet d'obtenir une liste de films, je veux pouvoir cliquer sur un film pour obtenir le détail du film)
Mon bug, c'est que jQuery n'arrive pas a utiliser les éléments qui ont été générés avec Ajax. J'arrive pourtant à les styler en css...
Je vous joins des bouts de code :
Fonction d'affichage en php :
J'ai mis des classes css partout, mais normalement, je veux pouvoir cliquer sur le lien avec la classe .gtkaddmovie
Mon code js :
Tous les éléments sauf ceux générés dans #f_preview réagissent au clic...
Est-ce lié à la méthode jQuery.post ???
merci pour votre avis !
Modifié par dgilz (23 Jan 2012 - 19:47)
Je suis en train de bidouiller de l'Ajax dans l'admin de Wordpress 3.2.1 pour la première fois.
J'ai créé une metabox avec un input. La valeur de cet input me sert à faire une requête ajax avec jQuery. Ce qui marche très bien. Mais je veux maintenant pouvoir cliquer sur les résultats de ma requête afin de déclencher une deuxième requête ajax. (en gros, j'ai un input qui me pemet d'obtenir une liste de films, je veux pouvoir cliquer sur un film pour obtenir le détail du film)
Mon bug, c'est que jQuery n'arrive pas a utiliser les éléments qui ont été générés avec Ajax. J'arrive pourtant à les styler en css...
Je vous joins des bouts de code :
Fonction d'affichage en php :
function gtk_ajax_get_films() {
$alloID = isset($_POST['alloID'])?$_POST['alloID']:null;
if ( $alloID ) {
// Inclure l'API Allociné
require_once "api/api-allocine/include.php";
// Définir les options AlloMovie
$options = array( 'code' => $alloID, );
// Création de l'objet AlloMovie (et exécution de la requête)
$allo = new AlloMovie($options);
/** Affichage des informations AlloMovie **/
?>
<div class="divaddmovie">
<a class="gtkaddmovie" title="<?php echo $allo->d("titre") ?>" id="<?php echo $allo->d("id") ?>">add movie</a>
<img src="<?php echo Allo::image($allo->d("poster"), 30) ?>" alt="<?php echo $allo->d("titre") ?>" style="float:left;margin-right:10px;margin-bottom:0px;" />
<h4 class="copymovie" style="float:left;"><?php echo $allo->d('titre') . " (" . $allo->d('production','année') . ")"; ?></h4>
</div>
<?php //end divaddmovie
}
die;
}
add_action('wp_ajax_get_films', 'gtk_ajax_get_films' );
J'ai mis des classes css partout, mais normalement, je veux pouvoir cliquer sur le lien avec la classe .gtkaddmovie
Mon code js :
jQuery(document).ready(function($) {
jQuery("#filmid_input").keyup( function() {
jQuery("#gtkGetFilmLoader").show();
var thisfilmid = jQuery("#filmid_input").val();
//POST the data and append the results to the results div
jQuery.post(ajaxurl, {
action: 'get_films',
alloID: thisfilmid,
}, function(response) {
jQuery("#f_preview").html(response);
jQuery("#gtkGetFilmLoader").fadeOut();
});
}).keyup();
// Fonctionne sur #f_preview (le conteneur) mais pas les éléments
jQuery(".gtkaddmovie").click( function() {
alert('Handler for .click() called.');
});
});
Tous les éléments sauf ceux générés dans #f_preview réagissent au clic...
Est-ce lié à la méthode jQuery.post ???
merci pour votre avis !
Modifié par dgilz (23 Jan 2012 - 19:47)