Submit a form and reload data on same page

Question

I got a left_column with a #form, when I sumbmit it should load the results on #content_div without refreshing the page.

Im using this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#dateform').submit(function(evt) {
        evt.preventDefault();
        $.ajax({
            url: "charts/client.php",
            type: 'POST',
            data: $(this).serialize(),
            success: function(result) {
                $('#content_div').html(result);
            }
        });
    });
});
</script>
<div id="content_div">

Nothing seems to appear. And firebug reports this:

ReferenceError: google is not defined

This charts/client.php is using google api, and yes i've declared it like this:

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

What am I doing wrong? Thanks

Answer 1

use ajax form

<script>
    // wait for the DOM to be loaded
    $(document).ready(function() 
    {
        // bind 'myForm' and provide a simple callback function
       $("#tempForm").ajaxForm({
       url:'../calling action or servlet',
       type:'post',
       beforeSend:function()
       {
         alert("perform action before making the ajax call like showing soinner image");
       },
       success:function(e){
        alert("data is"+e);
            alert("now do whatever you want with the data");
       }
       });
    });
</script>

you can find the plugin here

Answer 2

It seems that the error you get is from the client.php, not from the actual jquery ajax script.

Probably you tried to call a google method before creating a new instance of the google object you used. I could help you out more if you post the client.php's code here.

For example, when i have worked with gmaps api:

trying to do:

geocoder.geocode( { 'address': target}, function(results, status) {...

before setting :

var geocoder = new google.maps.Geocoder();

will return "google is not defined";