Welcome Guest, Not a member yet? Register   Sign In
CodeIgniter Forums Archived Discussions Archived Development & Programming Ajax quistion
Ajax quistion
  • El Forum
    Guest
  •  
#1
06-03-2010, 04:58 AM

[eluser]Markie577[/eluser]
Hi good people of codeigniter!

I have a ajax related problem.
I want to send a variable to a different page!
but I can't seem to load the other page!

Could someone help me?

This is the code
Code:
<?php
print_r($_POST); // print all the post-ed data. For testing
?>
<html>

    <head>
        <base href="<?=base_url();?>">
        <title>Country City List</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        [removed]
        function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
           document.getElementById("txtResult")[removed]= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}

// Will populate data based on input
function htmlData(url, qStr)
{
       if (url.length==0)
   {
       document.getElementById("txtResult")[removed]="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }

    xmlHttp.open("POST",url,true) ;
  
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", qStr.length);
    xmlHttp.setRequestHeader("Connection", "close");
    
    xmlHttp.onreadystatechange=stateChanged;

    xmlHttp.send(qStr);
}

        
        [removed]
    </head>
    <body>
        <form method="post">
        <!-- Ajax call to city page -->
            <select name="country">
                <option value="#">-Select-</option>
                <option value="India">India</option>
                <option value="USA">USA</option>
            </select>

            <div id="txtResult"> <select name="cityList"><option></option></select> </div>

            
            --&gt;

            &lt;input type="submit" /&gt;
        &lt;/form&gt;

    &lt;/body&gt;
&lt;/html&gt;


And this is the page that should receive it
Code:
&lt;?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

// List of cities for India
if ($_POST['ch'] == 'India') {
   ?&gt;
<select name="cityList">
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Patna">Patna</option>
</select>

&lt;?php
}

// List of cities for USA
if ($_POST['ch'] == 'USA') {
   ?&gt;
<select name="cityList">
<option value="Albama">Albama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Florida">Florida</option>
</select>

&lt;?php

}
?&gt;
  • El Forum
    Guest
  •  
#2
06-03-2010, 06:31 AM

[eluser]Flemming[/eluser]
whatever you're trying to do with AJAX, you will find it much much easier with jQuery! search the web for examples and tutorials - there are plenty (e.g. http://www.ibm.com/developerworks/librar...query.html) and forget they way you are trying to do things currently! Smile
  • El Forum
    Guest
  •  
#3
06-03-2010, 06:34 AM

[eluser]Markie577[/eluser]
[quote author="Flemming" date="1275586313"]whatever you're trying to do with AJAX, you will find it much much easier with jQuery! search the web for examples and tutorials - there are plenty (e.g. http://www.ibm.com/developerworks/librar...query.html) and forget they way you are trying to do things currently! Smile[/quote]

Well it was asked to do it in ajax! I'll look into jquery, but I need to do this in ajax!
  • El Forum
    Guest
  •  
#4
06-03-2010, 06:39 AM

[eluser]Flemming[/eluser]
jQuery will help you simplify the ajax!

http://api.jquery.com/category/ajax/

:-)
  • El Forum
    Guest
  •  
#5
06-03-2010, 06:41 AM

[eluser]Markie577[/eluser]
[quote author="Flemming" date="1275586747"]jQuery will help you simplify the ajax!

http://api.jquery.com/category/ajax/

:-)[/quote]

Yeah i see what you mean! BUT!! this is probably more of a codeigniter(php) problem than a bad ajax script :-)
  • El Forum
    Guest
  •  
#6
06-03-2010, 07:00 AM

[eluser]Flemming[/eluser]
Quote:this is probably more of a codeigniter(php) problem than a bad ajax script

maybe!

Quote:but I can’t seem to load the other page!

what exactly are you trying to achieve? If you can explain it, maybe someone can suggest a simplified way to achieve it. Personally, I don't do any AJAX without jQuery any more - there's no point. So I can't debug your existing code, I could only suggest a neater way to do it ... if I understood exactly what you want to do!
  • El Forum
    Guest
  •  
#7
06-03-2010, 07:02 AM

[eluser]Markie577[/eluser]
[quote author="Flemming" date="1275588043"]maybe!

Quote:but I can’t seem to load the other page!

what exactly are you trying to achieve? If you can explain it, maybe someone can suggest a simplified way to achieve it. Personally, I don't do any AJAX without jQuery any more - there's no point. So I can't debug your existing code, I could only suggest a neater and way to do it ... if I understood exactly what you want to do![/quote]

Basically check the value of 1 checkbox and then fill the second checkbox with appropiate data

Example

USA = Washinton, New-York, Lon Angeles
India= Napu , Mumbai
  • El Forum
    Guest
  •  
#8
06-03-2010, 07:36 AM

[eluser]Flemming[/eluser]
Quote:Basically check the value of 1 checkbox and then fill the second checkbox with appropiate data

ok! with jQuery this will be very easy!

download jquery : http://code.jquery.com/jquery-1.4.2.min.js and save it wherever you save your other js

create a method in your controller like this:

Code:
function cities($country)
{
    switch($country)
    {
        case 'USA':
            $options = '<option>Washington</option><option>New York</option><option>Los Angeles</option>';
            break;
        case 'India':
            $options = '<option>Namp</option><option>Mumbai</option>';
            break;
    }
    
    // prepare the HTML to output
    $output = '<select name="cities" id="cities">';
    $output .= $options;
    $output .= '</select>';
    
    echo $output; // this will be received by your jQuery script
}

try that method out by visiting it with your brower : yoursite.com/your_controller/cities/USA to make sure it doesn't error (none of this code is actually tested!)

Now in the view that contains the country selector:

load the jquery library
Code:
<s c r 1 p t type="text/javascript" src="your_path/js/jquery-1.4.2.min.js"></s c r 1 p t>

you can refer to your country select by ID or class. Let's use ID:

Code:
<select name="country" id="country">
    <option>USA</option>
    <option>India</option>
</select>

&lt;!-- and you will need an empty container to put your AJAX response into --&gt;
<div id="cities_list"></div>

now in the head of your view that contains the country select, do the jquery magic!

Code:
<s c r 1 p t type="text/javascript">
$(document).ready(function(){
    // bind the onchange to a function that will bring in new content
    $('#country').change(function(){
        var country = $('#country').val();
        $.ajax({
            type: "POST",
            url: '/your_controller/cities/' + country + '/',
            cache: false,
            success: function(html){
                $('#cities_list').html(html);
            }
        });
    });
});
</s c r 1 p t>

so when you change the select with an ID of 'country', your jQuery script will make the ajax call to the specified url (/your_controller/cities/country) and receive the output of that method and insert it into the empty div with an ID of 'cities_list'

Like I said, i havent tested this code, it MAY have bugs! (sorry)

I hope it helps you though, see how beautiful AJAX is in codeigniter with jQuery!




Theme © iAndrew 2016 - Forum software by © MyBB