jQuery-based custom fields

  • Hey David!

    Sorry to harangue you with questions, but after making the Google Calendar processor, I’ve been working on a custom field for picking dates/times off of an instance of FullCalendar.io. I found your github repo for custom fields, which I’ve been using.

    I mostly modeled it after your rangeslider field, and it displays fine, but I’m having trouble getting form data out of the field as a whole. When a user clicks on an event, I’d like to make FullCalendar’s eventClick hook take the event’s id and hand that off to the rest of the form. I noticed that in some of the other fields, you used .on(“change”) to output the form data for rangeslider and datepicker (I think?). But I’m not sure what I should use to output information that’s essentially coming from a div.

    Summary: where/how should I be outputting from a more complicated custom field? Or, what are some ways to make sure my value is getting to the viewer/handler functions?

    Thanks again!

    (edit: I put this as a separate support thread to help future searchers, and to keep the original from going off-topic)

    https://www.ads-software.com/plugins/caldera-forms/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor David Cramer

    (@desertsnowman)

    The on(‘change’) is vital for enabling the conditionals to work since the form is evaluated every time a field is changed. If you have a javascript based field, this is needed.

    Getting data: Use your own hidden fields and let the handler get them from the $_POST or a cleaner way, $transdata[‘data’] global. Look at the reCapture field. It has its own hidden field and should explain it.

    Thread Starter softwarestudent

    (@softwarestudent)

    Aha, that’s exactly what I needed! Hidden fields made this work perfectly, thanks a ton.

    New issues, the further I delve: magic-tag-enabling on config fields. magic-tag-enabled is set as a class on the config variables that need it in config.php. In the CF layout editor, the <\> button shows up when selecting that input, but clicking it doesn’t open the magic tag menu. And even when other magic-tag-enabled fields on the form open the <\> menu, they only display System Tags (like {user:user-login}), not Fields (like %your_name%). The first of these fields I click on displays this error:

    Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

    I’m guessing this issue is related to the HTML Field Bindings support questions that have already been asked. If not, a link to the code is below if you have time to take a look (it’s short!).

    https://github.com/thely/wtsscheduling/tree/master/wp-content/plugins/cf-fullcalendar-io

    Plugin Contributor David Cramer

    (@desertsnowman)

    Well the main reason this is not working is I having implemented binding field values to other fields yet. The %field% tag is only on things that happen after submission. I do intend on making it live bound but the performance is a concern at present.

    If you need to use a value from another field, you can add a field bind in your config like:
    {{{_field slug="config_name" exclude="system"}}}
    Use this instead on an <input…
    This will create a dropdown selector to bind as a field. You’ll then need to retrieve the value in your handler.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘jQuery-based custom fields’ is closed to new replies.