How to load (and bind) partial page in repeat

Submitted by Sherman on Tue, 09/03/2013 - 16:58

I have a basic repeat that is user editable. I need to load a list of counties whenever a state is chosen from a select list in the row. This is not a problem to load, but how do I bind the select in the partial page (county list) back to my repeat record?
Secondly, how do I get the partial page to load for each row during page load so that the previously selected values are displayed?

RE: How to load (and bind) partial page in repeat

Hi Sherman,

WebMaker generally expects each partial page to be loaded in one location on a parent page. If you instead try to load an instance of a partial page into each row of a repeating structure then you will get more issues due to potentially conflicting ids, binding locations, etc.

My initial thoughts would be that the best approach for you would be to add a hidden field to your repeat in the parent page which will be populated with the value of the county selected from the relevant partial page select list. To control where this value gets bound, you would then only need to configure this hidden field in the normal way.

To get these hidden fields correctly populated, I would use some code like below just before the save form submission action.


//loop through all rows in the repeat table
dojo.query('#BasicTable tr').forEach(function(row){

    //find the select field from the partial page
    var ppField = dojo.query('.ppSelect', row)[0];
    //find the hidden field to populate
    var hiddenField = dojo.byId(row.id.substring(0, row.id.indexOf('table_content')) + 'hidden_field')
    if (ppField && hiddenField)
        hiddenField.value = ppField.value;
});

This relies on the select field in the partial page having the +?+?++ppSelect+?+?+? class name attached to it, and assumes a repeat name of +?+?++BasicTable+?+?+?, the contained group being called +?+?++table_content+?+?+?, and the hidden field being called +?+?++hidden_field+?+?+?.
If you have different names, or a different layout structure then you would need to adjust this script accordingly.

To trigger all the partial pages to show on load I would probably hook in to your existing onchange events on the main select list controls. For example, you could use code like the following in a page onload event as long as you have added the +?+?++fpSelect+?+?+? class name to the select control.


dojo.query('.fpSelect').forEach(function(select) {
    if (typeof(select.onchange) == 'function')
        select.onchange();
});

I hope this is helpful.

Regards,
Gerard

RE: How to load (and bind) partial page in repeat

Thanks Gerard,
With your examples I am able to get the correct lists loaded when the table is loaded with previously saved data and the partial page select values are saved as well. The last problem is getting the partial page select list to display the previously saved value for the county. I have tried a number of approaches but to no avail. How can I get the pick list in each row (in the partial page) to display with the previously saved value selected?

RE: How to load (and bind) partial page in repeat

Hi Sherman,

I'm glad you're making progress.

Assuming you have the data available when your main page is rendered, I would probably bind the current 'county' value into the new hidden field that has been added to each repeat entry.
Then you would need to make sure that this value is being submitted along with the selected state value when the partial page is called. Eg make sure they are in the same group, and use this group as the source of the AJAX call.
Hopefully this should be similar to how you are already submitting the selected state values, but let me know if you need more detail.

Once you have the current value available in the data when rendering the partial page, you just need to correctly configure the Field Value binding for the select box in the normal way.

I hope this helps.

Regards,
Gerard