CakePHP: calling an external Javascript function

Question

I have the following code that works as shown here: http://jsfiddle.net/rBd53/12/

HTML/JS code in one file:

<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>

How do I change this code to make it work properly with CakePHP 1.3? I have created a test_js.js file under app/webroot/js and put the <script>...</script> portion in there. I also have echo $scripts_for_layout; in app/views/layouts/default.ctp in the <head>.

I'm guessing stuff in my element (.ctp) file is incorrect. The dropdown menu and text below appear, but the text is not dynamically changed according to the option selected. I did the following.

<?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>

bfavaretto · Accepted Answer · 2013-02-06 20:13:53Z

1

I believe you're calling the helper method wrong, it only takes 2 parameters:

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

Also, if that doesn't work, it would be nice to know exactly which warning you're getting...

answered Feb 6, 2013 at 20:13

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

laketuna Over a year ago

Hi, I removed the null argument, and the script is being placed in the header as it should. There is no error at this point, and nothing happens when the options in the dropdown menu is selected.

bfavaretto Over a year ago

1. There should be no <script></script> tags on the external js file; 2. You need an window.onload = function() { /* your code here */ }; handler, or to place your code just before </body> instead of the head. The code is trying to reference html elements that do not exist when the js is interpreted.

laketuna Over a year ago

I removed the <script> tag in the external JS file. As for the rest of your suggestion, I'm not getting it to work still. A working JSfiddle example where the HTML and Javascript is separated would be nice..

laketuna Over a year ago

This is strange. My code actually seems to work. I was just refreshing the page with F5, but when I resubmitted the page, it started working as I intended.

bfavaretto Over a year ago

Forget what I said about window.onload, it's not necessary in this case. Your code should be working (see codepen.io/anon/pen/opCyn). Oh, now I see you just said it is. That was probably the browser cache then.

laketuna · Accepted Answer · 2013-02-07 16:15:43Z

My problem seemed to have been a cashing issue. It is working as it was, and this is what I have.

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]; 
}

In the view element page (.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>

Collectives™ on Stack Overflow

CakePHP: calling an external Javascript function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related