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