Javascript在HTML中运行良好但在PHP Heredoc中运行不正常

时间：2013-07-01 19:33:19

标签： php javascript html heredoc

我是php的主要菜鸟，我可能会咬得比我在这里咀嚼更多。话虽如此，我面临以下问题：我使用HTML创建了一个表单，只需单击一下按钮，就可以使用javascript动态生成响应的其他行。它作为一个独立的html文档工作正常，但是，当我尝试使用heredoc将其放入php函数时，按钮不会添加任何行。请参阅下面的代码。

提前感谢任何见解！

function upsmart_create_profile_form() {
    global $wpdb;
    $data = $wpdb->get_row($wpdb->prepare("SELECT * FROM upsmart_profile WHERE wordpress_id=%d",get_current_user_id()),ARRAY_A);

    $media_url = admin_url("media-upload.php?type=image&TB_iframe=true");

    $out = <<<EOHTML
    <form method='post' enctype='multipart/form-data'>
<h4>Branding</h4>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#logo_upload").click(function() {
            tb_show("", "{$media_url}");
            window.send_to_editor = function(html) {
                imgurl = jQuery("img",html).attr("src");
                jQuery("#logo_field").val(imgurl);
                tb_remove();
            }
            return false;
        });

        jQuery("#media1_upload").click(function() {
            tb_show("", "{$media_url}");
            window.send_to_editor = function(html) {
                imgurl = jQuery("img",html).attr("src");
                jQuery("#media1_field").val(imgurl);
                tb_remove();
            }
            return false;
        });

        jQuery("#media2_upload").click(function() {
            tb_show("", "{$media_url}");
            window.send_to_editor = function(html) {
                imgurl = jQuery("img",html).attr("src");
                jQuery("#media2_field").val(imgurl);
                tb_remove();
            }
            return false;
        });
    });
</script>
<table>
    <tr><th>Logo</th><td><input type='text' id="logo_field" value="{$data['logo']}" name='logo'/>
    <input type='button' id='logo_upload' value='Open Media Library'/></tr>
    <tr><td colspan='2'>Sometext&mdash;moretext.</td></tr>

    <tr><th><br/>Media</th></tr>
    <tr><td colspan='2'>Now upload the "coolest" piece of media you have. This will be used on the top fold of your generated site to draw users in.
    <br/>
    <input type='text' id="media1_field" value="{$data['media1']}" name='media1'/>
    <input type='button' id='media1_upload' value='Open Media Library'/>
    <tr><td colspan='2'>While you're at it, give us the second coolest piece of media you have as well. Who knows when you might need it?
    <br/>
    <input type='text' id="media2_field" value="{$data['media2']}" name='media2'/>
    <input type='button' id='media2_upload' value='Open Media Library'/>
    </td></tr>
    <tr><td colspan='2'><br/>
    <ul><li>The bigger the better&mdash;don't worry, we'll scale these down for you.</li><li>The uploaded files should have solid backgrounds.</li></ul><br/></td></tr>
</table>
<h4>About</h4>
<table>
    <tr><th colspan='2'>Mission Statement</th></tr>
    <tr><td colspan='2'>Your mission statement should include ...</td></tr>
    <tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['mission'],'mission');
$out .= <<<EOHTML
    </td></tr>

    <tr><th colspan='2'>"About Us"</th></tr>
    <tr><td colspan='2'>A good "About Us" writeup should answer the following questions: <ul><li>Who are you?</li><li>What are you doing?</li><li>Why is what you're doing awesome?</li></ul></td></tr>
    <tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['about'],'about');
$out .= <<<EOHTML
    </td></tr>

    <tr><th colspan='2'>Company History</th></tr>
    <tr><td colspan='2'>Let us know your background. Some things to think about: ...</td></tr>
    <tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['history'],'history');
$out .= <<<EOHTML
    </td></tr>
</table>

    </table>

<h3>Company Milestones</h3>
<p>Below, share any milestone achievements of your company.  These could be first-hires, funding that you've received, revenue achievements, or anything else.</p>
    <SCRIPT language="javascript">
        function addRow(tableID) {

           var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

           var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            cell3.appendChild(element2);


        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


           }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />


    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk[]"/></TD>
            <TD>
        <select name="month[]">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <select name="day[]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
        <select name="year[]">
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
            <option value="1998">1998</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
            <option value="1995">1995</option>
            <option value="1994">1994</option>
            <option value="1992">1992</option>
            <option value="1991">1991</option>
            <option value="1990">1990</option>
        </select>
        </TD>
            <TD> <INPUT type="text" name="txt[]"/> </TD>
        </TR>
    <tr><th colspan='2'><input type='submit' value='Save'/></th></tr>
    </TABLE>
    </form>
EOHTML;
    return $out;
}

2 个答案:

答案 0 :(得分：0)

使用HEREDOC时，请确保您的HEREDOC线路末端没有空格。

示例：

<?php
$myStr = <<< ENDL
  Hello, World!
ENDL; // No white space in front of me!
?>

答案 1 :(得分：0)

好吧，所以我想到了Spudley的一些建议。我遇到了html渲染的情况＆amp;＆amp;在javascript中作为＆amp;＆amp;这是由于wordpress的一个怪癖和它使用XHTML described here。我尝试过使用他们的建议，但他们都没有为我做过。最后，我刚刚创建了一个单独的javascript文件，并在php heredoc中引用它。

相关问题
最新问题