Login

10-05-2009, 11:54 PM

[eluser]boony[/eluser]
Hi All,

I've been trying to get CI & JQUERY to shake hands and just talk to each other. I think I have read just about everything there is on JQUERY & CI but am still having some problems.

Essentially, I have the following code. This put in the head of the view file and then listens for the click function. It should then post to the /controller/method with the given data and callback with an alert.

Code:
function jquery()

    {

        return "

                  $(document).ready(function() {

                       $('#submit').click(function() {

                        var msg = $('#message').val();

                        $.post( '&lt;?=base_url();?&gt;/ajax_message/add/', {message: msg}, function() {

                         alert('data loaded');

                         });

                       });

                });

        ";

    }

But at this stage when submit is clicked nothing happens.

Here is the view..

Code:
<!DOCTYPE html>

&lt;head&gt;

    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

    &lt;title&gt;Test Ajax&lt;/title&gt;

    [removed][removed]

    [removed]google.load("jquery", "1.3.2")[removed]

    [removed]&lt;?=$jquery_test; ?&gt;[removed]

&lt;/head&gt;

&lt;body&gt;

<div id="form">

    &lt;input type="text" id="message" name="message" value=""/&gt;

    &lt;input type="submit" id="submit" name="submit" value="submit" /&gt;

</div>

    <div id="content"></div>

&lt;/body&gt;

&lt;/html&gt;

The removed bits are the calls to the js files. I'm calling the google jsapi libraries direct and load the current jquery (that bit works as it tests ok).

So all in all I guess its a routing problem as it looks like the /controller/method is not receiving the post.

One last thing the site is

localhost/
/ci
/system
/application

Does this throw out the routing??

10-06-2009, 12:35 AM

[eluser]cahva[/eluser]
Have you tried what Firebug has to say? 95% of the javascript problems can be solved by using firebug.

10-06-2009, 12:43 AM

[eluser]boony[/eluser]
[quote author="cahva" date="1254828914"]Have you tried what Firebug has to say? 95% of the javascript problems can be solved by using firebug.[/quote]

Hmmmmmm, clever little bugger that firebug :cheese: Picks up errors pretty darn quick....This be the offending bug...

Code:
The requested URL /ci[b]//[/b]ajax_message/add/ was not found on this server.

Oh and another thing. I found I had to add index as well

Code:
&lt;?=base_url();?&gt;index.php/ajax_message/add/...

10-06-2009, 12:52 AM

[eluser]cahva[/eluser]
Atleast theres an extra / in the address which you can fix by changing this:
<?=base_url();?>/ajax_message/add/'

..to this:

<?=base_url();?>ajax_message/add/'

Test that address straight in your browser to see if it works. The javascript bit is ok, as it trys to make the ajax call to there.

10-06-2009, 02:44 AM

[eluser]Phil Sturgeon[/eluser]
Two things, you should always use:

Quote:<?=site_url('ajax_message/add');?>

over

Quote:<?=base_url();?>index.php/ajax_message/add/

as if you add url suffixes or remove index.php (which at some point you probably will) then this will always work.

Also, why the hell are you writing your jQuery in PHP? Put JavaScript in JavaScript files or at a stretch in your View files.

10-06-2009, 06:45 AM

[eluser]boony[/eluser]

Quote:Also, why the hell are you writing your jQuery in PHP? Put JavaScript in JavaScript files or at a stretch in your View files.

Yesss, I was running some ci & jquery tutorials and this was one method that I saw used. I have seen the error of my ways and do in fact put the js in the view (for the present and will transfer to js files when I've finished testing).

10-06-2009, 05:05 PM

[eluser]boony[/eluser]
Hi All,

still having serious trouble getting ci and ajax working...

Here is the jquery post syntax that sits in the view

Code:
[removed]google.load("jquery", "1.3.2")[removed]

    [removed]

        $(document).ready(function()

        {

            $('#submit').click(function()

            {

                var fname = $('#fname').val();

                var lname = $('#lname').val();

                $.post( '&lt;?=base_url();?&gt;index.php/mapapp/test_ajax', {

                    fname: fname,

                    lname: lname,

                }, function()

                {

                      alert('data loaded');

                });

                return false;

            });

        });    

        $(document).ready(function() {

   $("a").click(function() {

     alert("Hello world!");

   });

 });    

    [removed]

The second click for the "a" link works and returns "Hello World" so I know that the jquery is working.

Here is the function in the controller...

Code:
function test_ajax()

    {

        $data = array();

        if (isset($_POST['fname']))

        {

            $data['name'] = $_POST['fname'] ;

            $this->load->view('testmap01', $data);

        }

    }

When the submit button is pressed the testmap01.php should run but nothing happens. So it has to be the url call. I've used both site_url and base_url but nothing works. Finally, firebug does not record any errors and the source code produces this

Code:
$.post( 'http://www.mysite.com/bws/index.php/mapapp/test_ajax', {

                    fname: fname,

                    lname: lname

I'm completely stumped and hope someone will spot the reason that this is not working. Oh, by the way the whole program works a treat as a basic php program...

10-06-2009, 07:01 PM

[eluser]crikey[/eluser]
I don't know for sure, but maybe the .post data parameters are wrong? Perhaps try enclosing the keys in quotes (as they're the same name as the variables you're using for the values):

Code:
$.post( '&lt;?=base_url();?&gt;index.php/mapapp/test_ajax', {

                    'fname': fname,

                    'lname': lname,

                }, function()

                {

                      alert('data loaded');

                });

Hope that helps.

Grant