I am trying to use javascript to dynamically set the content of a div element for which the jquery readmore link is configured. This functionality does not appear to work. I may be way off based and completely missed something trivial here, but have spent hours... Any help is greatly appreciated.

I have created a prototype that illustrates this behavior. Please see the uploaded snippet

<link rel="stylesheet"
    href="css/jqueryui/jquery-ui-1.10.1.custom.css" type="text/css" />

<script type="text/javascript" src="js/jqueryui/jquery-1.9.1.js"></script>
<script type="text/javascript"
    src="js/jqueryui/jquery-ui-1.10.1.custom.js"></script>

<!--  readmore js -->
<script type="text/javascript" src="js/readmore.min.js"></script>

<script>
    $(function() {
        $("#esdesc").readmore({
            speed : 1000,
            maxHeight : 100
        });

        $("#etdesc").readmore({
            speed : 1000,
            maxHeight : 100
        });
        $("#edesc").readmore({
            speed : 1000,
            maxHeight : 100
        });

    });

    $(function() {

        $("#popup1").button().click(function() {
            msg = "<p>Salvia portland leggings banh mi fanny pack mixtape,authentic bushwick wes anderson intelligentsia artisan typewriter high life they sold out mixtape high life. Marfa ethnic wayfarersbrooklyn keytar mixtape. Blue bottle shoreditch gluten-free,mixtape hoodie whatever pinterest viral twee fashion axe high life irony biodiesel tofu.</p><p>Retro church-key thundercats keytar, skateboard ironyselvage ethnic freegan banjo pour-over fixie. Raw denim fashion axeoke locavore disrupt, tonx retro authentic letterpress raw denimstumptown mixtape ugh kale chips flexitarian 90's deep v. Squid fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigantry-hard.</p>";

            document.getElementById("etdesc").innerHTML = msg;

            $("#dialog1").dialog("open");
        });

        $("#dialog1").dialog({
            autoOpen : false,
            height : 500,
            width : 800,
            modal : true,
            buttons : {
                "OK" : function() {

                },
                "Cancel" : function() {
                    $(this).dialog("close");

                }
            }

        });
        $("#popup2").button().click(function() {

            $("#dialog2").dialog("open");
        });

        $("#dialog2").dialog({
            autoOpen : false,
            height : 500,
            width : 800,
            modal : true,
            buttons : {
                "OK" : function() {

                },
                "Cancel" : function() {
                    $(this).dialog("close");

                }
            }
        });

    });
</script>

</head>
<body>

    <h3>Readmore Example</h3>

    <table width="600px">
        <tr>
            <td>

                <div id="esdesc">
                    <p>Salvia portland leggings banh mi fanny pack mixtape,
                        authentic bushwick wes anderson intelligentsia artisan typewriter
                        high life they sold out mixtape high life. Marfa ethnic wayfarers
                        brooklyn keytar mixtape. Blue bottle shoreditch gluten-free,
                        mixtape hoodie whatever pinterest viral twee fashion axe high life
                        irony biodiesel tofu.</p>

                    <p>Retro church-key thundercats keytar, skateboard irony
                        selvage ethnic freegan banjo pour-over fixie. Raw denim fashion ax
                        eoke locavore disrupt, tonx retro authentic letterpress raw denim
                        stumptown mixtape ugh kale chips flexitarian 90's deep v. Squid
                        fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigan
                        try-hard.</p>

                    <p>Skateboard artisan bicycle rights next level vinyl cardigan
                        beard twee, farm-to-table truffaut. Shoreditch freegan cliche
                        thundercats, bushwick VHS intelligentsia selfies ethnic try-hard
                        before they sold out. Marfa terry richardson hella, seitan odd
                        future pug butcher. Wes anderson tousled YOLO cardigan. Typewriter
                        high life carles, artisan gentrify messenger bag single-origin
                        coffee truffaut thundercats cray 90's pour-over seitan. Banksy
                        8-bit organic, salvia gentrify stumptown wayfarers. Godard echo
                        park before they sold out chambray, skateboard twee mcsweeney's
                        synth hella.</p>

                    <p>Flannel pinterest Austin twee narwhal, hoodie swag wolf
                        photo booth. Hella kale chips marfa occupy pitchfork put a bird on
                        it. Semiotics dreamcatcher selfies beard DIY umami craft beer 3
                        wolf moon. Try-hard literally mustache polaroid ennui VHS. High
                        life fixie wolf, trust fund twee seitan pinterest blog helvetica
                        sriracha. Tattooed selvage try-hard, biodiesel banjo direct trade
                        echo park kogi tonx bespoke. Pork belly put a bird on it iphone,
                        fixie literally bespoke tonx butcher +1 swag.</p>
                </div></td>
        </tr>
    </table>
