Gravatar for thomas.kluson@mann-hummel.com

Question by thomas kluson, Jun 1, 2016 9:28 AM

.NET UI and JavaScript

Hello,

we are using the .NET UI and i need to make some DOM manipulations to the search result, whenever the result changes.

I tried this (added to CoveoSearch.ascx):

< script type="text/javascript" >
window.addEventListener("load", myFunction);
function myFunction() {
   ... some DOM manipulation here
}
< /script >

But of course, this does not work properly with .NET. Is there a proper way to achieve this, and if yes, how?

Thank you in advance.

1 Reply
Gravatar for rquirion@coveo.com

Answer by ronald, Jun 1, 2016 11:53 AM

Hi,

Hooking to the page load event is not reliable because of the AJAX framework. When the user performs actions in the search page (e.g. clicking a facet item or on the search button), most of the time, it's a partial postback that to the web server that is executed. From the browser's point of view, it's the same web page that stays loaded. Only the needed parts of the DOM are updated in response to a partial postback.

I would suggest to add the following script block at the end of the ResultsPanel.ascx file of your skin. The code assumes that your MainResultList control ID is "r".

< script runat="server" >
    protected override void OnInit(EventArgs p_Args) {
        r.PreRender += r_PreRender;
        base.OnInit(p_Args);
    }
    private void r_PreRender(object sender, EventArgs e) {
        Coveo.CNL.Web.Ajax.AjaxManager.Current.RegisterInlineScript(r, "alert('DOM manipulation could be done here');");
    }
< /script>

This is working for me. Every time that the list control is updated, the javascript code is executed in the browser.

Hope this helps.

Gravatar for thomas.kluson@mann-hummel.com

Comment by thomas kluson, Jun 2, 2016 1:18 PM

Hi Ronald,

thank you for the explanation and the code. Much appreciated.

The code works, basically. The script code is excuted on initial request as well as on postback. However on inital request it stops at one of my DOM checks:

if(document.getElementsByName("resultDate").length > 0 )

where "resultDate" are table rows (tr). I'll take a closer look and come back to it later …

Ask a question