[Resolved] Problems with Toolset and jquery

[Author]

Posts

[Andreas]

Tell us what you are trying to do?
I have a problem with this website. I have added some code weeks ago and it works fine, but since some days it doesn't work anymore.

I have also deactivated all plugins except of Toolset Types, but it still doesn't work. Just when I deactivate my "a-zuchtschau.js" it works, but of course not with my changings...

The problem is:
When I change the date, type or ort (=place) everything is fine, but when I click on save it breaks and the new values won't be saved.
In the console of the browser I don't find any issues and also not in the debug.log

Can you help me to find the problem?

Best Regards

Andreas

Here is the code:
it is enqueued by

"add_action('admin_enqueue_scripts', 'a_admin_enqueue');
function a_admin_enqueue() {
$screen = get_current_screen();
if ( 'post' === $screen->base && 'zuchtschau' === $screen->post_type )
{
wp_enqueue_script('ats_script', get_stylesheet_directory_uri() . '/a-zuchtschau.js','jquery');

}

}
"

and
a-zuchtschau.js contains just the following lines

jQuery(document).ready(function()
{
jQuery("#title").prop('disabled', true);
jQuery("input[name=\"wpcf[pruefung-gesamtergebnis]\"]").prop('disabled', true);

function aktualisiereTitel() {
var ereignisTyp=jQuery("input[name=\"wpcf[pruefung-typ]\"]:checked").val();
var ereignisOrt=jQuery("input[name=\"wpcf[pruefung-ort]\"]").val();
var ereignisDatum=jQuery("input[name=\"wpcf[pruefung-datum][display-only]\"]").val();
var datum = new Date(ereignisDatum);
var tag=datum.getDate();
var monat=datum.getMonth()+1;

if (tag<10)
{
tag="0"+tag;
}
if (monat<10)
{
monat="0"+monat;
}

var jahr=datum.getFullYear();
var ereignisTitel=ereignisTyp + " am " + tag + "." + monat + "." + jahr + " in " + ereignisOrt;

jQuery("#title").prop('disabled', false);
jQuery("#title").val(ereignisTitel);
jQuery("#title-prompt-text").text("");
jQuery("#title").prop('disabled', true);
}

jQuery("input[name=\"wpcf[pruefung-typ]\"]").change(function() {
aktualisiereTitel();
});

jQuery("input[name=\"wpcf[pruefung-datum][display-only]\"]").datepicker({ onSelect: function() {
aktualisiereTitel();
}});

jQuery("input[name=\"wpcf[pruefung-ort]\"]").change(function() {
aktualisiereTitel();
});
});

[Minesh]

Hello. Thank you for contacting the Toolset support.

Based on the description you share, I'm not sure yet what you are trying to achieve or what steps you follow, Please note that this is a custom code and to offer support for such custom edits is beyond the scope of our support policy but still, I would like to review your code and I will see if I can offer any help, if I can.

Can you please share problem URL where I can see the issue as well as access details and what steps I should follow that should lead me to see the issue and what is your expected results.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

have set the next reply to private which means only you and I have access to it.

[Minesh]

I will require FTP access details to troubleshoot your theme files.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

As I understand the issue is, when I try to save the post the the date I selected is not get saved/shown once I publish the post and the date field "Prüfung Datum" shows not date even though we select one. This is the issue - right? If yes:
==>
This is really strange, as I just tested with my test site and the date field just works fine and holds the selected date when I publish/save the post with my test site.

Would you mind to first run a compatibility test:
*** Please make a FULL BACKUP of your database and website.***
Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes? - Do you see any difference? if no:
- if issue persists, I will require your site copy, you can send me duplicator copy of your site.

More info:
=> https://toolset.com/faq/provide-supporters-copy-site/

I have set the next reply to private which means only you and I have access to it.

[Andreas]

Hi,
as written before I've tried: "I have also deactivated all plugins except of Toolset Types, but it still doesn't work. Just when I deactivate my "a-zuchtschau.js" it works, but of course not with my changings..."

