Skip Navigation

[Résolu] date cred field acts strangely inside

This support ticket is created Il y a 4 années et 6 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 2 réponses, has 2 voix.

Last updated by Ido Angel Il y a 4 années et 6 mois.

Assisted by: Waqar.

Auteur
Publications
#1343861

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

#1344907

Waqar
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1345007

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

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.