单击[提交]->隐藏DIV容器1->显示DIV容器2->加载在DIV容器2中的.PHP文件中找到的DIV。

Question

这是我想做的

1-单击提交

2-隐藏DIV容器1

3-显示DIV容器2

4-将在“ PricingDisclaimer.php”中找到的所有DIV加载到Div容器2中

---

这是我的DIV码

<div id="MainContainer">

<div class="Container1">
Lalala content
<input type="submit" value="Select" id="Load_Container2"/>
</div>

<div id="Container2" style="display:none;">I want to load all of the DIVs found inside "PricingDisclaimer.php" and place them inside this container</div>
</div>

这是我的Javascript / jQuery代码

<script type="text/javascript">
$(document).ready( function() {
$("#Load_Container2").on("click", function() {
    $(".Container1").hide();
    $("#Container2").show();
    $("#Container2").load( "http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php" );

});
</script>

隐藏DIV Container1 [WORKS]

它显示DIV Container2 [WORKS]

问题：

不会将PricingDisclaimer.php加载到＃Container2中

这是PricingDisclaimer.php

<div id="PricingBoxDisclaimer">
<div id="PBDisclaimerTLCorner"></div><div id="PBDisclaimerTMBorder"></div><div id="PBDisclaimerTRCorner"></div>
<div id="PBDisclaimerMLBorder"></div><div id="PBDisclaimerContainr"><div id="PricingDisclaimerTitle"><span><b>DISCLAIMER</b></span></div><div id="PricingDisclaimerContainer"><div id="PricingDisclaimerText">
<?php query_posts('p=1272' ); ?>
<?php if (have_posts()); ?>
<?php while ( have_posts() ) : the_post();?>
<br /><h1>
<?php
the_title();
echo '<br>'; ?></h1><br />
<?php
echo '<p>';
the_content();
echo '</p>';
endwhile; ?>
</div></div><div id="PBDisclaimerMRBorder"></div>
<div id="PBDisclaimerBLCorner"></div><div id="PBDisclaimerBMBorder"></div><div id="PBDisclaimerBRCorner"></div>
</div>

^我想要所有的^

在这里

VVVVVV

<div id="Container2" style="display:none;">HERE</div>

我该怎么做呢？

Answer 1

我认为这可能对您有帮助。

$("#Container2").html('<iframe src="http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php"</iframe>');

Answer 2

这实际上是因为，在您调用load的方式中，该文件被称为独立文件，但是其中包含一些代码，这些代码依赖于某些wordpress函数。 因此，无法在尝试调用它时调用它。 如果要以这种方式加载它，则应使其独立于wp代码。 只需尝试在您的浏览器中访问该URL，您现在将收到此错误：

DISCLAIMER

Fatal error: Call to undefined function query_posts() in /srv/disk12/1806831/www/prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php on line 4

编辑

我知道，删除了WP相关代码后，您的链接现在可以正常工作了。 但是我在您的JS代码中发现了另一个问题。 您错过了右大括号}); 为$(document).ready 。 像这样修复它：

$(document).ready( function() {
    $("#Load_Container2").on("click", function() {
        $(".Container1").hide();
        $("#Container2").show();
        $("#Container2").load( "http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php" );
    }); 
}); //You missed this closing braces

跨源发行

跨域请求被阻止：“相同来源策略”不允许读取远程资源。

这是因为，您正在将请求从一个域发送到另一个域，该域不允许跨域请求。 您可以从PricingDisclaimer.php文件中允许该PricingDisclaimer.php 。 只需在文件顶部添加此行（在执行任何回显或输出任何html代码之前）：

header('Access-Control-Allow-Origin: *');

了解更多有关： 跨域资源共享