CODEWITHSUNDEEP
ajaxcodeigniter
Kurtiss
Kurtiss

Reputation: 525

A simple example of using AJAX with CodeIgniter?

Here I have a simple, working, AJAX example of a webpage that displays data from a text file, without having to refresh the page, through a simple button command.

ajax_test.php

<script>

    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("myDiv").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET", "ajax_info.txt", true);
        xmlhttp.send();
    }

</script>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

I am trying to get this to work in the exact same way, except through CodeIgniter. My pages are displayed using the following coding.

pages.php

<?php 
    // To avoid outside users from accessing this file
    if(!defined('BASEPATH')) exit('No direct script access allowed');

    class Pages extends CI_Controller
    {   
        // Default method if one has not been requested within the URL
        public function view($page = "home")
        {
            if(!file_exists('application/views/pages/'.$page.'.php')) // If the page does not exist
            {
                // Whoops, we don't have a page for that!
                show_404();
            }

            $data["main_url"] = $this->config->item("base_url")."z_my_folders/";
            $data["title"] = ucfirst($page); // Capitalize the first letter

            $this->load->view("templates/header", $data);
            $this->load->view("pages/".$page, $data);
            $this->load->view("templates/footer");
        }
    }

All this does is displays the webpage when the "view" method is called (for example, pages/view/ajax_test) whiles carrying the server's main URL as a string in order to allocate files such as images, CSS, and the jQuery library through the header.

header.php

<html>
    <head>
        <link href="<?php  echo $main_url; ?>design.css" rel="stylesheet" type="text/css">
        <title>Kurtiss' Website - <?php echo $title ?></title>
        <script type="text/javascript" src="<?php echo $main_url; ?>jquery/jquery-1.10.2.min.js"></script>
    </head>

The ajax_test.php file displays in CodeIgniter accordantly, however when the button is pressed, nothing happens. Again, the file works fine when it is not in CodeIgniter, however I am trying to make it so that it can.

I have tried researching it, except all I can find are complex examples where users are connecting to databases, creating complex login forms, registration forms, chat rooms, etc. I just want a simple example like this one that says "Yes, this is AJAX, and it works with CodeIgniter."

Many thanks.

I have edited the code as followed.

xmlhttp.onreadystatechange = function()
{
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
    else
    {
        alert("ERROR");
    }
}

When testing it in CodeIgniter, the alert message pops up four times, so it might have something to do with the xmlhttp.readyState.

Upvotes: 1

Views: 1066

Answers (1)

Kurtiss
Kurtiss

Reputation: 525

Now I know what the problem was; it just couldn't find the text file. In order for it to work, I had to either relocate the text file into the CodeIgniter's main directory, or specify where the text file was located.

Thanks for your help guys.

Upvotes: 1

Related Questions