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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 win11家庭中文版安装docker遇到Hyper-V启用失败解决办法整理
  • ¥15 gradio的web端页面格式不对的问题
  • ¥15 求大家看看Nonce如何配置
  • ¥15 Matlab怎么求解含参的二重积分?
  • ¥15 苹果手机突然连不上wifi了?
  • ¥15 cgictest.cgi文件无法访问
  • ¥20 删除和修改功能无法调用
  • ¥15 kafka topic 所有分副本数修改
  • ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
  • ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?