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

Sort:
You are not authorized to post a reply.





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





      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

      dnnWerk Austria
      DNN Connect





      Growing Member





        Yes Michael, I can see that it is in an iframe. I'll search on that for a while. Thanks.





        Veteran Member





          Mark,

          This is an interesting question. Why do you want to do that? More curious than anything.
          Joe Craig
          DNN MVP
          Patapsco Research Group





          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





              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?
              Joe Craig
              DNN MVP
              Patapsco Research Group





              Veteran Member





                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





                  Now, why didn't I think of that!
                  Joe Craig
                  DNN MVP
                  Patapsco Research Group





                  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





                      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.
                      You are not authorized to post a reply.

                      These Forums are dedicated to the discussion of DNN Platform.

                      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