Remove line of text boxes with display:none; in XMMobile website

How Can We Help?

< Back

When using browse pages as  standard practice a text box is often used to hold the ID of the item being selected. The ID is often requested to not be displayed to the end user.

Browse pages cannot pass values to form fields that are invisible as the field does not actually render on the page, so we need to hide the field by removing any caption and then changing the style of the field to “display:none;”.

The display:none; text box is rendered as a line within the XMMobile Website, this happens because the parent <div> element is not hidden when the text box is (this is due to the use of JQuery and the styling of the controls being applied), to address this we need to add some JavaScript to hide the parent control of the already hidden control.

To achieve this:

Step 1: Ensure the custom.js file is created in the “…/XMMobile/scripts/custom/” folder.

Step 2: Copy the following jquery code into the custom.js file:

$(document).on(“pageshow”, function (e) {

                 $(“input:text”).each(function(){

                                if ($(this).attr(‘style’) != undefined)

                                {

                                                if ($(this).attr(‘style’).indexOf(“display:none”) != -1)

                                                {

                                                                $( this ).parent( “.ui-mini” ).hide();

                                                }             

                                }

                });

});

Step 3: Refresh you site and the changes should take place. If not delete your cached and temporary internet files.

Comments are closed.

This is the legacy version of the XMPro Documentation site. For the latest XMPro documentation, please visit documentation.xmpro.com

X