13 Posts
Sabroso
6 years ago
5
Topic

Hi,

Is there a way to put a Search Form in a module position and then refresh the search results in the main content area using AJAX in order to avoid having to reload the page. Maybe hiding the search result entries ( divs?) that are not relevant to the selections in the Search Form and auto-updating the search results every time any element in the search form is changed.

Has this been done or is anybody working on it?

Any direction on how to achieve this would be appreciated.

Thanks

Get a Book for SEBLOD
5 Posts
mrbwt
6 years ago
0
Level 1

We've used Isotope, a JS library, to implement on-page filtering - http://isotope.metafizzy.co/

Basically, if you create your own list template in Seblod you'll be able to control/code the whole list. Pull in the Isotope library, code the list, using the correct HTML structure and classes, and then setup your filter buttons in the code; Isotope does the rest.

Though for larger lists (not on one page) you might need to combine that with an AJAX call.

The examples on CodePen are really helpful - http://codepen.io/desandro/tag/isotope/

Hope that helps

13 Posts
Sabroso
6 years ago
0
Level 1

Hi,

Thanks for your response and the Isotope suggestion, it looks great.

I'd also be interested in getting some direction about how to make those AJAX calls since I will definitely will have search results that require pagination.

Does it make sense what I suggest? Is it possible/complex? Or is still worth it to keep doing page reloads whenever a database query is required based on the user's filter selection. I can only see advantages on usability by avoiding page reloads but I may be missing some advantages of doing otherwise ( maybe avoid a long a complex development time?)

Thanks for your comments

5 Posts
mrbwt
6 years ago
2
Level 1

The basic AJAX call is pretty simple using jQuery, but putting the whole thing together can be tricky. But if you're happy writing javascript and coding your
own list template then it should be doable - depending on what exactly you want to achieve.

The key to getting the correct search results back from the AJAX call is correctly configuring your search fields in your list type so that it searches on the values passed through in the URL querystring.
Open the search type in Seblod, click 2 to show 'Live + Live Vaule'.
On your search field, change the 'Live' value to 'Variable', then click configure and give the 'Variable' field a value (this is the name used in the query string. For the code below I've used 'cid'). You can search on multple fields, but just remember to add them to the code below.

Here's some example AJAX code edited from some code we've used with a dropdown input as our search field.
Hopefully it's a good starting point, just edit it as needed to work with your HTML form and Seblod list:

function ajaxCall(){

  var $c = jQuery(\'select[data-filter-group="cat"]\').val(); //Value from dropdown, edit as needed

  jQuery('#container').html(''); //clear current items

  jQuery.ajax({
  type: "GET",
  url: "/index.php?option=com_cck&view=list&search=YOUR_SEARCH_TYPE&task=search&format=raw", //URL to your search type, edit
  data: {
  cid:$c //Variable name and value - sent through in querystring
  },
  dataType: "text",
  success: function(data){

  if(jQuery("#container", data).html()){
  jQuery('#container').html(jQuery("#container", data).html()); //Return your results to the page.
  }
  }
  ,
  error: function () {
  alert("Sorry, there was a problem.");
  }
  });
}

jQuery('#filters').on( 'change', 'select', function() { ajaxCall() }); //listen out for any changes to dropdown



Good luck

13 Posts
Sabroso
6 years ago
0
Level 2

Thanks a lot mrbwt!

I'll give it a go and see where I get with it

Cheers

40 Posts
BodgeIT
5 years ago
0
Level 2

I had to modify @mrbwt's code a little to get this to work and as a result have probably dumbed it down.

I did it as an html override to the mod_cck_search module on the default.php.  You could also create an alternative layout for this module.

<script type="text/javascript">
	function ajaxCall() {
		var area = jQuery('#area_codes').val(); // Value from select box, edit as needed
		jQuery.ajax({
			type: 'GET',
			url: '/index.php?option=com_cck&view=list&search=loss_adjusters&task=search&format=raw', //URL to your search type, edit
			data: {
				pac:area //Variable name and value - sent through in querystring
			},
			dataType: 'html',
			success: function(result) {
				jQuery('.search-list-out').html(''); //clear current items
				jQuery('.search-list-out').html( result ); //Return your results to the page.
			},
			error: function () {
				alert("Sorry, there was a problem.");
			}
		});
	}
	jQuery('#area_codes').on('change', function() { ajaxCall() }); //listen out for any changes to dropdown
</script>

It was returning results to page that didn't work for me, so I stripped a little code out there.

I also changed dataType from text to html so that the tags in the result would be evaluated before loading into the DOM.

You will need to add a div to your module layout fro the content to be added into, mine is called .search-list-out

Big thanks to @mrbwt for the leg up.

Get a Book for SEBLOD