Support forums » Products » Cute Editor for PHP » Adding html dynamically with jQuery

Adding html dynamically with jQuery

  •  03-30-2011, 6:07 AM

    Adding html dynamically with jQuery

    Reply Quote
    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: ,
View Complete Thread