Event not firing (JQuery with XSLT)

Event not firing (JQuery with XSLT)

Hello,

I'm trying to integrate JQuery with XSLT and it's not working as intended here is my xsl:

  1. <?xml version="1.0" encoding="UTF-8"?>

     

    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

           version="1.0">

    <xsl:output method="html" version="1.0" encoding="UTF-8"

                  indent="yes" />

    <xsl:include href="include.xsl" />

    <xsl:template match="/">

    <html>

    <xsl:call-template name="header" />

    <body>

    <div class="jumbotron text-center">

    <h1>My First Bootstrap Page</h1>

    <p>Resize this responsive page to see the effect!</p>

    </div>

    <div class="container">

    <div class="row">

    <div class="col-lg-4">

                  <h3>Column 1</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris...</p>

    </div>

    </div>

    </div>

     

    </body>

    </html>

    </xsl:template></xsl:stylesheet>

basically an xsl file with no data coming from backend (for testing purposes I removed all data from BE). include.xsl contains the "header" template.

Code snippet of include.xsl

  1. <?xml version="1.0"?>

    <xsl:stylesheet version="1.0"

           xmlns="http://www.w3.org/TR/xhtml1/strict" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template name="header">

    <head>

     

    <meta charset="utf-8"></meta>

    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

     

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"></link>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">

    </script>

    <script language="javascript" src="http://code.jquery.com/jquery-1.10.2.js">

    </script>

    <script language="javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script language="javascript" src="web/js/test.js"></script>

    <title>

    sample

    </title>

    </head>

    </xsl:template>

    </xsl:stylesheet>

     


here is the code inside "test.js"

  1. test.js

    /**

     *

     */

     

    $(document).ready(function(){

           alert("test");

           setTimeout(function(){

                  alert("bind");

                  $("body").on('click', function(){

                         alert("test");

                  });

           }, 5000);

          

          

     

    });


So what I imagined that would happen is that "test" alert would be triggered as soon as the page loads and after the 5 seconds the alert shows "bind" and also, everywhere I would click on the page the alert "test" should show up. 

1.) alert "test"
2.) after 5 secs alert "bind"
3.) clicking anywhere would trigger the alert "test"

now, only 1 and 2 is happening. I already added this line of code:  < xsl:output  method="html" version="1.0" encoding="UTF-8"

              indent="yes" /> to ensure that the output is in html format.



P.S. Even the resizing of columns by bootstrap is not working so I'm thinking maybe this is somehow related to how I import the scripts??