CODEWITHSUNDEEP
javascripthtmlajaxcakephpxmlhttprequest
user3258348
user3258348

Reputation: 67

CakePHP - making AJAX requests with JavaScript

I'm using CakePHP 2.3.8 and trying to populate a div with content using JavaScript AJAX request without jQuery. The text from the request loads, but no JavaScript from that loaded file is triggered. I included another JavaScript file on that page, but it doesn't load either (checked network tab in Chrome). Why would this happen? I'm not getting any errors.

On Tests/testpage I make a POST request to another file which then populates the "content_container" div. The HTML loads, but none of the JavaScript does. 

//tests/testspage.ctp

<div id = "content_container"></div>

<script>

 //remember, I'm doing this because I want to try it without jQuery
(function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("content_container").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","/tests/testpage_content",true);
    xmlhttp.send();
})();

</script>

The post request works fine and the div "content_container" is populated. However, none of the JavaScript on that page is triggered. The file "another_js_file.js" doesn't load (I checked the network tab). I can browse directly to it, so I know I have the correct path, no errors show.

Here's the content on testpage_content.ctp

//tests/testpage_content.ctp

<p>Your div now has content</p>


<script>

 window.onload = function() {
        alert("Content is loaded!");
    } 
</script>

<script src="/js/another_js_file.js"></script>

So to summarize, I open up /tests/testpage.ctp which makes an AJAX POST request to /tests/testpage_content.ctp. The div that I populate displays the text, but my JavaScript is not being triggered and another script that I include on that page is not loading. What is causing the alert message not to show and "another_js_file.js" not to load?

I checked the loading sequence in chrome developer tab and it shows

testpage
testpage_content
//another_js_file.js should appear here, but it does not

In my TestsController I just have 

public function testpage(){



}


public function testpage_content(){

    $this->layout = 'ajax';

}

Upvotes: 0

Views: 778

Answers (2)

Fury
Fury

Reputation: 4776

the way that you importing your js file or css file is incorrect

Don't do this for your view

<script src="/js/another_js_file.js"></script>

try this for cake 2.X

echo $this->Html->script('another_js_file.js');

Upvotes: 1

user221931
user221931

Reputation: 1852

As I mention in my comments, it is not supposed to load scripts, and it's not cake's fault but the way browsers work. Whatever you insert into the DOM with AJAX won't trigger scripts. You will need to parse and call the scripts in the results yourself through JS if you need to stick to that functionality.

With jQuery there are different methods you can do AJAX requests, some will just put the contents in the DOM or others that allow you to call functions later and do more staff with the data you got returned.

Upvotes: 0

Related Questions