Async behaviour, refreshing the DOM

[misterpo]

Hi,

I am trying to define 2 shortcode classes, the second one uses content generated by the first one.
I guess I have to refresh the DOM after the first class has been called, but I can't get it to work.

Here is my code 👍

$('#content-wrapper').shortcode({

   accordions: function(done) {
   //var $html = $($('this').html());
   var $text = "<div class='accordion'><ul class='resp-tabs-list'></ul><div class='resp-tabs-container'></div>";

   /* setTimeout is used here to simulate an async event */
    setTimeout(function() {
      done($text);
    }, 1000);
//return $text;

      },

      accordion: function(done) {
      var $text = "<i class='icon-info-sign'></i>" + this.options.title;

        var $toc = $($('.resp-tabs-list').html());

          $toc.find('ul').append(
            $('<li>'), {
              text: $text
            });

            return $toc;
 }); 

[nicinabox]

Because this is an object, not an array, there's no guarantee of execution order. You might try using a Promise to execute your async tasks in a specific order.

A jsBin/jsFiddle of what you're trying to accomplish would be mighty helpful for debugging.

[misterpo]

Hi,

I have posted what I am trying to do in the following fiddle : http://jsfiddle.net/misterpo/fvybwcnp

[nicinabox]

Sorry, I meant actually try to make it work in the fiddle. This fiddle is incomplete. All of the javascript is malformed and there are no dependencies included.

[misterpo]

Actually, I would like to replace the following HTML code 👍

• Accordion 1 Title
• Accordion 2 Title

with the following shortcodes

[accordions]
[accordion title="Accordion 1 Title"]Accordion 1 Content [/accordion]
[accordion title="Accordion 2 Title"]Accordion 2 Content [/accordion]
[/accordions]

My Javascript currently does not work as I am not able refresh the DOM after appending the HTML fitting the [accordions] shortcode.

Is it feasible or not ?

Thanks in advance for your support

[nicinabox]

I may be misunderstanding you, but shortcode doesn't replace existing html with shortcodes. It goes the other way. It looks for shortcodes in the DOM and replaces them with what your function returns.

[misterpo]

OK, let's say that I am trying to generate the HTML code in the top left block of the JS fiddle from the following shortcodes :

accordions]
[accordion title="Accordion 1 Title"]Accordion 1 Content [/accordion]
[accordion title="Accordion 2 Title"]Accordion 2 Content [/accordion]
[/accordions]

[misterpo]

Hi,

Anything not clear in my explanations ?

[nicinabox]

Nested tags is not supported in the current release. There is a branch (node-based-replacement) that has some support for this. YMMV.

[jsmith8954]

Hi @nicinabox,

Not sure if this project is still active...any chance you can share a simple example as to how to utilize nested tags?... that you mention in the branch.

just a simple example of how to properly set it up, maybe you have a jsfiddle handy?

Thanks!

[nicinabox]

@jsmith8954 here's an example from the test fixture. https://github.com/nicinabox/shortcode.js/blob/node-based-replacement/spec/javascripts/fixtures/nested.html