Link to home
Start Free TrialLog in
Avatar of Pete Winter
Pete WinterFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Jquery function not work

See my original code which worked correctly as required...

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


You will notice an if statement. I want to reuse this if statement elsewhere so instead of duplicating code I tried putting it in a function like below...

function getmediafilter() {
	
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
	
}

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				getmediafilter();
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


However in doing this the code no longer works. I am no longer getting a result for the variable "media_filter_brand_value". What am I doing wrong?
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

try declare var media_filter_brand_value outside of functions?

like:

var media_filter_brand_value = "";

function getmediafilter() {
	
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
	
}

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				getmediafilter();
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window

Avatar of Pete Winter

ASKER

Thanks, but that just gives an empty result rather than getting the result from the variable inside the if statement.
All the content is dynamically created in the first place if that makes any difference?
SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Because the elements are dynamically created, I think it is better to pass [$(".media-filter-brand input:checkbox:checked")] as an argument to the [getmediafilter()] function, then return the value accordingly.
Ryan Chong - Thanks your suggestion works, but I have a few if statements. See code below. How can I combine into one function? I tried the below, but it doesn't work?

function getmediafilters() {
	
	function get_media_filter_brand_value() {

		if ($(".media-filter-brand input:checkbox:checked").length > 0) {
			return $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
		}

	}

	function get_media_filter_section_value() {

		if ($(".media-filter-section input:checkbox:checked").length > 0) {
			return $(".media-filter-section input:checkbox:checked").data("media-filter-value");	
		}

	}
	
}

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				getmediafilters();
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


How should I adjust?
Mohammed Tariq - Can you please adapt my code to demonstrate what you mean as I'm unsure?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks Mohammed. That makes sense, but is it possible to get all the variables into a function too so I don't have a long list like...

var media_filter_brand_value = getmediafilter($(".media-filter-brand input:checkbox:checked"));
var media_filter_exampletwo_value = getmediafilter($(".media-filter-exampletwo input:checkbox:checked"));
var media_filter_examplethree_value = getmediafilter($(".media-filter-examplethree input:checkbox:checked"));
var media_filter_examplefour_value = getmediafilter($(".media-filter-examplefour input:checkbox:checked"));
var media_filter_examplefive_value = getmediafilter($(".media-filter-examplefive input:checkbox:checked"));
var media_filter_examplesix_value = getmediafilter($(".media-filter-examplesix input:checkbox:checked"));

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for your help and advice.