web-dev-qa-db-fra.com

Cliquez sur charge le modèle via ajax

J'essaie de charger un modèle via ajax si l'utilisateur clique sur un bouton. C'est le code que j'utilise:

Sur functions.php:

function phantom_scripts() {
  global $child_dir;

  /* Ajax Requests */
  wp_enqueue_script( 'ajax-stuff', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'phantom_scripts' );


function portfolio_ajax() {
  include( 'templates/cards.php' );
  die();
}
add_action('wp_ajax_nopriv_portfolio_ajax', 'portfolio_ajax');
add_action('wp_ajax_portfolio_ajax', 'portfolio_ajax');

wp_localize_script( 'ajax-stuff', 'ajaxStuff', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Sur ajax.js:

(function($) {
    $('#load-cards').click(function() {
        alert();
            $.ajax({
                url: ajaxurl,
                data: {
                    action: 'portfolio_ajax'
                },
                success: function(data) {
                    $('#cards-container').append(data);
                },

                error: function(MLHttpRequest, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });
})(jQuery);

HTML:

<a href="javascript:void(0)" id="load-cards">Load cards</a>

Pour le moment, la console ne montre aucune erreur, mais ne charge pas le contenu du fichier templates/cards.php. Une idée de ce que je manque?

phpfunctionsjqueryajaxjavascript
2
wpuser

Donc, vous utilisez wp_localize_script pour injecter l’URL ajax. Mais vous n'avez pas utilisé le descripteur var localisé pour accéder à cette valeur. Essaye ça:

/* ... */
$.ajax({
    url: ajaxStuff.ajaxurl, // NOTE use of 'ajaxStuff' object
/* ... */
1
Dougal Campbell

Tout d’abord, vous devez faire ce que Dougal a dit pour obtenir leajax-urlright. Je voudrais également spécifier ledataType. dataType est le type de données que vous attendez du serveur, vous pouvez en lire plus à ce sujet ici.

Et j'utiliserais get_template_part de wordpress pour obtenir le modèle.

0
Lasse M. Tvedt