CakePHP：调用外部 Javascript 函数答案

【问题标题】：CakePHP: calling an external Javascript functionCakePHP：调用外部 Javascript 函数
【发布时间】：2013-01-22 03:55:33
【问题描述】：

我有以下代码，如下所示：http://jsfiddle.net/rBd53/12/

HTML/JS 代码在一个文件中：

<script type="text/javascript">
    var textBlocks = new Array(
        'Select from the list to change this box',
        'Text block two',
        'Text block three'); 

    function changeText(form) {
        var ind = form.qwer.selectedIndex;
        document.getElementById("display").innerHTML=textBlocks[ind]; 
    }
</script>

<form>
    <select name="qwer" onChange="changeText(this.form);">
        <option value="0">Select</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <br>
    <div id="display">Select from the list to change this box</div> 
</form>

如何更改此代码以使其在 CakePHP 1.3 中正常工作？我在app/webroot/js 下创建了一个test_js.js 文件并将<script>...</script> 部分放在那里。我也有echo $scripts_for_layout; 在app/views/layouts/default.ctp 在<head>。

我猜我的元素 (.ctp) 文件中的内容不正确。出现下拉菜单和下面的文本，但文本不会根据所选选项动态更改。我做了以下。

<?php echo $this->Html->script('test_js', array('inline'=>false)); ?>
<form>
<select name="qwer" onChange="changeText(this.form);">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<br>
<div id="display">Select from the list to change this box</div> 
</form>

【问题讨论】：

标签： javascript html cakephp-1.3

【解决方案1】：

我相信你调用辅助方法是错误的，它只需要2个参数：

echo $this->Html->script('test_js', array('inline'=>false));

另外，如果这不起作用，最好知道您收到的是哪个警告...

【讨论】：

嗨，我删除了 null 参数，并且脚本正按原样放置在标题中。此时没有错误，选择下拉菜单中的选项时也没有任何反应。
1.外部js文件上应该没有<script></script>标签； 2. 您需要一个window.onload = function() { /* your code here */ }; 处理程序，或者将您的代码放在</body> 之前而不是头部。该代码试图引用 js 解释时不存在的 html 元素。
我删除了外部JS文件中的<script>标签。至于你的其他建议，我还没有让它继续工作。一个 HTML 和 Javascript 分开的工作 JSfiddle 示例会很好..
这很奇怪。我的代码实际上似乎工作。我只是用 F5 刷新页面，但是当我重新提交页面时，它开始按我的预期工作。
忘记我所说的window.onload，在这种情况下没有必要。您的代码应该可以工作（请参阅codepen.io/anon/pen/opCyn）。哦，现在我看到你刚才说的是。那可能是当时的浏览器缓存。

【解决方案2】：

我的问题似乎是兑现问题。它按原样工作，这就是我所拥有的。

app\webroot\js\test_js.js:

var textBlocks = new Array(
    'Select from the list to change this box',
    'Text block two',
    'Text block three'); 

function changeText(form) {
    var ind = form.qwer.selectedIndex;
    document.getElementById("display").innerHTML=textBlocks[ind]; 
}

在视图元素页面（.ctp）中：

<?php echo $this->Html->script('test_js', array('inline'=>false)); ?>
<form>
    <select name="qwer" onChange="changeText(this.form);">
        <option value="0">Select</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
<br>
<div id="display">Select from the list to change this box</div> 
</form>

【讨论】：