jQuery file "Return False" breaking S&F

Anonymous

#58500

Hi,

I’m trying to get the value of selected options in my jquery file to dynamically show/hide content on the page. Here’s my code:

jQuery(document).ready(function() {

var inputbtn = jQuery('.sf-field-submit').children('input');

jQuery(inputbtn).on('click', function() {

	var selectedItem = jQuery('.sf-input-select option:selected').text();

	console.log(selectedItem)

	return false;

})

});

When I remove the return false; for my on.click function, it will only console.log out the first option clicked. After that, if I select another option and press “submit” it will not console.log it.

When I add the return false, it works indefinitely — but it breaks S&F and does no longer display new results in my results.php file.

Any idea what I’m doing wrong here?

Trevor

#58536

No, I think Ross would need to take a look. What is it that you are trying to do?

Anonymous

#59069

I’m trying to display/hide DIVs with text in them depending on the selected option. I need S&F Pro to work because the selected option also needs to pull up relevant posts to that query.

Trevor

#59073

So, what you should be doing is using jQuery to monitor the value of the field and when it changes use the show attribute to reveal a previous hidden div. It would greatly depend on what it is that you are monitoring for changes. Is it a field with a fixed number of options? Or one whose options will be change by the site user from time to time?

Anonymous

#59738

It is a S&F field SELECT box with a set number of OPTIONS…..The options will never change, but the “selected” one will change based on what they select.

I’m trying to grab the value of the selected option when they click on the “submit”.

The classes in S&F are weird which is why you see me grabbing the submit button with my variable “inputbtn”.

So, I think I’m doing what you’re telling me to do, but it doesn’t seem to be working.

Trevor

#59742

Ok, without the return false it works OK but only once?

If so, make you code a function instead and then call THAT with the ready function. Then, use this code to detect if S&F has performed its ajax and call the function you made again?

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your function here again
});

Maybe?

Anonymous

#59744

I’m not really sure what you did there but it seems to work! Thank you sir.

[Author]

Posts