CodeIgniter Forums

Full Version: Using Ajax
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

El Forum

[eluser]archielles[/eluser]
Im newbie to CI, at start, I already face version issue with PHP 5.3 (deprecated and dash things).

Anyway, normally I will have html main page with import script (xhr.js etc), button onClick=addCart(param1, param2) and div area to appear for ajax later.

After click, it will trigger and call addCart() function in my javascript file.

My javascript file has xhr post send request with call back function, and receive server response (.responseText) from php (anything that is echoed will be passed to .responseText).

My session session variable array and loop are done at that php.

Normally I take only string (including html string) and pass it via getElementById() innerHTML to div in my html main page.

My jobs now to change all this to MVC style using CI.

I have watched the tutorial and I can basically only use simple controller and view to display simple html page.

Please give me a guidance on this.

El Forum

[eluser]davidbehler[/eluser]
What exactly do you want to know? How to use AJAX with CI? How to include JS files?

Including JS files:
Code:
//put this in the head of your html file - in the view that contains the head of your page
{script src="<?php echo base_url().'path/to/file.js'; ?>" type="text/javascript" }{/script}

AJAX:
Code:
//using Prototype framework
new Ajax.Request('http://www.exampl.com/index.php/controller/function/parameter/');
//or define a variable that contains your site_url
var site_url = <?php echo site_url(); ?>
new Ajax.Request(site_url + '/controller/function/parameter/');

El Forum

[eluser]archielles[/eluser]
Using ajax. How it is different from traditional ajax call. (parameter, .php file to call, take response from php that is echoed, location to place those response in div).

El Forum

[eluser]davidbehler[/eluser]
The only thing that changes is the url. Instead of pointing to a php file, you point to the controller/function that will process your ajax call and return a response that you can use to update a div or whatever you want.

El Forum

[eluser]archielles[/eluser]
Do I have to use JQuery? Most tutorial use that. Do you know any some more tutorials for this? Hopefully it will make sense for me and confidence to try after few more tuts. Thanks.

El Forum

[eluser]davidbehler[/eluser]
You can use whatever you want. CI is only a PHP framework and restrictions for certain JS frameworks.

I prefer Prototype over JQuery but only because I've worked more with it and had no time to really dig into JQuery. Both works fine with CI.

El Forum

[eluser]archielles[/eluser]
[quote author="waldmeister" date="1250855020"]
Including JS files:
Code:
//put this in the head of your html file - in the view that contains the head of your page
{script src="<?php echo base_url().'path/to/file.js'; ?>" type="text/javascript" }{/script}

From here on, above code is placed in html or presentation view files right? just like how I normally import js script in the heading section.

Code:
{script type="text/javascript" src="xhr.js"}{/script}

and has:

Code:
// file asesInput.js
// using POST method
var xhr = createRequest();
function inputData(aTicketNum)
{
        
        if(xhr)
        {
            var requestbody ="numOfTicket="+encodeURIComponent(aTicketNum)+"&memberID;="+encodeURIComponent(holdID);
            xhr.open("POST", "asesInputData.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function()
            {
                
                if (xhr.readyState == 4 && xhr.status == 200)
                {
                    
                    var serverText = xhr.responseText;
                    if(serverText.indexOf('|'!=-1))
                    {
                        
                        element=serverText.split('|');
                        document.getElementById(element[0]),innerHTML= element[1];
                        if(element[2]!=null)
                        {
                        alert(element[2]);
                        }    
                    }
                        
                }
            }
            
            xhr.send(requestbody);
            
        }
            
}
With this, it can work just like normally it would. Data manipulation is done in asesInputData.php and anything that is echoed will be returned to javascript in xhr.responseText.

Your ajax framework that you showed me is shorter but where should I put that? in controller or view? it seems I have to change alot of structure here?

Since controller can load view and display it as like html page, it also load javascript specified in that file. Do I need to use different way to call ajax although it work just fine? or contradict with MVC structure?