Loading an iframe with a $_GET variable in the src through AJAX

On my Site I have a list of items and an edit button beside them or an option to create a new item.

When you click edit I do a request via AJAX to another PHP file which returns the edit form pre-filled with the details of the item that you clicked to edit.

If you choose the option to add a new item it does another AJAX call to the same file and returns the form without anything filled in.

Part of the form though however is a WYSIWYG text editor made in an iframe like so:

HTML:

<iframe name='richTextField' id='wysiwyg'></iframe>

Script:

richTextField.document.designMode = 'On';

So this works fine when I want to create a new item, it loads the form and I can edit whatever I want within my iframe.

However, when I want to edit an existing item, I add a src attribute to the iframe, like this:

src='myFile.php?id=$edit_id'

The source file is pretty basic only a couple of lines but it uses a $_GET variable for the id of the item you're trying to edit. It querys the DB for this ID and just echoes the content like this:

<?php
if (isset($_GET['id'])) {
    $ID = $_GET['id'];
    $params = [$ID];
    $sql = "SELECT * FROM tableWHERE id=?";
    $stmt = DB::run($sql,$params);
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $content = $row["content"];
    }
}
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <?php echo $content; ?>
</body>
</html>

This loads the content I want into the iframe as expected but I cannot edit it.

I'm pretty sure this has something to do with how I'm using AJAX to load a file that is getting something from another file with a $_GET variable, but it is loading the content the way I want I just can't edit it.

Any ideas or explanations why this is happening or any sugestions would be greatly appreciated.

Solution

From where are you calling richTextField.document.designMode = 'On'; ?

Can you try contentDocument for iframe ?

document.getElementById('wysiwyg').contentDocument.designMode="on";

Edit: Editing to add working code in response to the comment as code is not formatted in comment.

You can see that iframe is not editable initially. After button click event, the iframe is editable because designMode is set to 'on';

<html>
    <head></head>
    <body>
        <iframe name='richTextField' id='wysiwyg'></iframe>
        <div id="div">
            Div Content
        </div>
        <button id="testbutton">Test Button</button>
        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
        <script>
            $('#testbutton').click(function(){
                var xmlhttp = new XMLHttpRequest(); 
                xmlhttp.onreadystatechange = function(){ 
                    if(this.readyState == 4 && this.status == 200){ 
                        $("#div").html(this.responseText); 
                        $("#div").slideDown("slow"); 
                        enableEditMode(); 
                    } 
                }; 
                var id = 51;
                xmlhttp.open("POST", "test.php?id="+id, true); 
                xmlhttp.send(); 
            });
            function enableEditMode (){ 
                richTextField.document.designMode = 'On'; 
            }
        </script>
    </body>
</html>