[Resolved] date cred field acts strangely inside

[Author]

Posts

[Ido Angel]

hey,

I have a view of cpt "orders" with a table.
Basically the table has about 8 cells in it. each <td> has a form which updates a single cred field from the order (I created a different cred for each field).
I created a button at the end of the table to update all forms in one go, with the code:

  $(".update-all").click(function() {
    $(this).closest('tr').find('.all-submit').trigger('click');
  });

But this creates quite an extreme server load, as each table row has to load 8 different cred forms - and with many table rows, this is very heavy.

So I tried to combine all fields into a single cred form, and with a bit of CSS and HTML tricks - make each appear in a seperate <td>.

My view shows this:

<td>[cred_form form='all-admin-order-edits']</td>

and the cred forms shows this:

[credform]
	[cred_field field='form_messages' class='alert alert-warning']
[cred_field field="order-status" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field='intended-delivery-date' force_type='field' class='form-control' output='bootstrap']</td>
<td>[cred_field field="actual-delivery-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="send-abroad-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="delivery-number" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="return-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="final-status" force_type="field" class="form-control" output="bootstrap"]</td>
<td><div class="edit-note">[types field='general-notes'][/types]</div>
  <div class="pop-note">
    <div class="note-form">
      <div class="note-container">
    <div class="closeform"><i class="far fa-times-circle"></i></div>
    [cred_field field="general-notes" force_type="field" class="form-control" output="bootstrap"]
    [cred_field field='form_submit' output='bootstrap' value='עדכון הערה' class='btn btn-primary btn-lg']
    </div>
    </div>
  </div>
[/credform]

you can see the there's a closing </td> after the first editable field, and an open <td> at the beginning of the last editable field, without closing it, thus creating in combination with the view:

<td>

[credform]
	[cred_field field='form_messages' class='alert alert-warning']
[cred_field field="order-status" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field='intended-delivery-date' force_type='field' class='form-control' output='bootstrap']</td>
<td>[cred_field field="actual-delivery-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="send-abroad-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="delivery-number" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="return-date" force_type="field" class="form-control" output="bootstrap"]</td>
<td>[cred_field field="final-status" force_type="field" class="form-control" output="bootstrap"]</td>
<td><div class="edit-note">[types field='general-notes'][/types]</div>
  <div class="pop-note">
    <div class="note-form">
      <div class="note-container">
    <div class="closeform"><i class="far fa-times-circle"></i></div>
    [cred_field field="general-notes" force_type="field" class="form-control" output="bootstrap"]
    [cred_field field='form_submit' output='bootstrap' value='עדכון הערה' class='btn btn-primary btn-lg']
    </div>
    </div>
  </div>
[/credform]

</td>

the html work fine, and all regular fields work fine - but the date field act strangely: it's missing the ".ui-datepicker-trigger" image, hence doesn't popup the calendar and I can't edit anything.
I tried manually inserting this class to the cred field - but that still did nothing.

Is there anyway around this?

thanks!
Ido

[Waqar]

Hi Ido,

Thank you for waiting.

During troubleshooting, I noticed that the browsers seem to automatically close the form tag when a table cell closes.
( screenshot hidden link )

The same limitation of using Forms and tables together is also discussed in this thread:
https://stackoverflow.com/questions/5967564/form-inside-a-table

To overcome, this you have a couple of options:

1. Drop the use of table structure, and use div with custom classes to achieve the table like row & column structure.

OR

2. Keep the table structure for read only items, but show the form in a single cell ( td tag ) using colspan:

Example:

<td colspan="X">[cred_form form='all-admin-order-edits']</td>

Replace X with the number of parent columns, you'd like this form to cover. As needed, you can start a new child table to show the form's field inside the form too, but make sure that it starts and ends within the form's content i.e. within the [credform] ... [/credform] tags.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Ido Angel]

Thanks, Dear Waqar!
I used the colspan solution - with a bit of css in the form and some jquery (to determine the width of each inner cell - so it corresponds with the above th) - it worked.
<3 <3 <3