AJAX and CI

[eluser]sjmiller85[/eluser]
I've done quite a bit of searching with no luck, so here is my dilemma.

First off, I am no AJAX scripter. I've done some reading, but this is my first undertaking, and I could see my future AJAX development with CI either aided or hindered based off this.

Now to the meat and potatoes of my problem. I have script in my header view (in the head section of the view) that goes through the numbers for AJAX. The problem I am having is calling the .php file. With the script embedded within the header, can I use the traditional CI URI of [class]/[function]/[parameters] for the URI to load a php file with AJAX? I try this and it loads the index() function of the [class], which I do not want. If I can't do that, do I just write an external .php script that features no CI functionality? (I tried writing an external function one directory deep within the views directory and was unable to load the form helper or anything else, seems as though this script is excluded from anything CI).

If not, what should I do for the URL parameter in the .open method for my AJAX script and still maintain CI functionality?

While I'm at it, this is confusing the heck out of me, when I try to do an include() with PHP, or js, I cannot ever seem to get the URL right without having to go all the way back to /system/application/etc../etc.. This also bugs the hell out of me. I cannot seem to figure out what directory the views load to so that I could try and include() another file without having to go back to the top directory...

Thank you for your help!

[eluser]sjmiller85[/eluser]
I'll add some examples of what I'm doing:

This is the external file route. I am not going the class/function/parameter route. Instead, I am using an external file with POST data:

this is selectorboxes.js (embedded into the head of the view file):

Code:

var xmlHttp

function selectorBoxes(str) {
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
          alert ("Your browser does not support AJAX!");
          return;
    }
    var url="/system/application/views/js/selectorboxes.php";
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function stateChanged() {
    if (xmlHttp.readyState==4) {
        document.getElementById("selList")[removed]=xmlHttp.responseText;
    }
}

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    } catch (e) {
          // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    return xmlHttp;
}

and this is selectorboxes.php called in the .open method above:

Code:

$this->load->helper('form');
$str = $_POST['str'];
for($i=0; $i<$str; $i++) {
    echo '<li>Selector Type: '.form_dropdown('selectorType'.$i, $selector, set_value('selectorType'.$i));
    echo 'Selector Value: '.form_input('selectorValue'.$i, set_value('selectorValue'.$i)).'</li>';
}

which produces the following error (hinting towards not having CI functionality in the file):

Fatal error: Using $this when not in object context in /var/www/system/application/views/js/selectorboxes.php on line 2

and if I go the [class]/[function]/[parameter] route in the .open method, this would be the .js file:

Code:

var xmlHttp

function selectorBoxes(str) {
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
          alert ("Your browser does not support AJAX!");
          return;
    }
    var url="personsofinterest/selectorboxes/";
        url=url+str;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function stateChanged() {
    if (xmlHttp.readyState==4) {
        document.getElementById("selList")[removed]=xmlHttp.responseText;
    }
}

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    } catch (e) {
          // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    return xmlHttp;
}

Then I would have the selectorboxes.php taken and placed into a function in the class file. This would be the function in the personsofinterest.php class file:

Code:

function selectorboxes($str) {
        $this->load->helper('form');
        for($i=0; $i<$str; $i++) {
            echo '<li>Selector Type: '.form_dropdown('selectorType'.$i, $selector, set_value('selectorType'.$i));
            echo 'Selector Value: '.form_input('selectorValue'.$i, set_value('selectorValue'.$i)).'</li>';
        }
}

Now when I go this route, it won't call the selectorboxes() function, instead, it will call the index() function implying that it also will not accept CI functionality. Any ideas?

[eluser]srisa[/eluser]
Call your personsofinterest/selectorboxes/ function from the browser to ensure that it is printing out what you expect.
Are you checking if your ajax call has succeeded or failed?

[eluser]Nick Husher[/eluser]
First, I'd suggest that you move to a third-party javascript framework. It insulates you from a lot of the uglier browser workaround logic and lets you get right to coding functionality.

Second, you're calling your controllers directly, which is a non-starter. CI prepares its operating environment through a series of steps before it executes your controller logic. You need to be calling the same URL you would be using for a standard HTTP request.

Try this in one of your controllers:

Code:

<div id="welcome-page-container"></div>
<js>
// requires jQuery 1.2.6+, no .htaccess, and the "welcome.php" controller must still exist.

var hostName = 'http://localhost/'; // set this to whatever the url is to your CI index.php

// make a 'GET' request to http://localhost/index.php/welcome/index
jQuery.get(hostName + 'index.php/welcome/index', function(data) {

   // insert that data into the div with the id "welcome-page-container"
   jQuery('#welcome-page-container').html(data);
});

</js>

(note, I replaced all javascript tags with js, as the tag is picked up by this forum's XSS filter)

To download jQuery, visit the jQuery website.

[eluser]sjmiller85[/eluser]
Awesome, thanks for the advice. I'm browsing over JQuery right now. Looks like this is a better solution in the sense of "need an immediate solution, will worry about how it works later". Thanks much!