update select box from server ajax??

[esthera]

I have a long form and on the form is a select box with a list of authors.
I would like to be able to put a button next to the sumbit box so if the author does not exist the user can open a new window to add the author, and then after it is adding on closing of the popup to refresh just that select box with the new entry but not to refresh the whole page.

Is this possible?

[russell]

lots of ways to accomplish this, with or without ajax. do u need the new author added to the database b4 adding to select element? if not, pure javascript will get it done. let me know and i'll post back with a code sample to do it.

[so_is_this]

I would like to be able to put a button next to the sumbit box so if the author does not exist the user can open a new window to add the author, and then after it is adding on closing of the popup to refresh just that select box with the new entry but not to refresh the whole page.

Is this possible?
Since you suggest the use of JavaScript (which may be disabled or not available at all), I'll state that this sounds like a simple JavaScript exercise. The popup window would execute code like this (this being a SELECT-to-SELECT transfer):

var sel = document.forms["popupFormName"].elements["popupSelectName"];
top.opener.AddOption(sel.options[sel.selectedIndex].text, sel.options[sel.selectedIndex].value);
and the main window would have this function defined in it:

function AddOption(txt, val)
{
var sel = document.forms["mainFormName"].elements["mainSelectName"];
sel.options[sel.options.length] = new Option(txt, val, false, false);
}

[esthera]

no. the reason javascript won't work is that what i need is next to teh select i'll make a pop up to add an author -- this will use asp to add an author to the database.
I then need to update the select box so it also contains the new author that was just added.

[so_is_this]

The best suggestion I can make, then (considering JavaScript might be disabled or unavailable), is that:

Suggestion #1: The user must refresh the main window after the popup window has done its work to add the author to the database and the user has manually closed the popup window.

However, if JavaScript *is* available and enabled, then:

Suggestion #2: Add the following into the HEAD section of the main window:

<script type="text/JavaScript">
top.name = "MyMainWindow";
</script>
and the following into the FORM tag of the popup widow:

<form ...etc... target="MyMainWindow" onsubmit="
window.setTimeout('self.close()', 2000); return true">
This will allow the popup window to close itself after submitting itself to the main window where the process of submission will allow your ASP code to refresh the content of the main window.

However, there is one final solution which may provide the greatest flexibility:

Suggestion #3: No changes are required to the main window. Just add the following into the FORM tag of the popup window:

<form ...etc... onsubmit="
window.setTimeout('top.opener.location.reload(true);self.close();', 3000);
return true;">
After this form is submitted, this refreshes whatever is in the main window and then closes itself automatically.

[esthera]

can I update just the select box and not the whole window.
the problem is it's part of the form and I imagine the user will have already filled out part of the form.

[so_is_this]

can I update just the select box and not the whole window.
That is what I posted the first time.

[esthera]

no but I need to close the popup and then refresh the select box to pull the new entries from the db.
Plain javascript will not do this.

[so_is_this]

OK, then I guess you need to post your question over in the JavaScript forum for some assistance with using Ajax.

[esthera]

russel -did you say you knew a way? to update the table on the server and then refresh the combo box to reflect the update?

[russell]

ok, here's what u want to do:

Create an IFRAME and embed it in the parent document. Let's call it "addNewAuthor.asp" it can be set to visibilty:hidden via css (or display:none) so as not to break the page flow. also give it a width and height of 1px -- but make it a lot bigger, say 250x250 while testing -- so u can see it if any errors occur.

it should have a form in it:

With Response
.Write "<form method=post action=""addNewAuthor.asp"">" & vbCrLf
.Write "<input type=hidden name=newAuthor>" & vbCrLf
.Write "</form>" & vbCrLf
End With

Now in the parent document, if the button is clicked, JavaScript populates the iframe's form element and submits it. This adds it to the db, then in turn, adds an option to the select element. here's the form in the parent page and the JS

<script>
function addNewAuthor(author) {
document.frames("IFRAME_NAME").newAuthorForm.newAuthor.value = author;
document.frames("IFRAME_NAME").newAuthorForm.submit();
}
</script>

<form>
<select name=authors>
...
</select>

<input type=text name=newAuthor maxlength=50>
<input type=button onclick="addNewAuthor(this.form.newAuthor.value)" value="Add" />
</form>
got it? so they can type in an author and click the button, which essentially passes the value they typed in to the iframe's form then submis it.

ok...what to do in the iframe..have a form (obviously) whose action is itself. if this form is submitted, we insert the value into the db, then update the parent doc. here's what the iframe code might look like (you'll obviously need to modify to match your database schema):

<%
Dim newAuthor

newAuthor = Request.Form("newAuthor")

If len(newAuthor) Then
If addNewAuthor(newAuthor) Then
updateParentSelect newAuthor
End If
End If

writeForm

Sub writeForm()
With Response
.Write "<form name=newAuthorForm method=post action=""addNewAuthor.asp"">" & vbCrLf
.Write "<input type=hidden name=newAuthor>" & vbCrLf
.Write "</form>" & vbCrLf
End With
End Sub

Function addNewAuthor(newAuthor)
Dim sql
Dim cmd

sql = "INSERT INTO YourTable (author) Values('" & newAuthor & "')"
Set cmd = Server.CreateObject("ADODB.Command")

On Error Resume Next
With cmd
.ActiveConnection = YOUR_CONNECTION_STRING
.CommandType = 1
.CommandText = sql

.Execute 128 '' adExecuteNoRecords
End With

addNewAuthor = True

If Err.number <> 0 Then
addNewAuthor = False
Set cmd = Nothing
Err.Clear
End If

On Error Goto 0
End Function

Sub updateParentSelect(newAuthor)
%>
<script><!--
f = window.opener.document.FORM_NAME;
f.SELECT_ELEMENT_NAME.options[f.SELECT_ELEMENT_NAME.options.length] = new Option('<%=newAuthor%>', '<%=newAuthor'%>);
// -->
</script>
<%
End Sub
%>

[russell]

so we basically use simple cross-frame javascript to update forms from one frame to the other. the only twist is that we update the db from the hidden frame (iframe).

so to reiterate, the steps are
1. create hidden iframe with a form whose action is the hidden iframe
2. add a button to parent form, that, when clicked, updates form in iframe
3. submit form in iframe (this doen't affect parent page)
4. iframe updates db
5. if successful (no errors), then iframe executes JS to add new element to parent's select element.

[so_is_this]

russel -did you say you knew a way?
I didn't say I don't know how. I've even written my own Ajax module to handle everything a FORM can do but without submitting a single form. It's just that this whole thing has been about JavaScript from the very beginning -- in spite of us trying to suggest ways to minimize the use of JavaScript (so that your page will still work even when JavaScript is disabled or unavailable). So, I just think you should be asking such questions in the appropriate forum.

For example there's this recent thread in that forum where I turned the light on for a guy over Ajax:

http://www.webdeveloper.com/forum/showthread.php?t=132080