Updating a Spry Dataset from a Popup

Last week I posted a method of using multi-related selects with Spry and ColdFusion. In my example I updated a subbrands dataset when a brand select was updated. I implemented a similar process at work and decided that it would be nice to offer the option of adding new subbrands from the data entry form. To do so, I placed an ‘add’ button next to the subbrands select which opens a popup where the user can add a new subbrand. Then came the question, how do I update the dataset on the parent window once the new subbrand is added.

It actually ended up being quite easy.

The original code for defining the Spry datasets looked like this:




Once the subbrands for a particular brand were read in, however, they would no longer updated. To force an update I just had to add a little code and a function to the subbrands definition:


var dsSubbrands = new Spry.Data.XMLDataSet("xmlSubbrands.cfm?brand_id={dsBrands::brand_id}",
"subbrands/subbrand",{useCache:false});
function refreshSubbrands()  {dsSubbrands.url="xmlSubbrands.cfm?brand_id={dsBrands::brand_id}&cachebuster=#Now()#";
dsSubbrands.loadData();}

The first thing I do is disable the cache. Then I define a function that will redefine and reload the dsSubbrands dataset. I added in the date and time to the URL to further prevent XML caching. That’s all the code required to update the select list.

The only thing left to do from here is to get the popup to execute the function. This is accomplished by adding the following code after the insert is completed:




window.opener is a reference to the window that opened the current window. The reason I check whether the referencing page exists is so that the add subbrand form can also be used as a normal page outside of the form that calls it as a popup. refreshSubbrands is the function I created to reload the subbrands select. In this way, the select list is updated as soon as the update is completed. No refresh is necessary, even if the parent brand is already selected.

Credit Where Credit Is Due
I found the guts of this technique on Andrew Powell’s ColdFusion, Mach-II, Flex, and Spry Blog where he has a great example demonstrating how to page through a set of data in 10 record increments.

-rG

13 thoughts on “Updating a Spry Dataset from a Popup

  1. God dang it. I was going to do a demo of this too. I just never found the time. 😉 The only difference is that I used a hidden form. You would click a ‘Add Foo’ link and the form would expand in place to let you add the data in. I tend to avoid popups when I can.

  2. Hi Ray,

    I wish you had done it earlier because it took me a while to figure out!

    You’re right about avoiding popups. A combination of being curious about how it would be done from a separate window, and a little bit laziness, made me do it.

    -rG

  3. nice post, rG!

    After reloading the XML is there a way to define which row in the dataset is selected? I’ve tried mydataset.setCurrentRow(myrow) but it only seems to work before the loadData() call, not after.

    It must be pretty simple but I’m getting nowhere fast!

  4. I definitely wouldn’t say it was simple. This has certainly been a learning process for me. 🙂

    I’ve re-coded a lot of my initial js since my last post on Spry to get the set refreshed properly when it needed to be. I’ll probably write a new post on it soon but I think I can help you out in the meantime.

    I found that the key to synchronizing the multi-related selects properly whether adding or editing is to define a js function that gets called whenever the parent select is updated. For example, when my brands select is updated I call a function similar to this:

    function refreshSubbrands() {
    dsSubbrands.url=”subbrands.cfm?brandID=”+document.forms[‘FORMNAME’].elements[‘brandID’].value;
    dsSubbrands.loadData();
    }

    That function reloads the child dataset based on a new parent value then updates the select. I call this at the end of my dsBrands onChange event.

    You also have to modify your child select options so the spry:ifs read

    “‘{spry_dataset_ID_Column}’ == ‘#selected_Row_ID#'”

    where selected_row_id is equal to the row id you want selected. So, when the select is updated, if the your row id is equal to a row id in your spry dataset, that option should be selected when the refresh function reloads the list.

    Hope that helps,
    -rG

  5. Thanks, rG.

    I’m doing some pretty weird stuff on the page which might be making it harder for me to get my head around this. I’ll let you know if I figure it out.

  6. Couple of things that were tripping me up:

    1) spry:selectgroup in conjunction with spry:select allows you to have multiple sets of selections on the page… which was driving me nuts

    2) Spry.Data.updateRegion(‘dataset’), the dataset must be in quotes… also was driving me nuts.

    Also spry:setrow=”dataset” is a pretty nice way to replace onclick events.

    Now I have masterlist > sublist > sublistdetail. Masterlist and sublist selections work nicely and appear selected when clicked. I also used some code from Tim Mushen’s Media Manager (http://www.exceptionalitservices.com/media/ – thank you, Tim!) to enable add / edit and deletes from the sublist. It’s working really well now!

  7. Hi there…. nice post.

    Just found this off Google. Been looking for different Spry stuff…

    I’m happy I’ve found this!

    😉

  8. i have something like this but Im using Spry.Widget.HTMLPanel to load in a textarea comment box. Everything works fine, but I want the HTML panel to close or just go away after the form is submitted. Having trouble finding a way to do this. thoughts?

  9. i am loading dataset dynamically from an xml string…it loads for 1st time properly and shows the results on the form and thn nxt time it loads with new data but displays old data on the form..can any help please

  10. I’m trying to add a printer-friendly functionality whereby clicking print button opens a new window and displays the same spry dataset, formatted in a more printer-friendly manner of course. Can the new page call the same dataset out of cache somehow, or would I need to repeat all the spry datasource configuration on the new page.

Comments are closed.