8 Replies Latest reply: Jun 29, 2012 5:09 PM by Alec Harf Branched to a new discussion. RSS

    JavaScript include

      Hello,

       

      i have a problem. I want to include another JavaScript in my Extension. In HTML i do this:

       

      <script src="markerwithlabel.js" type="text/javascript"></script>
      <style type="text/css">
         .labels {
           color: black;
           background-color: transparent;
           font-family: "Arial", sans-serif;
           font-size: 15px;
           font-weight:bold;
           text-align: center;
           width: 40px;
           white-space: nowrap;
         }
      </style>
      <script type="text/javascript">
      

       

      Now i want to include the markerwithlabel.js into my Extension script.js.

       

       

      var QVGlobal;
      
      var cssref = document.createElement("link");
      cssref.setAttribute("rel", "stylesheet");
      cssref.setAttribute("type", "text/css");
      cssref.setAttribute("href", qva.Remote + "?public=only&name=Extensions/Finale/styles.css");
      document.getElementsByTagName("head")[0].appendChild(cssref);
      
      
      
      
      Qva.LoadScript ("http://maps.google.com/maps/api/js?sensor=false&callback=initialize");
      
      
      function initialize() {
          Qva.AddExtension('Finale', function() {    
      
          //Write HTML-Page
              var html=""; 
              html+="<div id='map_canvas' style='width:100%; height:100%;'></div>";  
            this.Element.innerHTML = html;
      
           QVGlobal=this; 
      
           mapsLoaded();
      
        },true);
      }
      
      function mapsLoaded(){
      

       

       

      Where I must include the other JavaScript. In my Extension Folder (.qar) i habe the following:

       

      - Definition.xml

      - script.js (the above code)

      - Icon.png

      - Icon2.png

      - Properties.qvpp

      - styles.css

      - markerwithlabel.js (this i want to include in my script.js)

       

      Thank for help

        • JavaScript include

          That work:

           

          Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");

          Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js"); 

            • Re: JavaScript include
              Brian Munz

              It's best to include the file as I listed below in order to ensure that the JS has fully loaded before the extension runs and potentially tries to use JS that is not fully loaded yet.  With the example below it waits until the JS is loaded before proceeding, ensuring all JS will be there despite load speed.    

                • Re: JavaScript include

                  When i do this:

                   

                  Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");

                  Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js"); 

                   

                  Qva.LoadScript ("http://maps.google.com/maps/api/js?sensor=false&callback=initialize");

                   

                   

                  function initialize() {

                   

                  Then it works. But i only have one problem, i have the following code in my html page on my localhost and it works.

                   

                  function codeAddress() {

                      var address = document.getElementById("address").value;

                      var image = 'Kanne.png';

                   

                   

                      alert(address);

                      geocoder.geocode( { 'address': address}, function(results, status) {

                        if (status == google.maps.GeocoderStatus.OK) {

                          map.setZoom(15);

                          map.setCenter(results[0].geometry.location);

                   

                         var marker1 = new MarkerWithLabel({

                         position: results[0].geometry.location,

                         map: map,

                         draggable: false,

                         raiseOnDrag: false,

                         labelContent: "82018",

                         labelAnchor: new google.maps.Point(3, 30),

                         labelClass: "labels", // the CSS class for the label

                         labelInBackground: false,

                         icon:image

                       });

                   

                        }

                   

                  But when i do this in QlikView the image will not be show. Any ideas?

              • Re: JavaScript include
                Brian Munz

                Hi.

                Adding a js file is simple.  You can do so with the following syntax in your example, you just need to include it before you use it in your extension like follows:

                 

                function initialize(){
                     Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js", function() {
                          Qva.AddExtension('Finale', function(){
                               //Begin extension code.
                          });
                     });
                }
                

                 

                The best practice, though would be to do the JS include at the top of your Script.js and initialize the "initialize" function after the js is included.  But this will work too.

                 

                BTW, if you had wanted to add multiple JS files, you can nest them like this:

                 

                Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/markerwithlabel.js", function() {
                     Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/<<some other file>>.js", function() {
                          //initialize extension
                     });
                });
                

                 

                 

                Also, you can more easily add CSS files to your extension with the Qva.LoadCss function:

                 

                Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/styles.css");
                

                 

                Thanks, let me know if this works.

                • Re: JavaScript include
                  Alec Harf

                  Hi guys, Anybody can post a smaple of using JS in QVW?

                  Thxs,