Adding html dynamically with jQuery

Last post 05-11-2011, 2:22 PM by jallred15. 3 replies.
Sort Posts: Previous Next
  •  03-30-2011, 6:07 AM 66924

    Adding html dynamically with jQuery

    So I've the following page (edited for brevity):
    1. <html>  
    2.   <head>  
    3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
    4.     <script type="text/javascript" src="./js/test.js"></script>  
    5.     <title>test</title>  
    6.   </head>  
    7.   <body>  
    8.     <legend>Page to edit</legend>  
    9.     <label for="page">Page: </label>  
    10.     <select title="Page" name="page" id="page">  
    11.       <option value="0">- Select -</option>  
    12.       <option value="page1.php">page1.php</option>  
    13.       <option value="page2.php">page2.php</option>  
    14.       <option value="page3.php">page3.php</option>  
    15.       <option value="page4.php">page4.php</option>  
    16.       <option value="page5.php">page5.php</option>  
    17.     </select>  
    18.     <legend>Content</legend>  
    19. <?php  
    20.     //Step 2: Create Editor object.  
    21.     $editor = new CuteEditor();  
    22.     $editor->Text = "Please select a page using the drop down list above.";  
    23.     //Step 3: Set a unique ID to Editor  
    24.     $editor->ID = "editor1";  
    25.     //Step 4: Render Editor  
    26.     $editor->Draw();  
    27. ?>  
    28.   </body>  
    29. </html>
    with test.js looking like this:
    1. $(function(){  
    2.   var editor1 = document.getElementById('editor1');  
    3.   $('#page').change(function(){  
    4.     $.ajax({  
    5.       url: "getPage.php",  
    6.       data: {  
    7.         pageName: $(this).val()  
    8.       },  
    9.       success: function(data){  
    10.         $("#editor1").html(data);                         // <- Doesn't work  
    11.         alert(data);                                      // <- Works so I know the data is there  
    12.         editor1.setHTML(data);                            // <- Doesn't work  
    13.         var editor2 = document.getElementById('editor1');   
    14.         editor2.setHTML(data);                            // <- Doesn't work  
    15.       }  
    16.     });  
    17.   });  
    18. }); 
    getPage.php basically returns some html data which is stored within a MySQL database. I know that that bit is working as the alert shows the correct content.

    What I want to do is get the content returned by the ajax call into the editor where I can allow the user to alter it.

    Later I'll work on saving it back to the database ;-)

    Cheers,

    Dom
     
    p.s. Tried to post this in via Chrome (10.0.648.151) and it failed, most especially on the code highlight pop-up.
     
     
     
    Filed under: ,
  •  03-31-2011, 5:10 AM 66936 in reply to 66924

    Re: Adding html dynamically with jQuery

    I think that basically what I'm after is a way of replacing the present content and then loading new content into the editor dynamically using javascript. I can get the new content but I'm having problems inserting it.
  •  03-31-2011, 12:13 PM 66943 in reply to 66936

    Re: Adding html dynamically with jQuery

    Dear annoyingmouse,
     
    http://phphtmledit.com/JavaScript-API.php , this example demonstrates how to use javascript API in CuteEditor, you can find the source code of this example in download package.
     
    The following function set the content to CuteEditor.
    function setHTML()
       {
        // get the cute editor instance
        var editor1 = document.getElementById('<?php echo $ClientID;?>');
        
        // Set the editor
        editor1.setHTML(document.getElementById("myTextArea").value);
       }
     
     
    Thank you for asking
     
     
  •  05-11-2011, 2:22 PM 67544 in reply to 66936

    Re: Adding html dynamically with jQuery

    CuteEditor uses your passed ID for the textarea and then generates an ID from it for the table and its children, where the text actually is.  The table has an Id of "CE_yourID_ID".
     
    So, for getting and setting content with JQuery, you need to get into the document of the iframe that the editor uses:
    $('#CE_editor1_ID').find('iframe').contents().find('body').html();
     
    Jquery's .contents() gives you access to the document of the iframe.
     
    I find this much more reliable than CuteEditor's javascript API.  I just can't predict when that will work for me.  However, if you want to try using it, then you would do this:
    document.getElementById('CE_editor1_ID').getHTML();
     
    Good Luck!
View as RSS news feed in XML