Bind to button function qlik js extension - javascript

I'm developing a simple js extension for Qlik sense and trying to create an extract button just like it provided in documentation
So I have two options one of them using angularjs and the second one jquery + js
First approach:
I've tried with angularjs:
html = "<div class='exportArea' style='float:right'><div id='exportText'></div><button ng-click=\"table.exportData({download:true})\">Create Excel file</button></div>" + html;
no success
Second Approach:
So I was using $element.find
$element.find("#exportButton").on("qv-activate", function(){}
But later have no idea how to call this export
var qTable = qlik.table(this);
var $exportButton = $( document.createElement('button'));
$exportButton.html('Export');
$exportButton.bind('click', function ( ) {
qTable.exportData({download: true});
});
$element.append($exportButton);
To summarize I need to call code from documentation using tag id='exportButton'
inside
html = "<div class='exportArea' style='float:right'><div id='exportText'></div><button id='exportButton'>Create Excel file</button></div>" + html;
Thank you in advance!!!

To your first approach:
You will need to define the table in the scope either in the Paint function like this:
paint: function ( ) {
// ...
if ( !this.$scope.table ) {
this.$scope.table = qlik.table(this);
}
}
or in the angular controller like this:
controller: ['$scope', function ($scope) {
$scope.table = qlik.table(this);
}]
To the second approach the $element references the Html Element to append the button to. So either you use this appended Button or you could use a selector function like getElementById (most likely not on the document but rather on the extensionContainer):
paint: function ($element, layout) {
$element.getElementById('exportButton').onlick=()=>{
qlik.table(this).exportData({download: true});
}
}

Related

Materialize getInstance(elem) inside AngularJS component's controller

I'm trying to use the .open() method of materialize to open a modal component within AngularJS on the page load.
So my component file (loginModal.js) has the following code:
angular.module('my-app').component('loginModal', {
templateUrl:'app/components/templates/loginModal.html',
controller: loginModalController
})
function loginModalController()
{
angular.element(document).ready( function(){
var loginModal = document.querySelectorAll('.modal');
var loginModal_options = {};
var loginModal_instance = M.Modal.init( loginModal, loginModal_options);
console.log(loginModal_instance);
loginModal_instance.open();
var instance = M.Modal.getInstance(loginModal);
instance.open();
});
}
While the initialization is happening as expected when I'm trying to trigger the open method, through the loginModal_instance variable I'm getting
loginModal_instance.open is not a function
while through instance variable I'm getting
Cannot read property 'open' of undefined
Instead, If I'm going to use JQuery, its working
function loginModalController()
{
$(document).ready(function(){
$('.modal').modal();
$('#login-modal').modal('open');
});
}
Any ideas? Am I doing anything wrong?
Actually by using querySelector() instead of querySelectorAll() did the trick.

pass data to modal using javascript

I am creating a website in MVC5 using bootstrap with the boostrap tables library http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html
using:
$('#subscriber-table').on("click-row.bs.table", function (e, row, $element) {
console.log(row.SubscriberID);
$('#subscriberDialog').modal();
});
I receive the click on one of the table's records. This works great ony now I want to pass the json object called row to my created modal, so I can set the name input field. Like this:
$('#subscriberDialog').on('show.bs.modal', function (event) {
$('#namefield').val('toSetName');
});
I have been trying to figure this out but I cant seem to get it to work.
What you can do you can set any custom attribute in modal to get the value.
like this :
$('#subscriber-table').on("click-row.bs.table", function (e, row, $element) {
console.log(row.SubscriberID);
$('#subscriberDialog').attr('data-custom-value', 'toSetName');
$('#subscriberDialog').modal();
});
$('#subscriberDialog').on('show.bs.modal', function (event) {
var val = $(this).attr('data-custom-value');
$('#namefield').val(val);
});
Pass Through array also like OnClick(['a','b','c']);
and Retrieve Like
function checkData(value)
{
alert(value[0] + " " + value[2] .....);
}

How to get angular variable to javascript when using scope() method

This is how I get my input. sql table -> php slim -> angularjs -> website.
I need to GET a variable in javascript that php slim is returning to angular.
Right now I'm using this in $( document ).ready(function() {.
var $element = $('div[ng-show="game"]');
var scope = angular.element($element).scope();
console.log(scope);
It returns this in console.
Any ideas how to achieve this?
In your Angular controller just create your JQuery method there.
//Controller
function someController($scope) {
$scope.game = GetFromSlim();
$scope.yourMethod = function(){
$('#someDiv').innerHtml($scope.game.total_rating);
}
}
Then you can just call your method from the view using angular.
//View
<div ng-controller="someController" ng-app>
<div id="someDiv"></div>
<button ng-click="yourMethod()">Just do it</button>
</div>
Angular 2 or AngularJS 2 ++
Without scope method also can be passed as below. You have to write somecodes inside angular page(Declare, define and redefine) and some in javascript.
A. In angular (i used in common angular page) write below code
//Declare and Define of variables
environmentStringify = {
'project_url':'172.23.77.82:4200/myangularproject/',
'testMode':true
};
declare var environmentStringify: any;
environmentStringify = JSON.stringify(environment);
B. in html page (i used index.html inside head and script tags) write below codes
<script type="text/javascript">
var environmentStringify = "{{environmentStringify}}";
var environment = null;
function isJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
function setJSEnvironmentVariable(){
if(isJsonString(environmentStringify)){
environment = JSON.parse(environmentStringify);
} else {
setTimeout(function(){
setJSEnvironmentVariable();
}, 500);
}
}
setJSEnvironmentVariable();
</script>

Module pattern, jquery callback issue;

Sorry for the pseudo code, but I can't post the original code here(company policy).
I have two "classes" in javascript, the class CLS2 I use to populate a DIV with HTML which come from the server (Actually it's a table). I am using the method LOAD in jquery for this.
The class CLS1 calls the CLS2 to load the HTML table and after trying to get some infos from the table with jquery method FIND.
I know what is happening. When I try to get these infos inside the table I am not able to do this, because the HTML table is not ready yet.
But if I am using the jquery method WHEN, I guessed, I should be able to do this. But it is not working so far.
If I use the callback on the jquery LOAD method everything works fine, but when I am using WHEN it is not waiting the HTML table to get ready.
Am I forgetting any thing?
I have a return from the jquery LOAD method. Is it possible to check in this return if the content is ready? console.log(retParam);
CLS2:
var cls2 = (function ($) {
return {
load: function() {
return this.populateDiv();
},
populateDiv: function() {
var ret = $('#content').load('url', function(){
// IF I USE THE JQUERY METHOD FIND HERE WORKS FINE
});
return ret;
}
};
}(jQuery));
CLS1:
var cls1 = (function ($) {
return {
init: function(){
this.config();
},
config: function() {
$.when(cls2.load()).then(this.doPagination());
},
doPagination: function(retParam) {
console.log(retParam);
var val = $('#datatable').find('.tdActive').val();
}
};
}(jQuery));
JQUERY Ready
$(document).ready(){
cls1.init();
}
load returns jQuery, not a promise. if you replace .load() with .get() instead, since .get() returns a promise (actually a jqXhr) that you can do .when on.
something like
var ret = $.get( "url", function( data ) {
$( '#content' ).html( data );
});
return ret;

Refer to immediate selector object with jQuery?

I'm trying to learn some jQuery, and I setup a test page with the following code:
<a id='encode' href='javascript: void(0)'>encode</a> |
<a id='decode' href='javascript: void(0)'>decode</a> |
<br/>
<textarea id='randomString' cols='100' rows='5'></textarea>
<script type='text/javascript'>
$(document.ready(function () {
$('#encode').click(function() {
$('#randomString').val(escape($('#randomString').val()));
});
$('#decode').click(function() {
$('#randomString').val(unescape($('#randomString').val()));
});
});
</script>
The idea is I can put something in the textarea and click either "encode" or "decode", and it will either escape or unescape what I put into the textarea.
This code works just fine, but my question has to do with how I am changing the value of the textarea. In my code, I am selecting the textarea value twice: once to (un)escape it, and once again to change the value. IMO this seems clunky and maybe unnecessary. I thought maybe I could do something like this instead:
$('#randomString').val(escape(this));
But this seems to refer to the object of the link I clicked, not the #randomString selector, so is there some other magic word I can use to reference that $('#randomString')?
$('#randomString').val(escape(this));
This does not get the object you want. It is effectively the equivalent of doing this:
var foo = escape(this);
$('#randomString').val(foo);
this only means something different when you start a new scope with a function definition.
jQuery does offer this kind of functionality with a callback option:
$('#randomString').val(function (idx, oldVal) {
return escape(oldVal);
});
The second parameter is the current value of the element; the return value sets a new value for the element.
You can try this
$(document.ready(function () {
$('#encode').click(function() {
var $randomString = $('#randomString');
$randomString.val(escape($randomString.val()));
});
$('#decode').click(function() {
var $randomString = $('#randomString');
$randomString.val(unescape($randomString.val()));
});
});
The short answer, if I understand you correctly, is no. There isn't a way to refer to $('#randomString') where you're talking about. It's just a parameter to the val method, so it's just plain JavaScript syntax, no jQuery "magic".
To accomplish the task at hand and make the code cleaner and less clunky, I would save off the jQuery object for #randomString so you don't have to keep creating it:
$(document.ready(function () {
var $rndStr = $('#randomString');
$('#encode').click(function() {
$rndStr.val(escape($rndStr.val()));
});
$('#decode').click(function() {
$('#rndStr').val(unescape($rndStr.val()));
});
});
You could make it a little generic:
$.fn.applyVal = function(func) {
return this.each(function() {
$(this).val( func( $(this).val() ) );
});
};
Then the following call is enough:
$('#randomString').applyVal(escape);

Categories

Resources