Loading custom HTML with Ajax

If you have created custom HTML with the code editor, you can load it dynamically with an Ajax call. This can be used to e.g. display a box with search tips.

Related articles

• Using the code editor
• Infradox customisation
• Adding custom pages

Loading HTML with Ajax

The normal URL structure for custom 1 through 20 loads an HTML page including script, the HTML head and the HTML body with your custom HTML inserted.

If however you want to just load the HTML exactly as you entered it, then you can use a different URL instead (Flex only). For example: “/custom/5/ajax.html” will load the HTML that you have added in the code editor for custom page 1 (which has id 5). The id’s that you need to use are between brackets in the code editor. E.g. “Custom page 1 (5)”. To load custom 10, use parameter 30 – and so on.

Once you have created your custom HTML, you’ll need to add a JavaScript function to load and handle it. For this example we have an icon in the search box and if you click that icon we want to display a search tips pop up. So first we need to assign a click handler to the icon, its class is “tipsicon”. We can add this to the “client.init()” function – because that’s called when a page loads always.

var client = {
    init() {
        $(".tipsicon").on("click",function(){
            tipspopup.loadtips();
        })
    }
}

Clicking on the icon will now call the function “loadtips” of the “tipspopup” object.
We can now add the object “tipspopup” to the “client script” in the code editor:

var tipspopup = {
    loadtips() {
        var o=this;
        tools.showmaskcallback(function(){
            var div, m=tools.gettopmask();
            div=$("<div id='tipsbox' class='modaldialogbox'></div>").appendTo(m);
            $.get("/custom/5/ajax.html", function(h){
               div.html(h);
               m.find(".modaldialogbox").show();
               $("#tipsbox .close").off("click").on("click",function(){
                   o.closebox();
               });
               m.off("click").on("click",function(){
                   o.closebox();
               });
            })
        });
    },
    
    closebox() {
        var o=this;
        m=tools.gettopmask();
        m.remove();
    }
};

The above example uses the Infradox library function “showmaskcallback” with has a callback function as its parameter. This will display a modal mask and we insert the HTML that we fetch with the Ajax call “$.get()” into it. You will of course need to add CSS to style and position the popup. Because the custom HTML is inserted as a child of the modal mask, we can simply remove the mask to close the popup. Note that you can use the function “tools.gettopmask()” to get the id of the top most mask.