Jquery .html() method et JSON

La method .html() ne rajoute pas tous le contenue renvoyer par JSON

a marqué ce sujet comme résolu.

Côté serveur j’ai du HTML générer par du PHP et stocker dans un objet JSON avec <json_encode()>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ob_start();
        if ($my_query->have_posts()) :
            while ($my_query->have_posts()) : $my_query->the_post();

                            get_template_part( 'template-parts/content', 'test' );
            endwhile;
                        endif;

    $response['content'] = ob_get_clean();

    die(json_encode(utf8_encode($response)));
    }

Voici à quoi ressemble le html généré,(wordpress posts):

1
2
3
4
5
6
7
   <article id="post-4996" class="post-4996 post type-post status-publish format-standard hentry category-news tag-dog">
      <header class="entry-header">
                TEST
        <a href="http://example.com/test/news/4996" rel="bookmark">Mon post</a> 
        <div>TAGS:<a href="http://example.com/tag/dog" rel="tag">dog</a></div>
       </header>
    </article>

Donc, avec Json_encode(), voici le json que je récupère (valide selon jsonlint.com)

1
2
3
    {
     "content":"\n<article id=\"post-4996\" class=\"post-4996 type-post status-publish format-standard hentry category-news tag-dog\">\n\t<header class=\"entry-header\">\n\t\t\t\n\t\tTEST\n\t\t\t\t<a href=\"http:\/\/example.com\/test\/news\/4996\" rel=\"bookmark\">Mon post<\/a><div>TAGS:<a href=\"http:\/\/example.com\/tag\/dog\" rel=\"tag\">dog<\/a><\/div>\n\t\t\t<\/header><\/article>\n"
    }

Et voici le mon script Jquery/JS pour récupérer mon JSON et mettre à jour ma page web en AJAX

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    var $container    = $('#main');
    var $pagePosts    = $container.find('article');
    var $myContainer  = $('.my_container');

           $pagePosts.wrapAll("<span class='my_container'></span>");

    function get_posts($params){

         jQuery.ajax({
               url: mdu.ajax_url,
                    data: {
                           action: 'my_get_posts',
                           nonce: mdu.nonce,
                           params: $params
                           },
                           type: 'POST',
                           dataType:'json',
                         success: function(data, textStatus, XMLHttpRequest {
                                 console.log('Success  ', data.content);
                                 $pagePosts.empty();
                                 $myContainer.html(data.content);
                                 }
                        });
                     }
    $("a[rel='tag']").click(function(tag){
                        event.preventDefault();
                        clickTag = $(tag.target).text();
                        $params = {'tag' : clickTag,};

       get_posts($params);
     });

`

J’utilise donc la method .html() pour mettre à jour ma page web mais il ne rajoute que les balises <article> et non le contenue de ces balises (<header>,<a>,<div>,…), voici donc le résultat que j’ai sur ma page web,

1
2
<article id="post-4996" class="post-4996 post type-post status-publish format-standard hentry category-news tag-dog">
    </article>

Il me semble que la method ".html()" soit le problème mais je ne parviens pas à comprends d’ou cela peut venir est-ce une limitation de JQuery ou un contenue html trop important, il y a t- il trop de balise ?

Merci pour toute idée proposé.

+0 -0

oui c’est ce que j’appel (probablement de façon érroné) «le json que je récupére (valide selon jsonlint.com)» et en fait après du console log dans tous les sens je viens de me rendre compte que c’est un déclaration de variable au mauvais endroit:

Ceci ne fonctionne pas :

1
2
3
4
5
6
7
    var $container    = $('#main');
    var $pagePosts    = $container.find('article');
    var $myContainer  = $('.my_container');

       $pagePosts.wrapAll("<span class='my_container'></span>");

`

mais ceci fonctionne:

1
2
3
4
5
6
    var $container    = $('#main');
    var $pagePosts    = $container.find('article');

       $pagePosts.wrapAll("<span class='my_container'></span>");

    var $myContainer  = $('.my_container');

La bonne vielle erreur de newbie…

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte