• Login
  • Register

DNN Forums

A community discussion page. We're starting from scratch, so...let's get the party started!

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

You are not authorized to post a reply.
Sort:


Basic Member


Posts:76
Basic 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:452
    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 Usergroup für den deutschsprachigen Raum
      DNN Connect


      Basic Member


      Posts:76
      Basic Member

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


        Veteran Member


        Posts:783
        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


          Basic Member


          Posts:76
          Basic 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:783
            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


              Posts:711
              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


                Posts:783
                Veteran Member

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


                  Basic Member


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

                    These Forums are dedicated to 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. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
                    2. 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.
                    3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
                    4. No Flaming or Trolling.
                    5. No Profanity, Racism, or Prejudice.
                    6. Site Moderators have the final word on approving / removing a thread or post or comment.
                    7. 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