dounianxie2058
2015-05-04 20:57
浏览 72

Jquery没有将html传递给iframe

I have been working on this for ages and cannot for the life of me understand what it is I am doing wrong.

So my JQuery is working I know this with a simple hide/show script. I am getting no errors logged in the console but what I am trying to do is this:

I have a page which allows me to create a post which I built a littl WYSIWYG editor to fancy up the post - it works fine and enters the post into the DB as HTML and I can just reference this and it shows as expected. What I am trying to do it have an 'edit post' page where it looks the same pretty much but when you visit the post it shows the post title and the post body with the same WYSIWYG editor but already have in there the post contents. I hope this makes sense, so here are my files:

Create post file:

<?php

if(isset($_POST["submit"])){
$hostname='localhost';
$username='******';
$password='******';

try {

$dbh = new PDO("mysql:host=$hostname;dbname=******",$username,$password);

$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line

$sql = "INSERT INTO doc_list (doc_title, doc_content, doc_created) VALUES ('".$_POST["doc_title"]."','".$_POST["doc_content"]."', NOW() )";


if ($dbh->query($sql)) {
    header ('Location: ../docList.php');
}
else{
}

$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}

}
?>

<form action="actions/newDocAdd.php" method="post" id="rtf" name="">
    <input type="text" name="doc_title" id="doc_title" required="required" placeholder="Document Title"/><br />



    <button class="postEditBtn" type="button" onclick="bold()" title="Bold Text"><i class="fa fa-bold"></i></button>
    <button class="postEditBtn" type="button" onclick="italic()" title="Italic Text"><i class="fa fa-italic"></i></button>
    <button class="postEditBtn" type="button" onclick="underline()" title="Underline Text"><i class="fa fa-underline"></i></button>
    <button class="postEditBtn" type="button" onclick="fontName()" title="Font Family"><i class="fa fa-font"></i></button>
    <button class="postEditBtn" type="button" onclick="fontsize()" title="Font Size"><i class="fa fa-text-height"></i></button>
    <button class="postEditBtn" type="button" onclick="fontcolor()" title="Font Colour"><i class="fa fa-eraser"></i></button>
    <button class="postEditBtn" type="button" onclick="hiliteColor()" title="Highlight Text"><i class="fa fa-magic"></i></button>
    <button class="postEditBtn" type="button" onclick="link()" title="Add/Edit Link"><i class="fa fa-link"></i></button>
    <button class="postEditBtn" type="button" onclick="unlink()" title="Remove Link"><i class="fa fa-chain-broken"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyLeft()" title="Text align-left"><i class="fa fa-align-left"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyCenter()" title="Text align-center"><i class="fa fa-align-center"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyRight()" title="Text align-right"><i class="fa fa-align-right"></i></button>

    <br><br>

    <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>
    <iframe name="editor" id="editor" style="width:100%; height: auto;"></iframe>

    <br><br> 
    <input onclick="formsubmit()" type="submit" value="Create Document" name="submit"/><br />
    <input type"myBtn" type="button" value="Create document" onClick="javascript:submit_form();" />


</form>

the above works fine, it posts the data into the database from the iframe into HTML.

I have an edit page which I want to be able to go into, it already shows the post title in the input field (which it does) and have the WYSWYG post body to have the HTML from the database already in there so I can update it if needs be:

I have a post list, when I click on the post it takes me to the post edit page for that single post:

<?php include 'header.php'; ?>

<?php require_once '../../db_con.php'; 

if(!empty($_GET['doc_id'])){
    $doc = intval($_GET['doc_id']);
try{
    $results = $db->prepare('select * from doc_list where doc_id = ?');
    $results->bindParam(1, $doc);
    $results->execute();

    } catch(Exception $e) {
    echo $e->getMessage();
    die();
    }

    $doc = $results->fetch(PDO::FETCH_ASSOC);    
    if($doc == FALSE){

        echo '<div class="container">';
        echo "<img src='../img/404.jpg' style='margin: 40px auto; display: block;' />";
        echo "<h1 style='margin: 40px auto; display: block; text-align: center;' />Oh Crumbs! You upset the bubba!</h1>";
        echo '<a href="userList.php"  style="margin: 40px auto; display: block; text-align: center;">Get me outta here!</a>';
        echo'</div>';
        die();
    }
}

?>

    <?php
    if(isset($doc)){
    ?>


<form action="actions/updateDoc.php" method="POST">

    <input type="hidden" value="<?php echo $doc['doc_id']; ?>" name="doc_id" />
    <input type="text" value="<?php echo $doc['doc_title']; ?>" name="doc_title" />
    <br />



    <button class="postEditBtn" type="button" onclick="bold()" title="Bold Text"><i class="fa fa-bold"></i></button>
    <button class="postEditBtn" type="button" onclick="italic()" title="Italic Text"><i class="fa fa-italic"></i></button>
    <button class="postEditBtn" type="button" onclick="underline()" title="Underline Text"><i class="fa fa-underline"></i></button>
    <button class="postEditBtn" type="button" onclick="fontName()" title="Font Family"><i class="fa fa-font"></i></button>
    <button class="postEditBtn" type="button" onclick="fontsize()" title="Font Size"><i class="fa fa-text-height"></i></button>
    <button class="postEditBtn" type="button" onclick="fontcolor()" title="Font Colour"><i class="fa fa-eraser"></i></button>
    <button class="postEditBtn" type="button" onclick="hiliteColor()" title="Highlight Text"><i class="fa fa-magic"></i></button>
    <button class="postEditBtn" type="button" onclick="link()" title="Add/Edit Link"><i class="fa fa-link"></i></button>
    <button class="postEditBtn" type="button" onclick="unlink()" title="Remove Link"><i class="fa fa-chain-broken"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyLeft()" title="Text align-left"><i class="fa fa-align-left"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyCenter()" title="Text align-center"><i class="fa fa-align-center"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyRight()" title="Text align-right"><i class="fa fa-align-right"></i></button>

    <br><br>

    <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>
    <iframe name="editor" id="editor" style="width:100%; height: auto;" ></iframe>

   <div id="editor"></div>




    <br><br> 
    <input onclick="formsubmit()" type="submit" value="Update Document" name="submit"/><br />

</div>


<script>
$(document).ready(function (){
    $("#editor").html("<?php echo $doc['doc_content']; ?>");
})
</script>


    <?php   
    }
    ?>

I hope this makes sense so far, so what i thought I could do would simply call in the ID like I did in the input fields to show the database information, but because it is HTML this isnt the case, and If I try to place it in the iframe it is blank, here is an extract form my page source to show that it is calling in the information I need but not putting it into the iframe:

    <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>
    <iframe name="editor" id="editor" style="width:100%; height: auto;" ></iframe>

   <div id="editor"></div>

<script>
$(document).ready(function (){
    $("#editor").html("<div style="text-align: center;">dsffffsfsfsfsdf</div>");
})
</script>

I did try and place it into a div to see but that also failed: Could somebody cast an eye and see my failings?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongtu4559 2015-05-04 21:26
    已采纳

    So I figured it all out - I did some simple JS

    <script>
    var iframe = document.getElementById('editor'),
        iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    
        iframedoc.body.innerHTML = '<?php echo $doc['doc_content']; ?> ';
    
    </script>
    

    It targets the iframe by ID and then allows me to edit it too and retains the changes when I go back in.

    点赞 评论

相关推荐 更多相似问题