Login

12-02-2007, 02:14 PM

[eluser]CRHayes[/eluser]
Hey, I am having trouble with getting JQuery to display information obtained from a CI page.

I have really simplified this example trying to get it to work...but here is what I have

test1.php

Code:
&lt;html&gt;

&lt;head&gt;

   $(function(){

    $('select').change(function(){

    $.ajax({

       type: "POST",

       url: "http://www.freelanceselling.com/fls/about/chris",

       data: "",

       success: function(html){

           $("#that").text(html);

           }

    });

    return false

    });

    });

&lt;/head&gt;

&lt;body&gt;

&lt;form name="this"&gt;

<select name="cat">

<option value="one"/>One

<option value="two"/>Two

<option value="three"/>Three

</select>

<div id="that">

</div>

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

Here is the CI controller (about.php - and I am using .htaccess)

Code:
&lt;?php

class About extends Controller {

    function About()

    {

        parent::Controller();

    }

    function index()

    {

        $this->output->set_output("HELLO");

    }

function chris()

{

        $this->output->set_output("HELLO");

}

}

?&gt;

I really don't know why the #that div won't display the output!

12-02-2007, 03:10 PM

[eluser]Crimp[/eluser]
Have a look at your URL /class/method segments. Webkit, if on a Mac, is great for tracking your HTTP requests and responses.

12-02-2007, 04:36 PM

[eluser]CRHayes[/eluser]
I know they are fine. If I visit the URL that I defined in the JQuery function, it returns HELLO. I just don't understand why when the page is loaded by ajax that is not transfered to the 'html' variable and then added to the #that div.

12-02-2007, 05:37 PM

[eluser]gtech[/eluser]
Hi I managed to get it working using the following modifications, note my URL was different (so replacing it with your URL should work).

I tested it using your about controller and created a test controller to load the view with the javascript.. when I made a selection the word HELLO appeared.

To get it working I had to use the onchange function in the select tag to call the javascript function. your jquery call was correct

Code:
&lt;html&gt;

  &lt;head&gt;  

    &lt;script src="&lt;?=base_url();?&gt;js/jquery-latest.pack.js">&lt;/script>

    &lt;script>

      var about=

      {   

        start: function()

        {

          $.ajax({

            type: "POST",

            url: "http://localhost/testcode/index.php/about/chris",

            data: "",

            success: function(html){

              $("#that").text(html);

            }

          });

        }

      }

    &lt;/script>

  &lt;/head&gt;

  &lt;body&gt;

    &lt;form name="this"&gt;

      &lt;select name="cat" onchange="about.start();"&gt;

        <option value="one"/>One

        <option value="two"/>Two

        <option value="three"/>Three

      </select>

      <div id="that">

      </div>

    &lt;/form&gt;

  &lt;/body&gt;

&lt;/html&gt;

12-02-2007, 05:57 PM

[eluser]CRHayes[/eluser]
Thank-you very much, but I also got mine working.

I was an idiot...and I was linking to the JQuery.js file incorrectly. I tested it in the root folder and my code igniter folder, and between the transitions I had changed the name of the JQuery file as well as forgot to change the path to it..lol

Man its hard when you don't get error messages!

12-02-2007, 06:01 PM

[eluser]gtech[/eluser]
glad you got it working! if you are using firefox as a browser (highly recommended over IE), you can download firebug (just type firebug in google).. its great for debugging javascript.

12-02-2007, 06:08 PM

[eluser]CRHayes[/eluser]
Alright sweet thanks! I use both (typical designer...or maybe not lol) but I'm glad there is something out there to make it easier.