Forum Discussion

hroppanen's avatar
hroppanen
Ace
11 years ago

Fire javascript event after search is completed and there is no search results

Is there a way to fire javascript event after user has made search and there is no search results in SearchPage? I would add a possibility to chat if there is no results.

  • hroppanen's avatar
    hroppanen
    11 years ago

    I found a solution. I added the following code to custom component to catch the ajax event, parse the response data and search for the text "No search results found."

    <script>
$(function() {

	/* Part 1. Check if no results when page is loaded  */
	if ($('.InfoMessage p').text() === 'No search results found.') {
		console.log('Show chat');
	}

	/* Part 2. Ajax call event listener */
	var _send = XMLHttpRequest.prototype.send;
	XMLHttpRequest.prototype.send = function() {
		this.addEventListener("readystatechange", function() {
			if(this.readyState == 4){
				var jsonObj = $.parseJSON(this.responseText);
				if (jsonObj.response.components.length !== 0) {
					var code = $(jsonObj.response.components[0].content);
					var resultText = code.find('.InfoMessage p').text();
					if (resultText === 'No search results found.') {
						console.log('Show chat');
					}
				}
			}
		}, false);
	_send.apply(this, arguments);
	}
});
</script>

4 Replies

Sort By
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago
    Yes, you can fire an event using javascript, check for the class search-result-count, which returns the result count, if this is '0', fire your JS event.
  • hroppanen's avatar
    hroppanen
    Ace
    11 years ago

    Thanks for the reply GrazittiI! I also want this to happen after search button is clicked ie after ajax call is made. Any suggestion to that?

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago
    Well, this needs to be brainstormed, but definitely there would be a workaround. Check out what differences appear on the page after the ajax search call is made, there might be some additional parameter or class that gets added which is not in the original request.
  • hroppanen's avatar
    hroppanen
    Ace
    11 years ago

    I found a solution. I added the following code to custom component to catch the ajax event, parse the response data and search for the text "No search results found."

    <script>
$(function() {

	/* Part 1. Check if no results when page is loaded  */
	if ($('.InfoMessage p').text() === 'No search results found.') {
		console.log('Show chat');
	}

	/* Part 2. Ajax call event listener */
	var _send = XMLHttpRequest.prototype.send;
	XMLHttpRequest.prototype.send = function() {
		this.addEventListener("readystatechange", function() {
			if(this.readyState == 4){
				var jsonObj = $.parseJSON(this.responseText);
				if (jsonObj.response.components.length !== 0) {
					var code = $(jsonObj.response.components[0].content);
					var resultText = code.find('.InfoMessage p').text();
					if (resultText === 'No search results found.') {
						console.log('Show chat');
					}
				}
			}
		}, false);
	_send.apply(this, arguments);
	}
});
</script>