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] .....);
}
Related
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});
}
}
I've got a Bootstrap modal that displays a large form (30+ inputs).
I wrote the following code to populate the first few fields from JSON.
$('#seg-detail-modal').on('shown.bs.modal', function (e) {
var modal = $(this);
$.get( "includes/segdata.json", function( data ) {
$('#seg-detail-modal').find("input[name='segCode']").val(data.segCode);
$('#seg-detail-modal').find("input[name='orgName']").val(data.orgName);
$('#seg-detail-modal').find("input[name='referenceId']").val(data.referenceId);
});
});
Is there a more efficient way of populating a large form than what I'm doing here?
You could just iterate through the object properties and match selector to property in that loop.
Something like:
$('#seg-detail-modal').on('shown.bs.modal', function(e) {
var $inputs = $(this).find(':input');
$.getJSON("includes/segdata.json", function(data) {
$.each(data, function(key, val) {
$inputs.filter('[name="' + key + '"]').val(val);
});
});
});
If a property exists that doesn't have a match the selector will just fail quietly
I'm using jsGrid and want to know if it's possible how to customize onclick event of editButton. Basically, doing something like displaying modal instead of inline editing. I know that we can get the HTML output of control column like this :
{
type: 'control',
itemTemplate: function() {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments); // Array of string
return $result;
}
}
But how to have control on EditButton?
You can try this:
editItem: function(item) {
var $row = this.rowByItem(item);
if ($row.length) {
console.log('$row: ' + JSON.stringify($row)); // I modify this
this._editRow($row);
}
},
at your jsGrid config.
All lines except line // I modify this are default from original source of jsGrid, so dont change them.
I have a problem here with bootstrap modals, so in back-end of my app I pull out data from SQL, and I call a JS function like this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowPopup",
"MailLanguageChange('" + Description + "','" + TextResult + "');", true);
And JS looks like this :
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
}
So firebug hits break point at this function, so I am sure call of function does work, but here comes the problem, JS is trying to apply this data onto the modal, before all elements of modal are loaded.
But as I use this modal for multiple purpuses ... is there anyway to write it down, "Don't do anything until modal is shown"?
$('#MainContent_NewMailTemplate').modal('show');
As docs says, it returns to the caller before the modal has actually been shown ... how can i by pass that?
EDIT :
This is how I have also tried it
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
});
}
CONCLUSION :
With use of logic of global variables provided by #Guruprasad Rao
I ended up just simply using
$(document).ready(function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});
Thank you
Use twitter-bootstrap's shown.bs.modal method as below:
$("#yourmodalid").on('shown.bs.modal',function(){
//Do whatever you want here
});
There are several other events to look into regarding modal
Update
see you are showing the modal first and then you are registering that event.. So I would suggest you below steps.
Declare 2 global variables at the top in js page.
Ex
var name,text;
Assign them values inside your function MailLanguageChange.
Ex
function MailLanguageChange(Name, Text) {
name=Name;
text=Text;
$('#MainContent_NewMailTemplate').modal('show');
}
Keep shown.bs.modal event somewhere outside the above function
Ex
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});
I'm totally newbie in jQuery and i wonder if it is possible to combine these two functions.
As you can see, the first function is used to load json data to trigger a click.
The second function is used to toggle view for the list items.
Could you help me, and show me the good way to combine these functions!?
When the json file is loaded, it will be create the list elements (li), and the toggle will be able to toggle these list elements (li).
IMPORTANT: actually, my code don't work (the toggle function not work fine).
Here is the code of 1st functions :
$(document).ready(function() {
// ----------------------
// JSON INFOS
// ----------------------
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
//alert(data);
});
});
});
The code of 2nd function :
$(document).ready(function() {
// ----------------------
// TOGGLE BULLZ
// ----------------------
$(".tog").click(function(){
var obj = $(this).next();
if($(obj).hasClass("hidden")){
$(obj).removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
$(obj).addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});
When you use $(".tog").click() it only binds to whatever elements match the ".tog" selector at that moment so won't work on elements that you add dynamically later. You can instead use the delegated syntax of .on() like this:
$('ul.elements-list').on("click", ".tog", function(){ ...
...which will bind the click handler to your list, but only execute your function if the click occurred on an element in that list that matches the ".tog" selector in the second parameter at the time of the click. And within the handler this will be set to the ".tog" element that was clicked.
Also you can put all your code in a single document ready handler assuming all the code is in the same file.
Also your obj variable is a jQuery object, so you can call jQuery methods on it directly like obj.hasClass() rather than wrapping it in $() again as $(obj).hasClass().
So try this instead:
$(document).ready(function() {
$(".color-list.one li:first-child").on('click', function() {
$.getJSON("result.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'<li class="elements-item"><span class="tog">' + data.name + '</span><div class="togcont hidden">' + data.info + data.size + '</div></li>');
});
});
$('ul.elements-list').on("click", ".tog", function(){
var obj = $(this).next();
if(obj.hasClass("hidden")){
obj.removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
obj.addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});