<br>
<h3>JQueryUI Modal Dialog Example</h3>
<br>
    <button id="popup2">It Works</button>
    <button id="popup1">It NoWorky</button>

    <div id="dialog1">

    <table width="550px">
        <tr><td> <b>In my prod code I am populating the div with the content of a TinyMCE editor</b>
        <p>Here javascript is writing dynamically the div using innerHTML attribute</p>

        </td></tr>
        <tr>
            <td>

                <div id="etdesc">
                </div></td>
        </tr>
    </table>
    </div>

    <div id="dialog2">

    <table width="550px">
            <tr><td> <b>This is static HTML... all good.</b>

        </td></tr>
        <tr>
            <td>

                <div id="edesc">
                        <p>Skateboard artisan bicycle rights next level vinyl cardigan
                        beard twee, farm-to-table truffaut. Shoreditch freegan cliche
                        thundercats, bushwick VHS intelligentsia selfies ethnic try-hard
                        before they sold out. Marfa terry richardson hella, seitan odd
                        future pug butcher. Wes anderson tousled YOLO cardigan. Typewriter
                        high life carles, artisan gentrify messenger bag single-origin
                        coffee truffaut thundercats cray 90's pour-over seitan. Banksy
                        8-bit organic, salvia gentrify stumptown wayfarers. Godard echo
                        park before they sold out chambray, skateboard twee mcsweeney's
                        synth hella.</p>

                    <p>Flannel pinterest Austin twee narwhal, hoodie swag wolf
                        photo booth. Hella kale chips marfa occupy pitchfork put a bird on
                        it. Semiotics dreamcatcher selfies beard DIY umami craft beer 3
                        wolf moon. Try-hard literally mustache polaroid ennui VHS. High
                        life fixie wolf, trust fund twee seitan pinterest blog helvetica
                        sriracha. Tattooed selvage try-hard, biodiesel banjo direct trade
                        echo park kogi tonx bespoke. Pork belly put a bird on it iphone,
                        fixie literally bespoke tonx butcher +1 swag.</p>

                </div></td>
        </tr>
    </table>
    </div>

</body>

Hi,

I'm not quite sure what the jQuery UI library is supposed to do or how you are using it, but based on the markup you posted I can make a couple of suggestions:

Move all your JavaScript to the bottom of the page, just above the closing </body> tag.
After your content has been inserted into the DOM, you'll need initialize Readmore on your new element with something like: $('#my_new_content').readmore(...);

Here's a quick example of how you could insert content and initialize Readmore on it.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <!-- <link rel="stylesheet"
    href="css/jqueryui/jquery-ui-1.10.1.custom.css" type="text/css" /> -->

  <style media="screen">
    body { font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #444; }
    code { color: #777; font-family: "Source Code Pro", "Menlo", "Courier New", monospace;}
    a { color: #178DB1; }
  </style>
</head>

<body>
  <h3>Dynamically Added Readmore Example</h3>

  <div id="dialog1">
    <table width="550px">
      <tr>
        <td>
          <b>Dynamically added content will appear below when you click this button: <button href="#" id="popup1">Make some content!</button></b>
        </td>
      </tr>
      <tr>
        <td>
          <div id="etdesc"></div>
        </td>
      </tr>
    </table>
  </div>

  <!-- <script type="text/javascript" src="js/jqueryui/jquery-1.9.1.js"></script>
  <script type="text/javascript"
      src="js/jqueryui/jquery-ui-1.10.1.custom.js"></script> -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

  <!--  readmore js -->
  <script type="text/javascript" src="readmore.js"></script>

  <script>
    $('#popup1').on('click', function(event) {

      msg = "<p>Salvia portland leggings banh mi fanny pack mixtape,authentic bushwick wes anderson intelligentsia artisan typewriter high life they sold out mixtape high life. Marfa ethnic wayfarersbrooklyn keytar mixtape. Blue bottle shoreditch gluten-free,mixtape hoodie whatever pinterest viral twee fashion axe high life irony biodiesel tofu.</p><p>Retro church-key thundercats keytar, skateboard ironyselvage ethnic freegan banjo pour-over fixie. Raw denim fashion axeoke locavore disrupt, tonx retro authentic letterpress raw denimstumptown mixtape ugh kale chips flexitarian 90's deep v. Squid fingerstache bespoke wolf DIY. Banjo pour-over shoreditch cardigantry-hard.</p>";

      $('#etdesc').html(msg).readmore({
        speed : 1000,
        maxHeight : 100
      });
    });
  </script>
</body>
</html>

jedfoster / Readmore.js

Readmore - dynamic content #6

I have created a prototype that illustrates this behavior. Please see the uploaded snippet