TRACY DOUGLASS replied 2 years ago

thank you. I tried this and it works as long as it has focus. Can I have it disabled immediately on page load? Can't seem to get that to work.

jQuery( document ).ready( function ( $ ) {
$('select[name="item_meta[1764]"]').focus(function(e) { //dropdown field
$('select[name="item_meta[1764]"]').prop("disabled",true);
});
});

Bobby Clapp replied 2 years ago

Remove the focus function:

jQuery( document ).ready( function ( $ ) {
$('select[name="item_meta[1764]"]').prop("disabled",true);
});

TRACY DOUGLASS replied 2 years ago

That won't work and I think I know why, this field is actually a Lookup field with a filter. Could that create the issue?

Bobby Clapp replied 2 years ago

So the field loads in the data the first few seconds then right? How about ajaxcomplete instead?

jQuery( document ).ajaxComplete(function( $ ) {
$('select[name="item_meta[1764]"]').prop("disabled",true);
});

TRACY DOUGLASS replied 2 years ago

Correct, the data loads into the field and the previously chosen value is showing as selected. That ajaxComplete does not work. The field is also in a Section, if that matters, which I don't think it does.

Bobby Clapp replied 2 years ago

Are there any errors with the ajaxComplete in place reported by the browser?

TRACY DOUGLASS replied 2 years ago

yes actually, it says:
Uncaught TypeError: $ is not a function
so I removed the "$" and then it said:

Uncaught TypeError: "select[name="item_meta[1764]"]".prop is not a function

Bobby Clapp replied 2 years ago

Wrong $ probably. Try this:

jQuery( document ).ajaxComplete(function() {
$('select[name="item_meta[1764]"]').prop("disabled",true);
});

TRACY DOUGLASS replied 2 years ago

i put this:
jQuery( document ).ajaxComplete(function() {
$('select[name="item_meta[1764]"]').prop("disabled",true);
});
and the error is:
8
Uncaught TypeError: $ is not a function

FDM Digital replied 2 years ago

WordPress usually runs jQuery in noconflict mode so $ often get ignored. You can try this instead:

jQuery( document ).ajaxComplete(function() {
jQuery('select[name="item_meta[1764]"]').prop("disabled",true);
});

or

jQuery( document ).ajaxComplete(function($) {
$('select[name="item_meta[1764]"]').prop("disabled",true);
});

Bobby Clapp replied 2 years ago

Different themes have handled it differently in my experiences. Good post though FDM.

TRACY DOUGLASS replied 2 years ago

this is a winner!
jQuery( document ).ajaxComplete(function() {
jQuery('select[name="item_meta[1764]"]').prop("disabled",true);
});

thank you all for your efforts and sticking with it. much appreciated.
TracyD.

TRACY DOUGLASS replied 2 years ago

Can you provide any help in running this ajaxComplete function only if a field value = x ? I'm not at all familiar with Ajax. I know how to get field values using the jQuery(document).ready(function($){. So i'd like the final code to be something like, if fielda = x then run ajaxComplete(function). thank you.

Bobby Clapp replied 2 years ago

Just put the ajax complete function inside the document ready function and add some if/else logic.

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

FDM Digital replied 2 years ago

You can do something like this:

jQuery(document).ready(function($){
jQuery( document ).ajaxComplete(function() {
var val1 = jQuery('select[name="item_meta[1764]"]').val();
if (val1 == 'Whatever') {
jQuery('select[name="item_meta[1764]"]').prop("disabled",true);
} else {
jQuery('select[name="item_meta[1764]"]').prop("disabled",false);
}
});
});

But it depends what field value you want to check and WHEN it should be checked. If it's Lookup field value then the if/else statement will need to be inside the ajaxComplete function (as the value won't exist until that's complete) or if it's a regular form field then you can check that value with a change event and then disable the dropdown after the ajaxComplete function has finished.

A bit more info on the details would help 🙂

TRACY DOUGLASS replied 2 years ago

On a front end edit of a previously saved record, I would like a radio field checked for its value, and then run the ajax function depending on that value. This is what I've tried. It does not work. I do not get any errors.

jQuery(document).ready(function($){
var val1 = jQuery('input[name="item_meta[1644]"]').val(); //this is a radio button value
if (val1 == 'Pending') {
jQuery( document ).ajaxComplete(function() {
jQuery('select[name="item_meta[1764]"]').prop("disabled",true);
});
} else {
jQuery( document ).ajaxComplete(function() {
jQuery('select[name="item_meta[1764]"]').prop("disabled",false);
});
};
});

Chris Adams replied 2 years ago

Hi Tracy,

Without a link to the form it's hard to know exactly what the issue might be.

I've created 2 versions of the script above and saved them here: https://www.fdmdigital.co.uk/development/test-page/

One uses a 'setTimeout' function inside the 'ajaxComplete' function to wait 300ms before it tries to apply the disabled property to the dropdown and the other doesn't.

Without seeing the form though it'll be hard to say for sure where the issue is.

Chris

TRACY DOUGLASS replied 2 years ago

Chris,
I used version 2, removed the "$" from the aJax function(), and removed the "change" event trigger and it's working as I need it to, only when the form loads a previously saved record. Here is the working code. thank you VERY much for your response.

WORKING

jQuery(document).ready(function($){
//get the checked radio value for field 1644
var val1 = $("input[name='item_meta[1644]']:checked").val();
console.log(val1);
//check if the radio value is Pending
if (val1 == 'Pending') {
jQuery(document).ajaxComplete(function(){
jQuery('select[name="item_meta[1764]"]').prop("disabled",true);
});
} else {
jQuery(document).ajaxComplete(function(){
jQuery('select[name="item_meta[1764]"]').prop("disabled",false);
});
}
});

Chris Adams replied 2 years ago

Glad it's working the way you need 🙂