Wednesday, August 17, 2005

AJAX to submit form in one frame by clicking button of another form in another frame!!

Last week i was working on forms in my web application when I came across the situation where I need to submit form1 in frame1 by clicking button2 in frame2 i.e. by submitting form2 in frame1 i was trying to submit form1 in frame1.

Well someone will say to have button itself in the form1 in frame2, but i came across this situation because the form1 in frame1 is very big where there are 1000 check boxes and if i was putting button on the top ( even if i put it at botton user will need to scroll to the bottom to submit it) during scrolling that disappears and after selecting checkboxes user has to scroll up again. As per usability perspective, I didn't wanted moving button or floating button.

Since I had implemented automatic refresh of the screen using AJAX, i thought lets do this using AJAX which has simplified my problem.

So to transmit form1 in frame1 from form2 in frame2, i simply create XMLHTTP object in javascript's event handler for button2 in form2. This will then makes POST request by passing the list of checkboxes selected by user in form1 in frame1. The post array is examined and the list of checked checkbox values are obtained and further processing is done (in my case, i wanted to create a file at the server and this option is available to privliged user only). It can return also the something as an acknowledgment which can be printed.

In my case, i was creating a xml file which was taking time and my server side processing is done by PHP which is not threaded, so i returned nothing but I was refreshing the page after submit. So I check for the file name in the server, whether it is being created or not. I gave a time limit of 45 seconds to create a file, if file is created show the hyperlinked file name so that user can open the file in the browser or show the error message saying "cudn't create file, please try again" (this can happen when some system call fails to create file).

I will post my code today so that it can be used by anyone in such situation.

No comments: