Link not working

Newton21205
Newton21205 used Ask the Experts™
on
I have the below code in the xsl file
Link to config does not work.

    <script LANGUAGE="JavaScript" type="text/javascript" nonce="{$vNonce}">
          function ChangeMenu(servlet, type) {
          document.MainForm.disp.value     = 1;
          document.MainForm.abaction.value = type;
          document.MainForm.action         = servlet;
          document.MainForm.submit();
      }
    </script>
    <script type="text/javascript" nonce="{$vNonce}">
          document.addEventListener('DOMContentReady', function () {
              document.getElementById("config").addEventListener('click', ChangeMenu('Admin','config'), false);
            });
    </script>
<a class="clsMenuNormal" href="#" id="config">Config</a>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Shalu M

Commented:
Try this -

 <script language="JavaScript" type="text/javascript"  nonce="{$vNonce}">
        function ChangeMenu(servlet, type) {
            alert('success');
            //document.MainForm.disp.value = 1;
            //document.MainForm.abaction.value = type;
            //document.MainForm.action = servlet;
            //document.MainForm.submit();
        }
 
       function init() {
            document.getElementById("config").addEventListener("click", ChangeMenu('Admin', 'config'));
        }

        window.addEventListener('load', init);

</script>
Newton21205

Author

Commented:
i do get a success alert box when the page loads. But after loading when the link is clicked the link does not work.
# is added to the url and nothing happens
http://localhost:8080/abc/servlet/Admin#
Leonidas Dosas
Distinguished Expert 2017

Commented:
What is the Mainform property? I think you don't declare right the MainForm property.If you post the HTML code of the form I think that we can be more efficient to our answers.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
Newton21205

Author

Commented:
MainForm is the form name. It has multiple links defined using xsl if else.
MainForm calls the menu.xsl <xsl:call-template name="menu"/> template which has the javascript for function ChangeMenu

    <script type="text/javascript" nonce="{$vNonce}" >
          document.addEventListener('DOMContentReady', function () {
              window.document.getElementById("config").addEventListener('click', ChangeMenu('Admin','config'));
            });
    </script>
    <script type="text/javascript" nonce="{$vNonce}" >
          document.addEventListener('DOMContentReady', function () {
              document.getElementById('receipt').addEventListener('click', ChangeMenu('Admin','receipt'));
            });
    </script>

    <body bgcolor="#ffffff" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" rightmargin="0" bottommargin="0">
<xsl:call-template name="menu"/>
      </body></html>
</xsl:template>
<xsl:template name="main">
    <form name="MainForm" action="{$servlet_loc}Admin" method="post">
    <input type="hidden" name="abaction" value=""/>
    <table align="center" width="500">
    <tr><td class="pageTitleFont" valign="middle">Main Menu</td></tr>
    <tr height="5"><td></td></tr>
    <tr><td align="center">
        <table class="tablebox3" align="center" width="{$vWidth}" cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td colspan="6" class="reportheader">Settings</td>
            </tr>
            <tr>
                <td align="center" >
                    <table>
                        <tr align="center">
                                  <td><a href="#" id="config"><img src="{$page_loc}images/details.gif" align="absmiddle" height="75" width="75" border="0"/>Config</a></td>
                        </tr>
                        <tr align="center">
                            <td class="clsMenuNormal"><a class="clsMenuNormal" href="#" id="config">Config</a></td>
                        </tr>
                    </table>
                <td align="center">
                    <xsl:if test="$vRole!='4'">
                    <table>
                        <tr align="center">
                            <td><a href="#" id="emailreceipt"><img src="{$page_loc}images/receipt.gif" align="absmiddle" height="75" width="75" border="0"/>Receipt</a></td>
                        </tr>
                        <tr align="center">
                            <td class="clsMenuNormal"><a class="clsMenuNormal" href="#" id="receipt">Receipt</a></td>
                        </tr>
                    </table>
                    </xsl:if>
                </td>
Distinguished Expert 2017
Commented:
AFter debugging you code I saw he following bugs-mistakes and I suggect these:

1:You use two+two elements with the same id (config-receipt).So when you target the element in your js code via document.getElementBuId you get an array with two key-values.I erase one id=config and one id=receipt element.
2.It's better to use JQuery so in my code you will see a JQuery code that is more handfull for you
3.You are using "DOMContentReady" event listener.There's no DOMContentReady event.You can use DOMContentLoaded.Ι suggest you to use Jquery $(document).ready() function.
4.In your ChangeMenu function you have the document.MainForm.disp.value = 1; statement. The disp returns undefined in my console, but when i wrote  document.MainForm.value = 1; I didn't have error or undefined.
SO...
Add the Jquery library in the head of the document remove the two duplicate anchror elements (or set another id) and at the bottom of your code paste the follow code:

JQuery:

$(document).ready(function(){
function ChangeMenu(servlet, type) {           
  
            document.MainForm.display = 1;
            document.MainForm.abaction.value = type;
            document.MainForm.action = servlet;
            document.MainForm.submit();
        }
 
 $('#config').on('click', function(){  
   ChangeMenu('Admin','config');
 });


$('#receipt').on('click', function(){ 
  ChangeMenu('Admin','receipt');
});
});

Open in new window

Newton21205

Author

Commented:
solution worked

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial