www.webdeveloper.com
Results 1 to 13 of 13

Thread: update select box from server ajax??

  1. #1
    Join Date
    Sep 2003
    Posts
    649

    update select box from server ajax??

    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?

  2. #2
    Join Date
    Feb 2003
    Posts
    2,745
    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.

  3. #3
    Join Date
    Oct 2006
    Posts
    1,297
    Quote Originally Posted by esthera
    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):
    Code:
    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:
    Code:
    function AddOption(txt, val)
    {
        var sel = document.forms["mainFormName"].elements["mainSelectName"];
        sel.options[sel.options.length] = new Option(txt, val, false, false);
    }

  4. #4
    Join Date
    Sep 2003
    Posts
    649
    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.

  5. #5
    Join Date
    Oct 2006
    Posts
    1,297
    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:
    HTML Code:
    <script type="text/JavaScript">
    top.name = "MyMainWindow";
    </script>
    and the following into the FORM tag of the popup widow:
    HTML Code:
    <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:
    HTML Code:
    <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.

  6. #6
    Join Date
    Sep 2003
    Posts
    649
    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.

  7. #7
    Join Date
    Oct 2006
    Posts
    1,297
    Quote Originally Posted by esthera
    can I update just the select box and not the whole window.
    That is what I posted the first time.

  8. #8
    Join Date
    Sep 2003
    Posts
    649
    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.

  9. #9
    Join Date
    Oct 2006
    Posts
    1,297
    OK, then I guess you need to post your question over in the JavaScript forum for some assistance with using Ajax.

  10. #10
    Join Date
    Sep 2003
    Posts
    649
    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?

  11. #11
    Join Date
    Feb 2003
    Posts
    2,745
    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:
    Code:
    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
    Code:
    <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):
    Code:
    <%
    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
    %>

  12. #12
    Join Date
    Feb 2003
    Posts
    2,745
    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.

  13. #13
    Join Date
    Oct 2006
    Posts
    1,297
    Quote Originally Posted by esthera
    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/sh...d.php?t=132080
    Last edited by so_is_this; 12-19-2006 at 08:24 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles