Prototype Ajax update

Question

I am using AJAX and Prototype. In my code, I need to update the contents of a div.

My div:

<div id="update">
    1. Content_1
</div>

My code:

Element.update($("update"),"2.Content_2");

Expected output:

<div id="update">
    1.Content_1
    2.Content_2
</div>

How can I do this in AJAX and Prototype?

Answer 1

AJAX usually means you are executing a script on the server to get this result.

However, in your example it looks like you simply want to append some text.

To append text you could simply add the text to the end of the innerHTML:

$("update").innerHTML = $("update").innerHTML + "2.Content_2";

If you are wanting to execute a server script, I'd do this: (I haven't used Prototype for a while, things might have changed)

function getResult()
{
    var url = 'theServerScriptURL.php';
    var pars = '';
    var myAjax = new Ajax.Request(
     url, 
     {
      method: 'post', 
      parameters: {}, 
      onComplete: showResult
     });
}

function showResult(originalRequest)
{
    $("update").innerHTML = originalRequest.responseText;
}

This code will call 'theServerScriptURL.php' and display the result in the div with id of 'update'.

Answer 2

Thank you very much ,

I am new to prototype & I was looking for this code for around half a day ...

Thanks again Jon