After a db insert with AJAX, how can I make a div on same page update with inserted info?

I am in the middle of learning jQuery and improving my AJAX, and I am a bit stumped.

I have this page here: http://www.problemio.com

You can use the left hand div to add something to the database. And it does that. What I am not sure how to do is how to show that new information in the right hand div right after the form on the left side is executed. Is it possible?

Thanks!

Here is the code that submits the AJAX request:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    //$("input[type=button]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_probl开发者_StackOverflow中文版em.php",
                data: dataString,
                success: function()
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
//alert ("before false");
        return false;
    });
});
</script>

It works like this:

1. Your ajax function sends data off to the server.

2. The server executes a function in response to the data and optionally returns data to the web page that sent the request.

3. That data is received as an argument to the success function in your ajax call.

4. That success function unpacks the data and updates the DOM of the web page with the new information.

So your server-side function must package and return some data that will be used in your success function to update the web page. This could be actual HTML that the success function could insert into an existing (for example) <div> on your web page, or it could be JSON or XML that parsed by code you write in the success function and use, in pieces, to update the web page.

Without much code I can't give you much specifics on this - but can rough out the idea.

$.post('db-processing.php', {vars: 'whatever'}, function(data) {
// data is whatever db-processing.php writes to the page.
// if you want something to show up as a result - 
// have the db-processing.php echo - "Success / fail or whatever" 
$('#sidebar').html(data);
});

Update Now having seen your code:

$(function() {
$("input[type=submit]").click(function() {
    var name = $("#problem_name").val();
    var problem_blurb = $("#problem_blurb").val();

    var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

    if(name=='' || problem_blurb == '')
    {
        $('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
    {
        $.ajax({
            type: "POST",
            url: "/problems/add_problem.php",
            data: dataString,
            success: function(data)
            {
                $('#results_div').html(data);
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
            }
        });
    }
//alert ("before false");
    return false;
});
});

Still the function(data) - and putting that data somewhere are the important parts.

You should show us your code that submits the ajax request.

I entered a value in your page. The response contained

Problem name: aaaaProblem blurb: wwaa

First, you should return json that looks something like

{name: "aaaa", blurb: "wwaa"}

In the success callback for the request that does the insert, you need to process the response, and then grab a div and stuff the response in there. So if you have a div with id=#container or something like that, you could do

var newDom = "<div>" + response.name + "</div>";
$('#container').html(newDom);

The $('#container') code tells jquery to get the div with the id of container (ids must be unique) and the html(...) part is a way to put new dom inside an element.

what are you getting from the server upon successful form submission?

is it json?

xml?

html?

say for example you have the following ajax call

    $("input.button").click(function(e){
    e.preventDefault(); //prevent the default submission of the form
    //var name=$("#problem_name").val();// get the name input value
    //var desc=$("#problem_blurb").val(); // get the description 
    $.ajax({
    data:{problem_name:name,problem_blurb:desc},
    //other parameters,
    success:function(data){
    //give some id to your right div
    $("#RightDIV").append("<p>Name:"+name+"<p>");
    $("#RightDIV").append("<p>Desc:"+desc+"<p>");
    }
    });
});