JavaScript include

[#1]

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

[#2]

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"); 

[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.

[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.    

[#5]

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?

[Brian_Munz · Accepted solution]

In QlikView, the image also needs to be loaded similar to JS and CSS files with the full path.  So for example, the image path should perhaps be:

var image = '/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Finale/Kanne.png';

[#7]

Thank you, it works! I´m so happy

[#8]

Hello, you have to post the QAR qvw and a sample of your extension?

[alec1982]

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

Thxs,