How to disable dropdown based on selection from another

Anonymous

#37093

Hi, how can I disable a dropdown after selecting any value from another?

Ross Moderator

#37149

There is no option in S&F, so in this case you would have to resort to looking at the way you would do it with any website – using javascript/jQuery.

So…

1) Detect when something is changed – http://stackoverflow.com/questions/19528531/detect-with-jquery-when-a-select-changes
2) Disabled dropdown – http://stackoverflow.com/questions/10570070/how-to-disable-enable-select-field-using-jquery

Thanks

Anonymous

#37190

yes I’ve tried something like this

(function($) {
        var disableselect = function(){
            if ($('select[name="price"]').val()) {
                $('select[name="part"]').prop('disabled', true);
            };
            if ($('select[name="part"]').val()) {
                $('select[name="price"]').prop('disabled', true);
            };
        }
        $(document).ready(disableselect);
        $(document).on("sf:ajaxfinish", ".searchandfilter", disableselect);
    })(jQuery);

and it works when you refresh page, but I need it to work on “ajaxfinish”. Am I using it properly? Is there any event after ajaxfinish? I can see it’s disabled for a moment but then enabled again.
Any idea? Sorry, I know this is not very S&F question anymore 🙂

Anonymous

#37206

Tried to debug with SEARCH_FILTER_DEBUG and I found what is causing my problem,

	enableInputs: function($form){
		var self = this;
		
		$form.$fields.each(function(){
			
			var $inputs = $(this).find("input, select, .meta-slider");
			// $inputs.prop("disabled", true);
			// $inputs.removeAttr("disabled");
			$inputs.trigger("chosen:updated");			
		});
		
		
	},

search-filter-build.js:line 3444 to 3456, if I comment these two lines everything works fine. I guess this will not break S&F functionality. Is there more elegant solution to this?

Ross Moderator

#37212

Riiight I think I know what is going on.

Whenever a search is performed, the search form is also reloaded.

Before its reloaded, its set to disabled to prevent user interaction, and indicate that loading is taking place.

Then the new form get added and updated.

The Ajax finish function is fired after the results are loaded, I have a suspicion, this is not after the form has finished updating.

Let me have a look into it! 🙂

Ross Moderator

#37216

Yup, my suspicions were correct – I’ve just emailed you a fix 🙂

Thanks

Anonymous

#37226

It works, thank you

[Author]

Posts