Calling controllers from a JS file, possible???

[eluser]boltsabre[/eluser]
Hi everyone, just refactoring my code base and making things more DRY, but I've run into a problem.

I have several forms with CAPTCHAs on them. I have a link, when JS is enabled, dynamically loads a new captcha image (if js disabled it just links to itself forcing a page refresh) via it's ID selector (which is universal in all captcha forms.

Code:

<a id="new_captcha" href="&lt;?php echo base_url();?&gt;p/contact-us">Reload CAPTCHA</a>

I wanted to put in my "main / sitewide" JS file the code that triggers the reloading of the image, which is:

Code:

$('#new_captcha').click(function(event){
        event.preventDefault();
        $(this).prev().attr('src', 'ajax/new_captcha?'+Math.random());
});

Located:
root/assets/js/main.js

Where "ajax" is a base controller in the controller folder, located:
root/application/controllers/ajax.php

And "new_captcha" is the function that creates the new image

Code:

class Ajax extends MY_Controller{

/*
  * This file contains AJAX based functionaliy that is found on more
  * than one page, thus keeping the codebase DRY
*/

public function __construct(){
  parent::__construct();
  
  // If it's not an AJAX request (ie, directly called from the browser
  // then lets get the hell out of here!
  if(!IS_AJAX){
   page_not_found(); //404 generated via "errors_helper.php"
  }
}

/*
  * Reload the CAPTCHA image
*/
public function new_captcha(){
        $this->load->helper(array('captcha', 'file'));
        $captcha = run_captcha();
        $filename = './assets/captcha/' . $captcha['time'] . '.jpg';
        $this->output->set_header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
        $this->output->set_header('Cache-Control: no-cache, no-store, must-revalidate, max-age=0');
        $this->output->set_header('Cache-Control: post-check=0, pre-check=0', FALSE);
        $this->output->set_header('Pragma: no-cache');
        $this->output->set_header('Content-Type: image/jpeg');
        $this->output->set_header('Content-Length: ' . filesize($filename));
        echo read_file($filename);
    }

} // EO Class

But's it's not working anymore... I used to have the above "new_captcha" function in every controller that had a form that had a captcha in it, and the 3 lines of JS inline in each form (thus why I'm trying to refactor it).

I think the problem is this line of JS, and it not being able to locate the controller. It's getting late here, starting to go a little cross eyed, hoping someone can spot what's going on.???

Code:

$(this).prev().attr('src', 'ajax/new_captcha?'+Math.random());

[eluser]boltsabre[/eluser]
Oh dear... that's the problem trying to code at 3am... you miss the obvious. I was missing one slash from my JS code:

Code:

//original
$(this).prev().attr('src', 'ajax/new_captcha?'+Math.random());

//amended with a the missing slash from the url path
$(this).prev().attr('src', '/ajax/new_captcha?'+Math.random());

[eluser]boltsabre[/eluser]
Okay, it turned out that wasn't the whole problem, it was my check if "IS_AJAX" causing a 404 / exit() to be fired because it wasn't actually an ajax call.

Code:

//original check
if(!IS_AJAX){
page_not_found();
}

//amended check, still stops people calling/typing the url direct into the browser
$this->load->library('user_agent');
if(stripos($this->agent->referrer(), base_url()) === false){
page_not_found();
}