Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Offline
Support Offline
It's past support hour. We are taking some rest and will come back stronger tomorrow. Promise!
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00
Our current time: Friday 2:19 am
Add a reply View Replies (13)

Resolved Showing selectlist on search page as radio options

  1. wilbert
    wilbert
  2. General
  3. Friday, September 15 2017, 10:56 AM
I like to show the selections of a filed on my search page as seperate options. then the options are visable directly.

How to ?
Responses (13)
admin
admin Accepted Answer
Admin
Sorry can you please explain me better? some screenshot can help me
  1. more than a month ago
  2. General
  3. # 1
wilbert
wilbert Accepted Answer
Pro
See attachments.

The field is a selection field, on the search page you have to select the options by clicking the field,

I like to show all the optiosn directly for the visitors.
  1. more than a month ago
  2. General
  3. # 2
admin
admin Accepted Answer
Admin
Hi,
I can see attachment (probably this forum have blocked it because too big).

Anyway now I have understand, unfortunately this is not possible natively.

To do this you need to add some javascript code that create this, but this require a bit of time and javascript knowledges.
  1. more than a month ago
  2. General
  3. # 3
wilbert
wilbert Accepted Answer
Pro
Oke please send me an example of javascript..
I need this..
  1. more than a month ago
  2. General
  3. # 4
wilbert
wilbert Accepted Answer
Pro
The radio list is not an option, as you cannot select more then one selection?
  1. more than a month ago
  2. General
  3. # 5
admin
admin Accepted Answer
Admin
Oke please send me an example of javascript..
In the next week we will try to provide you some example :)

The radio list is not an option, as you cannot select more then one selection?
It works like "OR" operator.
  1. more than a month ago
  2. General
  3. # 6
wilbert
wilbert Accepted Answer
Pro
Oke I will wait the examples..
  1. more than a month ago
  2. General
  3. # 7
wilbert
wilbert Accepted Answer
Pro
And can you send me some examples.
  1. more than a month ago
  2. General
  3. # 8
wilbert
wilbert Accepted Answer
Pro
Please send me a solutions.
I need to complete this website
  1. more than a month ago
  2. General
  3. # 9
admin
admin Accepted Answer
Admin
Hi,
sorry for this late, keep in mind that we does not support custom code, and this is a courtesy.

Unfortunately we are very busy in these days and as I said this require a bit of time. Please wait, late today or tomorrow we will do this for you :)
  1. more than a month ago
  2. General
  3. # 10
admin
admin Accepted Answer
Admin
Hi,
here an example of javascript code that create a button for each option for a each select:



jQuery(document).ready(function(){

	var check_button_class = 'btn btn-default btn-xs'; // you can customize here

	var check_button_class_active = 'btn-success'; // you can customize here

	jQuery('.jsn_search_module select:not(.gmap_radius_select) + div.chzn-container,.jsn_search select:not(.gmap_radius_select) + div.chzn-container').hide();



	jQuery('.jsn_search_module select:not(.gmap_radius_select) option,.jsn_search select:not(.gmap_radius_select) option').each(function(){

		var self = jQuery(this);

		var active = self.prop('selected');

		self.hide();

		if(self.val().length)

		{

			if(active) self.parent().before('<span class="'+check_button_class+' '+check_button_class_active+'" data-select="'+self.parent().attr('id')+'" data-value="'+self.attr('value')+'">'+self.text()+'</span> ');

			else self.parent().before('<span class="'+check_button_class+'" data-select="'+self.parent().attr('id')+'" data-value="'+self.attr('value')+'">'+self.text()+'</span> ');

		}

	});

	jQuery('.btn[data-select]').each(function(){

		var self = jQuery(this);

		self.click(function(){

			jQuery('[data-select="'+self.attr('data-select')+'"]').removeClass(check_button_class_active);

			console.log(self.attr('data-select'));

			self.toggleClass(check_button_class_active);

			var select = jQuery('#'+self.attr('data-select'));

			select.val(self.attr('data-value')).change();

		});

	});

});
  1. more than a month ago
  2. General
  3. # 11
wilbert
wilbert Accepted Answer
Pro
Where to add this javascript?
  1. more than a month ago
  2. General
  3. # 12
admin
admin Accepted Answer
Admin
normally all templates allow you to add Javascript/CSS code in template parameters or in a custom file. But this depends from your template.

For example for Joomla default template "Protostar" you can create file into /templates/protostar/js/user.js and put this code into this file.
  1. more than a month ago
  2. General
  3. # 13
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.