Saving data to the server via ASP/AJAX 1

[AndyInNC]

Hi,

I have an ASP page that brings loads an HTML table with data and needs to allow the user to edit some of the values; it uses AJAX to retrieve the data. The data in the <TD> tags can be edited in a TextArea element. Once the edits are complete, the user can click a Save button to write changes to the database. Then the TextArea element disappears and the data will refresh the <TD> with the new value.

My problem is in saving the data without refreshing the whole page.


The Save button calls update() below:

function update(UniqueID)
    {
        var sUpdateSQL;
        
        sUpdateSQL = "EXEC sp_Table_upd @iExampleID = " + UniqueID;
        
        [green]//The rest needs to happen on the client.[/green]
        
        [!]Can the Save be handled with AJAX from the client?[/!]
        [green]//I can't be sure ADO is loaded on the client's machine, so the rest is dicey.[/green]
        var conn = new ActiveXObject("ADODB.Connection");         
        conn.Open(sConnString);

        conn.Execute(sUpdateSQL);

        conn.Close;
        conn = null;
    }

Thanks for the help.

 

[travisbrown]

Use a javascript AJAX post on your save button to post the value of that textarea (and row id) to a script that updates your database. You are probably already doing something very close if you are updating the cell with the edits onclick. You just need to add a couple lines of js to your existing function to send the data off to get saved.

Something like this (Though it's a lot slicker with jQuery - you could do it in about two lines.) I didn't test this, but it should get you close.

<script type='text/javascript'>
var response = new String();
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

function sndReq(page,target) {
    var remote_http = createRequestObject();
    remote_http.open( 'get', page , true); //get? post?
    remote_http.onreadystatechange = function(){
    if (remote_http.readyState == 4 && ( remote_http.status == 200 || remote_http.status == 500 ) ) {
        var response = remote_http.responseText;
        document.getElementById(target).innerHTML = response;
        remote_http=null;
        }
    };
    remote_http.send(null);
}
</script>
<form>
<textarea id='mytextarea'></textarea>
<input type='button' value='save' onclick='sndReq("/targetpage.asp?" + document.getElementById("mytextarea") + "&id=myid", "mynewtext23")' />
</form>
<table>
<tr><td id='mynewtext23'></td></tr>
</table>

[code]

 

[AndyInNC]

Looks like you spent several minutes on this. Thanks for the help.

In your sendReq function, you use GET instead of POST. So this will pass the new data to my ASP page which will then handle both writing the new data to the DB and getting the new values to be passed back to the client. I was going to split up the two, which seems crazy. Your approach is much better.

I'll be away from that client until the end of the week (in my job, I travel around a lot), but I'm excited about trying this when I get back.

 

[travisbrown]

With a textarea, you might be better sending as a post, but the principle is the same. I really only use get for short data.