Do-Shortcode in Ajax

szedlick
(@szedlick)

4 years, 11 months ago

Hi Dario,
I’m trying to execute the shortcode
[yasr_visitor_votes postid=”‘.$id.'” readonly=”yes”]
with an ajax call and append it to an div. The ajax call works fine and other pluigns shortcodes work also fine. But none of the yasr shortcodes are executed or displayed this way. Do you eventually know what could possibly cause the problem?
Thanks in advance.
Kind regards
Sven

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Contributor dudo
(@dudo)

4 years, 11 months ago

Hi Sven!

Do you have a link that I can test?
I need to know how the ajax call is done (xhr, fetch, etc.)

Best,
Dario
Thread Starter szedlick
(@szedlick)

4 years, 11 months ago
Hi Dario,
I develope locally, so I don’t have a Link for you, but here is how I do the ajax:
```
$.ajax({
                url: test_ajax_obj.ajaxurl,
                type: 'POST',
                data: {
                    'action': 'test_ajax_request',
                    'filter' : filters,
                    'nonce' : test_ajax_obj.nonce
                },
                success:function(data) {
                    $('.test-grid-container').empty();
                    $('.test-grid-container').append(data)
                },
                error: function(errorThrown){
                    console.log(errorThrown);
                }
            });
```
Within the called function I do a query and want to display the rating for the queried posts…
The return of the function is a string with html code that contains all elements I queried with the filters as meta_query…
- This reply was modified 4 years, 11 months ago by szedlick.
Plugin Contributor dudo
(@dudo)

4 years, 11 months ago
I’ve been able to make it work by adding this code (testes with 2 “infinite scroll” plugins)
```
jQuery(document).ajaxComplete(function( event, request, settings ) {
    //Works only on posts
    if (settings.type === 'POST') {
        let data = settings.data;  //get settings.data
        let urlParams = new URLSearchParams(data);
        let action = urlParams.get('action'); //action name

        //if action name === test_ajax_request
        if (action === 'test_ajax_request') {
            //get element by class name on ajax response body
            let starsClass = event.target.body.getElementsByClassName('yasr-rater-stars-vv');
            if (starsClass.length > 0) {
                //run yasr
                yasrVisitorVotesFront(starsClass);
            }
        }
    }
});
```
You can try to download the compiled version here https://gist.github.com/Dudo1985/1231f7bcfa26c48eed5b9bde61a16530 and upload it into wp-content/plugins/yet-another-stars-rating/includes/js/yasr-front.js

essentially, you’ve to pass the array returned from getElementByClassName that must be run in the ajax response.

If you need to compile, this is the config for webpack https://gist.github.com/Dudo1985/4348428e141c46013bd3218dbc602b04 and this is the package.json https://gist.github.com/Dudo1985/deef94eb5f6424cb26df55bbbbfc14d5

Hope this helps!
- This reply was modified 4 years, 11 months ago by dudo.
Thread Starter szedlick
(@szedlick)

4 years, 11 months ago

Hi Dario,
thank you so much for putting so much effort in my problem. I don’t quite know if we talk about the same specific problem. I do an ajax call to call an php funtction. In this php function I do the query for posts and the do_shortcode(‘[yasr …….]’) function. As return I deliver a string with the complete ‘html’ to the js, where I append the string to the grid container…
I don’t know either if it’s relevant that I query a CPT…?

Kind regards
Sven

Plugin Contributor dudo
(@dudo)

4 years, 11 months ago

Yes, it is the same problem 🙂

After an ajax call, stars are not printed, and you need to run yasrVisitorVotesFront again.
That is what that code do.

Did you tried to upload this version of yasr-front https://gist.github.com/Dudo1985/1231f7bcfa26c48eed5b9bde61a16530 ?
(please note that this will work only if action name is test_ajax_request)

Thread Starter szedlick
(@szedlick)

4 years, 11 months ago

Hi Dario,
the thing is, that my response doesn’t contain a container with ‘yasr-rater-stars-vv’-class, because the yasr shortcode I try to process within the called php action just isn’t delivering something. It’s exactly the same shortcode I use on another template but it just doesn’t process in that function. I do the call directly in the functions.php…
Any idea?

Plugin Contributor dudo
(@dudo)

4 years, 11 months ago

Ah, now I see, the shortcode doesn’t return data at all…

First, I see some strange characters in your strings, be sure to always use this symbol instead of this .

you can try this:

echo do_shortcode('[yasr_visitor_votes postid="$id" readonly="yes"]')

Thread Starter szedlick
(@szedlick)

4 years, 11 months ago

Exactly, this is the problem 😉
The shortcode I use in that function is 100% correct, I copied and pasted it to antother template file an it worked fine.
Now I call it with ajax in a function in my functions.php and there it doesn’t work.

Plugin Contributor dudo
(@dudo)

4 years, 11 months ago

Now I see.
Unfortunately it is hard to say without working on it…

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Do-Shortcode in Ajax’ is closed to new replies.