Add <script>...</script> content from database on page

Wappler General
1

I have podcast player content saved in database table and would like to show them on the page (php). Is there a way to do this in the meantime dierectly with server connect and not classic php code?

The content looks like this:

<script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="embed?context=external"></script>

2

Hi.
On static success event of the SC, you can inject the string as JS code on the page.

3

I currently have a dynamic swiper with cards and each of the card represents “a podcast”. How would you bind a static success event of the SC here?

4

Please explain your setup a bit more.

5

I’ve got the podcasts saved in a database with the player code in one of the fields. On the page I have a dynamic swiper with cards and button which open a modal with filtered podcast detail. There I’d like to show the content of the database field, the . But Wappler can’t handle it this way:

Bildschirmfoto-2022-01-07-um-09.18.45
Bildschirmfoto-2022-01-07-um-09.18.45803Ă—522 48.4 KB

Wappler just shows the text and can’t execute it. Neither using dmx-html.

I just wonder if there is a solution in the meantime for this.

6

Is it just the data-configuration that changes each time? Could you just update that using a JS function?

7

Hmmm, yes. Only the configuration changes … that would be an idea, or just save the configuration data. Thanks, I’ll give it a try … :slight_smile:

9

So on modal show static event, you can call a JS function to remove any existing code in modal body, and inject the script code as stored in the DB.

You can fetch the script code by storing the index of slide in a dmx variable, and using that with dmx parse.

10

Thanks sid. Let’s see if Patrick can improve the Wappler implementation for this kind of dynamic data.

11

Does it work when you do it outside the swiper? The dmx-html should just work fine to inject a script tag, haven’t tested it within a swiper, will do some testing when I have some time.

12

I’ve tried to add it in a modal and it doesn’t work.

13

Seems that browsers do not execute javascript that is inserted with innerHTML.

Use the following script:

dmx.Attribute('html2', 'mounted', function(node, attr) {
    this.$addBinding(attr.value, function(value) {
        if (value != null) {
            node.innerHTML = value;

            try {
                var scripts = node.querySelectorAll('script[type="text/javascript"],script:not([type])');
    
                dmx.array(scripts).forEach(function(script) {
                    try {
                        var newScript = document.createElement('script');
                        newScript.type = 'text/javascript';
                        if (script.src) newScript.src = script.src;
                        if (script.innerHTML) newScript.innerHTML = script.innerHTML;
                        script.onerror = function() {
                            console.error('ERROR', arguments);
                        }
                        script.parentNode.replaceChild(newScript, script);
                    } catch (e) {
                        console.error('Error executing script ' + script.src, e);
                    }
                });
            } catch (e) {
                console.error('An error occurred while trying to execute scripts', e);
            }
        } else {
            node.innerHTML = '';
        }
    });
});

Change dmx-html to dmx-html2.

14

Thanks Patrick. But it doesn’t seem to work. Maybe I can send you the ftp data by pm and you can have a look?

15

Sure, send me the info in a pm and I will have a look at it.

1 Like
16

Hey, you solved the problem? I need help! My problem is equal.

17

Hi bsg, We solved it (on a php page) by using php code:

<?php echo($rsPodcast->getColumnVal("PodcastCode")); ?>
18

How to solve on nodejs?