createCube, selection & jQuery show()/hide()

[pentaxadmin]

Here is my problem:

I create a hyperCube in my JS and then I call to display html page and its content based in div tag id. My id is a variable and should only display section of html that matches with selected ReportID, everything works as intended, except for when I change the variable (ReportID) both sections are displayed. How do I close previous session and keep only current session open? Dims are loaded as LOAD * INLINE in my Qlik Sense script to reference different reports.

I can't figure out what am I missing. I did some research on jQuery hide() & show(), but was not successful to make it work.

Thanks for the input.

HTML:

.....

<div id="RQ1" style="display: none" class="container">

    <div class="row">

          <div data-qvid="QVID1" class="col-xs-12 qvobject"></div>

      </div>

</div>

<div id="RQ2" style="display: none" class="container">

    <div class="row">

          <div data-qvid="QVID2" class="col-xs-12 qvobject"></div>

    </div>

</div>

JS:

app.createCube({

qDimensions : [{

qDef : {

qFieldDefs : ["SheetID"]

}

}, {

qDef : {

qFieldDefs : ["BookmarkID"]

}

}, {

qDef : {

qFieldDefs : ["ReportID"]

}

}],

qMeasures : [{

qDef : {

qDef : "1"

}

}],

qInitialDataFetch : [{

qTop : 0,

qLeft : 0,

qHeight : 20,

qWidth : 3

}]

},

// Apply 'reply' to qHyperCube and set button to load specific sheet --------------------------------------------------------

function(reply){

$('#enter_btn').click(function(){

var sheet ="";

$.each(reply.qHyperCube.qDataPages[0].qMatrix, function(key, value) {

sheet += 'https://<server_name>/sense/app/' + webApp + '/sheet/' + value[0].qText;

});

$('#iframeHolder').html('<iframe id="iframe" src="' + sheet + '"></iframe>'); // -------------- Display iFrame ----------------

//Apply bookmark ------------------------------------------------------------------------------------------------------------

var bookmark ="";

$.each(reply.qHyperCube.qDataPages[0].qMatrix, function(key, value) {

bookmark += value[1].qText;

});

app.bookmark.apply(bookmark);

var template ="";

$.each(reply.qHyperCube.qDataPages[0].qMatrix, function(key, value) {

template += '#' + value[2].qText;

});

$(template).find('.qvobject').each(function() { 

  var qvid = $(this).data("qvid"); 

  app.getObject(this, qvid); 

  });

$(template).fadeIn("slow");

});

console.log(reply);

    }

);

[ErikWetterberg · Accepted solution]

Looks like you are missing the actual hide. Something like:

$('.container').hide(); //or fadeOut

before the fadeIn call.

Hope this helps

Erik Wetterberg

[pentaxadmin]

Erik:

You were correct, I had to add a new class to my div tag, because I couldn't use  '.container'  - all containers were hidden, but it works now. Thanks.B