Duplicate Search Bar Issue with Results Page JS Snippet Integration


I have a client who is working to integrate Answers, using a JS snippet, through their CMS provider ExpressionEngine. While testing the integration, the search bar works perfectly but they noticed the results page is showing duplicate search bars as shown in the screenshot below. The client said the snippet was only entered once, but it is still showing double. Any ideas on what could be causing this issue?

Hi DJ,

For context, this integration lives here: https://www.emprisebank.com/answers

I went ahead and opened Chrome Dev Tools and looked at all the javascript files that were loaded by this integration. There’s a javascript file (https://www.emprisebank.com/assets/scripts/script.js?v8=032021) specific to this website that is replacing phone numbers in the html, and adding the HTML back to the page. This will replace the contents of an empty <div id="answers-container"></div> with one that contains the iframe experience as soon as the phone number replace javascript function executes.

The offending code var regex=/\b\d{3}\.\d{3}\.\d{4}\b/g;var text=$("#page-content").html();text=text.replace(regex,"<a class='phone-click no-speedbump' href=\"tel:$&\">$&</a>");$("#page-content").html(text); lives within https://www.emprisebank.com/assets/scripts/script.js?v8=032021. I’d suggest thinking of an alternate approach to replacing phone numbers - perhaps only replacing the code that needs to be updated, rather than the whole body of the page.

To validate that the code above is the issue, you can navigate to the website linked above and copy paste the offending code and running it in the dev tools’ console. This will create 1 more search bar every time it runs.

Here’s is a video of how I diagnosed the issue

Let me know if you have any questions!


1 Like