Inserting Data With .csv Files
The time has come to add some data to the demo table. This is a bit complicated since the HttpXMLRequest function does not support the FILE input type. So how to keep from having to reload our nice AJAX page? Probably the simplest way is to fall back on older technology and use an iframe. That is what I did here, and it works beautifully. Since the whole thing is done with AJAX, nobody can see our HTML code anyway!
This means another external file for the iframe. Since it's an iframe, it can be a complete HTML document, and can contain links to the same css files as are used by the main module. The script is set up to move the uploaded .csv file to a given folder where the rest of your database insertion code can find it.
Once the .csv file has been uploaded, either enter the name of a new client or select an existing one. You can also choose whether to add to the existing client's data or delete his data and insert the new data. A third external file is needed to process this request, and a fourth AJAX function.
function uploadNew() {
var url = '../assets/modules/database3/insertcsv.php';
var sx=document.getElementsByName('options');
for(var j=0;j<sx.length;j++){
if(sx[j].checked==true){
var s=sx[j].value;
break
}
}
var pars = 'newclient=' + $('newClient').value +
'&oldclient=' + $('oldClient').value +
'&options=' + s;
var myAjax = new Ajax.Updater( 'ajaxContainer', url,
{method: 'get', parameters: pars});
}
This one is a little more complex, because getting the value of the different form fields to pass to the remote script is more complicated. We are passing three values this time, "newclient", "oldclient" and "options". Each extra value begins with an &, just like adding key-value pairs to the URL. Otherwise, this request is the same. It will send the parameters to the script you specify in the url and load the response into the ajaxContainer div.
Download the files used for this article.