Jump to content
  • 0
AElkhouly

Updating Data inside dropdown

Question

Hi, so I have a datapage that has a dropdown for countries, provinces, and cities. each of these dropdowns are collecting data from individual tables. beside the country dropdown I added a plus icon to give the client the option to add a country if it is not on the list. the plus sign is pointing to another datapage. That all works, my problem is when the client adds another country, and closes the pop up window, it doesn't show in the dropdown. So I am looking for a solution to refresh this particular dropdown without having to refresh the whole datapage and loose all data entered already. Any solutions?  

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Base all of your dropdowns on a lookup table

This technique requires using a lookup table as the base reference for your dropdowns. Lookup table based dropdowns have several advantages over using custom values. If you do not currently use a lookup table you can find steps to create one here.

Create a Submission Form to your lookup table

First, we are going to create a Submission Form DataPage so users can submit new records directly to the lookup table.

  • Click New DataPage. By default, the cursor selects Submission Form as the first DataPage type. Click Next.

  • Select your lookup table as the data source. Click Next.

  • You can select which fields to be used in your submission form. To select fields, move the fields from the Available Fields list to the Selected Fields list. Because you are submitting to a lookup table, it is likely that there will only be one (or very few) fields. Click Next.

  • Format the Field as needed, Go to the Advanced Tab and check “on exit to pass field value as parameter”. Note the parameter name as you will use that name in your Javascript. Click Next again.

  • Now on the last page, replace the success message with a JavaScript. This JavaScript will close the popup window and the new dropdown items will be visible. Go to the Source mode and insert the following JavaScript into the message panel:

 

<script>

window.close();

//Replace the FieldName with the Submission form FieldName(parameter name passed when you checked “on exit”.

var element_value='[@InsertRecordFieldName]'

var new_item = window.opener.document.createElement("option");

new_item.text=element_value;

new_item.value=element_value;

// Add new item to the dropdown

 try

{

//Replace the FieldName with the Original DataPage dropdown FieldName

window.opener.document.getElementById("InsertRecordFieldName").options.add(new_item, null);

}

catch(ex)

{

//Replace the FieldName with the Original DataPage dropdown FieldName

window.opener.document.getElementById("InsertRecordFieldName").options.add(new_item);

}

</script>

  • Click Finish to Save Your DataPage.

Deploy Submission Form

1. Select the Submission Form again and click the Deploy button. In order for the script to work, both DataPages must be embedded in webpages with the same domain name. You can make an empty webpage containing only the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<body>

CASPIO DEPLOY CODE

</body>

</html>

2. Replace "CASPIO DEPLOY CODE" with the deploy code of your submission form. If your original form is deployed using the URL deployment method you can deploy the submission form using the same method.

3. Copy the URL of the submission form and save it for use in the next step.

Create a link in your original DataPage

Now in your original form, you add a link that will display a popup window containing the Submission Form from the previous step.

  1. Select the DataPage where you would like to add the link and open the DataPage Wizard by clicking Edit. On the second screen be sure to enable advanced options.

 

  1. Proceed to the Configure Fields screen. Using the Insert button at the lower right of the DataPage Elements panel, add an HTML block. Go to the Source mode and insert the following link code into the HTML panel:

<a onclick="window.open('DataPageURL','popup','width=307,height=341,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Add Option</a>

  1. Replace the DataPage URL portion with the URL of the first Submission Form. Update the other options in this hyperlink as needed.

  2. To move the link to the same line as the dropdown, select the dropdown DataPage element and go to the Advanced tab. Click the Checkbox for Continue next element on same line.

  3. Click Finish to save your DataPage

 

 

 

 

Share this post


Link to post
Share on other sites
  • 0

This is surely an advanced version of tried https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/automatically-add-options-to-dropdowns-and-listboxes.

Is it possible to do almost the same thing based on a report page for the lookup table?

I have a lookup table with contact persons per institution. if the submitter selects an institution and the dropdown for the contacts does not list the perosn they want to associate with the current project. I would like the submitter to be able to add a new contact OR reactivate a contact, hence my attempt to base the lookup addition on a report (listing contacts for the institution) instead of a blank submission form.

Share this post


Link to post
Share on other sites
  • 0

Hi MayMusic, 

Thanks for posting the script for updating a dropdown without refreshing the whole page.  That's a key thing for a smooth UI. 

I need to use this method to update a multi-select Listbox field (instead of a drop down field) and I can't get it to work.  I tried using getElementsByName("InsertRecordFieldName")[0] instead of getElementById("InsertRecordFieldName") but it's not refreshing the field listbox.  Any idea how to target a Listbox for refresh in this scenario? 

EDIT: actually, I did get this to work using getElementsByName("InsertRecordFieldName")[0] . What was missing was I needed to use the parameter from the popup in the OnLoad in the Listbox field. Works great now- thanks for posting that javascript, really helpful.

Edited by DesiLogi
found out code works as posted

Share this post


Link to post
Share on other sites
  • 0

Here's an additional issue related to this thread. What if the drop down is set to use 'store' a uniqueID value (integer) but 'display' a text value? The above code only seems to work when the dropdown is set to 'store' and 'display' the same field. Does anyone know how to put, from the popup form that populates the dropdown lookup, the UniqueID (integer) value in the 'store' sections but 'display' a different text field? 

I made a separate thread for this here: 

but since it's related to this thread I wanted to connect it.  

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...