DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Use JQuery/JS to change content in HTML module while in Edit Content Mode

 9 Replies
 1 Subscribed to this topic
 30 Subscribed to this forum
Sort:
Author
Messages
Growing Member
Posts: 80
Growing Member

How would I use JQuery or JS to change the content of a div that is in an HTML module that is open in Edit Content mode?

I have tried creating a div with an id like

[div id="ChangeMe"]This text will be replaced.[/div] 

and using the standard JQuery statement 

$('#ChangeMe').html('Changed');

This works when the HTML module is not in Edit Content mode but does not work if the module is in edit mode, which is where I need it. I suppose it might be a scope issue, but I do not know how to address the issue. Any other way to change the text in edit mode is also welcome. Thanks in advance!

Veteran Member
Posts: 1182
Veteran Member
MVP
MVP
You're an MVP!
Mark,

my suspect/idea is: Edit mode is an IFrame (technically spoken), so it loads just the content, but not your script. I don't really have a solution for that atm, but maybe this leads you in the direction how to solve it,,,

Let us know if you could solve this, would be interesting.

Happy DNNing!
Michael

Michael Tobisch
DNN★MVP

DNN Connect
Growing Member
Posts: 80
Growing Member
Yes Michael, I can see that it is in an iframe. I'll search on that for a while. Thanks.
Veteran Member
Posts: 1246
Veteran Member
MVP
MVP
You're an MVP!
Mark,

This is an interesting question. Why do you want to do that? More curious than anything.
Growing Member
Posts: 80
Growing Member
I'm using an Action Form. The DNN Text Editor in an Action Form is an html module in edit mode.

My user is pulling multiple pieces of content into the editor from the user's custom tables and then stays in edit mode so the user can change the document text, highlight and underline and such, and when finished they will click a button that grabs their content from the DNN Text Editor and produces a formatted PDF.

In order to pump a piece of content from a record into the DNN Text Editor in just the right location in the existing content without replacing the entire contents of the editor, I'm placing an anchor or div with an ID in the content, and then need to use jquery/JS to put the incoming content into the html of the named div.

Basically I'm creating a pdf generator that pulls from user data that can be tweaked by the user. I'm liking it so far.
Veteran Member
Posts: 1246
Veteran Member
MVP
MVP
You're an MVP!
Yikes! That's quite a thing.

So, I'm wondering when jQuery fires. Do you have some sort of onchange event that monitors what's in the editor box? And, is that what you need to do? When it's in the editor box, is it really HTML? Or better, is it being interpreted as HTML? I seem to be having trouble wrapping my head around that part. Or is that really the question?
Senior Member
Posts: 1322
Senior Member
3 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
Lifesaver
Lifesaver
You're Life Saver!
New Poster
New Poster
Congrats on posting!
3 Engaged Reader
Engaged Reader
You are an engaged reader!
Posted By Mark Buelsing on 28 Oct 2020 01:01 PM
I'm using an Action Form. The DNN Text Editor in an Action Form is an html module in edit mode.

My user is pulling multiple pieces of content into the editor from the user's custom tables and then stays in edit mode so the user can change the document text, highlight and underline and such, and when finished they will click a button that grabs their content from the DNN Text Editor and produces a formatted PDF.

In order to pump a piece of content from a record into the DNN Text Editor in just the right location in the existing content without replacing the entire contents of the editor, I'm placing an anchor or div with an ID in the content, and then need to use jquery/JS to put the incoming content into the html of the named div.

Basically I'm creating a pdf generator that pulls from user data that can be tweaked by the user. I'm liking it so far.

I think a custom CkEditor plugin (although not very simple) would be the most reliable way to do this.
 

 

 

Veteran Member
Posts: 1246
Veteran Member
MVP
MVP
You're an MVP!
Now, why didn't I think of that!
Growing Member
Posts: 80
Growing Member
Thank you Joe and Timo. I did find some JQuery that will replace the html of a named div inside a iframe, if the iframe has an id or a class. I thought I had it figured out because the iframe had a class, and my script worked. But only once. I found out that upon refreshing the page, the text editor iframe no longer had a class. Sometimes there, sometimes not there. That's out.

Just a few moments ago I figured out how to paste a unique string ( a token) into the document in the editor in any particular place that I need it, and then click a button that replaces the token with a new content section from the database using a "Replace" feature in the form. So the mission is accomplished and no JS/Jquery is needed this time.

My next trick will be to figure out how I can just drag a token into the text editor and have the replacement happen without a button click. Back to Google I go.
New Around Here
Posts: 1
New Around Here
Just a few moments ago I figured out how to paste a unique string ( a token) into the document in the editor in any particular place that I need it, and then click a button that replaces the token with a new content section from the database using a "Replace" feature in the form. So the mission is accomplished and no JS/Jquery is needed this time.


Could you please give some more detailed instruction about the way you did this?
I have the same problem and I am using dnnsharp action form and mytokens, I want to insert a Text to the 'Dnn Text Editor' with a button click.

These Forums are for the discussion of the open source CMS DNN platform and ecosystem.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
  2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
  3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  5. No Flaming or Trolling.
  6. No Profanity, Racism, or Prejudice.
  7. Site Moderators have the final word on approving / removing a thread or post or comment.
  8. English language posting only, please.

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved