Skip to main content
WolfShade
Legend
June 9, 2011
Question

Another bind question

  • June 9, 2011
  • 2 replies
  • 410 views

Another developer I work with has a form that has a few selects, a few checkboxes/radio buttons, and two input text fields for dates.  All of the selects are being dynamically generated from queries.  All but one of the selects will stay the same; one will change depending upon what values are in all of the other elements.

Initially, that one changing select was bound to either @11606534 or @11017538 of all the other fields, so that if anything changed, it's options are re-generated.  But we wanted granular control over form validation (just to make sure the dates are proper format and the second date HAS to be after the first date) so I'm trying to bind the select to a javascript function that will validate the dates - if everything is in order, call the CFC that populates the changing select; otherwise, throw an alert and prevent the event.

So the function is running the SQL statement and returning results, but I just realized that I don't know how to repopulate the options in the one select without reloading the page.  Is there a way to have the options regenerated from JavaScript without reloading the page?

Thanks,

^_^

    This topic has been closed for replies.

    2 replies

    BKBK
    Community Expert
    Community Expert
    June 11, 2011

    WolfShade wrote:

    ... I'm trying to bind the select to a javascript function that will validate the dates - if everything is in order, call the CFC that populates the changing select; otherwise, throw an alert and prevent the event.

    So the function is running the SQL statement and returning results, but I just realized that I don't know how to repopulate the options in the one select without reloading the page.  Is there a way to have the options regenerated from JavaScript without reloading the page?

    You could use cfajaxproxy to create a Javascript proxy of the CFC on the client browser. The documentation on the cfajaxproxy tag offers you a fully worked out example.

    You could then add validation code at the beginning of the asynchronous call to populate the select list. I modified the example in the documentation, using my own customer.cfc in place of employee.cfc, thus

    <cfajaxproxy cfc="myCFCs.customer" jsclassname="customer">
    ...

    ...


              /* Use an asynchronous call to get customers for the drop-down customer list */
                var getCustomers = function(){


                    /******* validation code goes in here *******/


            // create an instance of the proxy
                    var c = new customer();
                    // Setting a callback handler for the proxy automatically makes
                    // the proxy's calls asynchronous.
                    c.setCallbackHandler(populateCustomers);
                    c.setErrorHandler(myErrorHandler);
                    ...
            ...
            etc., etc.
                }
    ...

    ...

    ilssac
    Inspiring
    June 9, 2011

    WolfShade wrote:

    Is there a way to have the options regenerated from JavaScript without reloading the page?

    Of course, in JavaScript the code to READ the value of a form control can generally be reversed to SET a value for the form control.

    I.E.

    aFormControl.value; //reads

    aFormControl.value = "FooBar"; //sets.

    There are differences for different types of controls, i.e. text boxes versus selects versus radio etc.  But they are all easily found with your favorite Internet search engine.