just the theme I can't change, 'cause the function is located in my functions.php of my child theme.

But you can find now a brandnew duplicator file... in the dashboard

Best Regards

Andreas

[Minesh]

I checked and the issue with the custom JS code you added for the datepicker field:

jQuery("input[name=\"wpcf[pruefung-datum][display-only]\"]").datepicker({ onSelect: function() {
		 aktualisiereTitel();
		}});

If I comment that out, it works as expected. So, the thing is that when you add the above code, it re-initialize the datepicker and that is why it lost the default value on the edit page.

The only solution I can think is, you should update the title using backend rather updating it using frontend and save the value. Will that work for you?

[Andreas]

Hi Minesh,
I'm just working in the backend.

The JS should fill some fields in the backend form.

But now not one of the functions are working. A short time before everything was fine.
I've deactivated now in "Zuchtschauen" the "aktualisiereTitel();" function , but also the other function "aktualisiereGesamtergebnis();" brings no results.

WHen Im using them, everything is ok, but when O save the new post, the Jquery changings won't be saved.

That is my huge problem. I can't believe that I'M the only customer that want to use toolset for backendforms...

I don't understand what happens and what has changed, 'cause I don't see any errors or error messages

Best Regards

Andreas

[Minesh]

As said, the datepicker element is re-intializaed and with every page load and that is why it does not hold the selected date value.

Yes, Toolset is meant to use on frontend basically and there are a rare cause when user wants such custom things in the backend.

We can build dynamic post title based on your selected custom fields but that means we have to handle that in the backend using the save_post action hook and there will be no JS interactions. Is it OK for you?

[Andreas]

In the moment the functions are working fine, just when I click on publish or update the new content is deleted and the fields are filled with nothing.

It is also with "Zuchtschau Gesamtergebnis". SO there is a prob also with other things than the datepicker element.
All JS changings were deleted when I click on publish or update...

The solution by the save_post hook, I had before, but I want to reach it by JS

[Minesh]

Ok but then as this is a custom JS code you will have to find and debug it as to offer for such custom edits is beyond the scope of our support policy.

The only way I should think of save_post action but as you acknowledged that you had already before and that is why you opt the custom JS solution and when you use custom JS solution, it affects the native datepicker field as you hook datepicker manually that leads to change the native date picker changes. This is the classic example that how custom code have effect with native things with WordPress of plugin updates.

I suggest to go with save_post action to eliminate future conflicts or you will have to adjust the custom code you added as per your requirement.

[Andreas]

but it has nothing to do with the datepicker element.
I've now set the date value in the variable to a fixed value and don't touch anymore the datepicker element, but it doesn't store the set values...

[Minesh]

That is the thing, it will not store the value as you ovverride the datepicker using your custom code. Toolset types store datepicker value as Unix Timestamp, if you remove your custom JS and notice how datepicker is rendered, you will notice that there is a hidden input namely: wpcf[pruefung-datum][datepicker] will be available but once you activate your custom code, the datepicker is overriden.

I suggest you should contact pro JS expert to who should help with your custom code.

[Andreas]

Hi Minesh,
of 'course the field values won't be stored in the datepicker, but the post title won't be stored and also the "gesamtergebnis", THAT I don't understand

[Minesh]

The post title is not get stored because if you try to catch the post data in backend using:

print_r($_POST);

Then, you will notice that the post_title is not available.

I suggest you try to make post title readonly rather making disabled using your JS code and I can see that when I make post title readonly, then I can see it in $_POST and it success fully saved.

jQuery("#title").prop('readonly', true);

Sorry but this is nothing related to Toolset, as its pure custom code and we do not entertain it. I would like to help but as a supporter I will require to work within the defined boundaries.

[Andreas]

ok, I've realised it now.
I've used the jquery-code plus the action hook. So the user see all changings (from jquery) and they will be saved (by the hook via php) 🙂