Truncate dynamically added text (from DB)

[Yustie]

Is it possible to use this plug in for dynamically added text from a database for example?

[kswedberg]

Sure. However, the way you approach it might depend on when the text is added and when you call .expander()

[Yustie]

I have a mustache template I'm using which looks like this:

but it doesn't show me the link to press 'more' and 'less'. Have tried this with another plugin as well.

How can I accomplish this with the template?

[kswedberg]

You have to call .expander() after those elements have been inserted into the DOM. Are you getting any JS errors? Are you sure you're selecting the right elements — $('This-selector-has-to-match-the-element').expander() ?

[Yustie]

No JS errors, but I haven't tried this plug in yet TBH, because I have tried a few others already which didn't work.

What is the event i should be fireing when those elements have been inserted into the DOM? Shouldn't I be doing something with on() ?

By the way, what is the markup for HTML code?

[kswedberg]

It depends on when/how the elements are being inserted. If they're being inserted with JavaScript, and the method to do so has a "callback" argument, pass a function calling .expander() in that argument.

It might help to point me to a reduced test case so I can see what you're doing.

[Yustie]

Yes it's with JQuery/AJAX calls.

I have a project which gets products from the database when the user scrolls down (endless scroll) in a div. An AJAX call gets fired, and in the success function I'm applying that result with the template. So they are being inserted with JQuery into the DOM.

If you can show me an example with that callback, I can try to work with that.

[kswedberg]

Show me what you have in the callback so far, and I'll see what I can do.

[Yustie]

This is my success function callback from an AJAX call:

success: function (data) { if (data != null && data.length > 0) { var template = $('#serviceTemplate').html(); var html = Mustache.to_html(template, { data: data }); $('#ulListId').append(html); } } },

[kswedberg]

ok, assuming the element you want to call expander on is in that ulListId, you could just add it to the $('#ulListId').append(html); line:

$('#ulListId').append(html).find('YOUR_ELEMENT').expander();

[Yustie]

I just fixed it with adding $('.infoCap').expander(); in the success function after ().append(html);.

Thanks!

EDIT: Oh you beat me by a few seconds I see.

[kswedberg]

Fantastic. Glad to hear it's working now.