We Keep Coding

Bootstrap popover content callback called twice on every second click

I'm trying to create a feature that will display the popover with manual click event.
My goal is to populate the popover and display newest data through ajax call after every click.
The problem I'm facing is described on the title.
For example:
1st click -> call once
2nd click -> call twice
3rd click -> call once
4th click -> call twice
...
The code look like this:
$popoverButton.popover({
container: 'body',
template: `<div></div>`,
title: 'title',
content: function () {
console.log('*'); // this called twice on every second click
let id = $(this).attr('data-id');
return initPopover(id);
},
html: true,
trigger: 'manual',
});
function initPopover(id) {
let $popover = $('<div class="popover-body"></div>');
$popover.attr({'id': 'popover-body-' + id});
let $spinner = $(`<div class="spinner"><span class="spinner-border"></span></div>`);
$popover.append($spinner);
let $sellers = $('<div class="sellers"></div>');
$popover.append($sellers);
return $popover;
}
To open the popover, I declared the click event with these functions:
$popoverButton.on('click', function () {
closePopover();
openPopover($(this));
});
closePopover() {
$popoverButton.popover('hide');
}
openPopover($targetButton) {
// hide all opened popovers
$('.popover').popover('hide');
$targetButton.popover('show');
getSellersAndAppendData();
}
I'm not sure why this happened. Please help.

Checked all the data entries in datatable

If a user clicks the button "Select ALL", all the data in the table from page 1 until the last page should be checked. However, it will only check the first page of the list because only the first page is displayed and has class.
I have this code:
var clicked = false;
$("#ExportAll").on("click", function () {
$(".ExportOrder").prop("checked", !clicked);
clicked = !clicked;
});
How can I check all the data from page1 until the last page and will send all the checked data in the controller as well? It uses datatable.
//Edited
I have modify my codes to be like this and was able to check all the column across different pages however when I clicked the Export button and only those current display will be sent to controller
$(document).ready(function () {
var oTable = $('#orders-table').dataTable({
stateSave: true
});
$("#ExportAll").on("click", function () {
oTable.$("input[name='ExportOrder']").attr('checked', $(this.checked));
});
});
Here is the controller:
public ActionResult PostToStarShipIt(string[] ExportOrder)
{
}
The number of data in ExportOrder is only those in the current display list although all of the list are checked. How can I get all the checked data? Thanks for helping.

$ionicposition only setting correct values on a modal the first time a modal is opened

I have created a custom select directive and within this directive when you tap into the options it should use $ionicposition to locate the selected option based on the HTML element ID, and then scroll to it using $ionicscroll delegate.
This is the function which locates the option, and then scrolls to it:
private scrollToOption(selectedCode: activeh.objects.ICode): void {
this.$timeout(() => {
let item: HTMLElement = document.getElementById("code-" + selectedCode.CodeID);
if(item){
var itemPosition = this.$ionicPosition.offset(angular.element(item));
this.$ionicScrollDelegate.$getByHandle('modalContent').scrollTo(0, itemPosition.top + 40, false);
}
}, 200);
}
This is where the scrollTo function is called:
private createModal(): void {
this.$ionicModal.fromTemplateUrl('app/shared/directives/selectoption/selectoption.modal.html', {
scope: this.$scope,
hardwareBackButtonClose: false
}).then((modal) => {
this.selectModal = modal;
this.selectModal.show();
if (this.selectedVal !== undefined) {
this.scrollToOption(this.selectedVal);
}
});
}
So like mentioned in the title, this code works perfectly but only the first time that the modal is opened. After the modal has been closed and opened again the $ionicposition.offset is returning values of only 0.

I found a (probably partial) solution to this, wherein instead of using .hide() to hide the modal I use .remove() to completely remove it forcing a complete rebuild.
This mimics the behaviour where it worked the first time as now every time the modal is opened is the 'first' time.

UI Grid refresh in Angular

From a different controller a modal pop up opens. On closing of the modal pop up , I will do something and I want to transfer the data to a different controller which populates a UI grid and is bound to $scope.searchResultsGridOptions.
So in my ABCCtrl.js file :
On closing of a modal , I do :
$("#iConfirmationModal").on('hidden.bs.modal', function () {
$state.go('transaction.search.results', {});
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
//Using them I hit the web service again and get the data to reload the UI Grid
TransactionServices.getTransactionAdvSearchResults(searchResultsParam).then(function (result) {
//I got the result
console.log(result);
/Now I want to reload the grid with this data , but the grid scope object which binds to this , is in separate controller
searchResultsGridOptions.data = result;
});
});
In DEFCtrl.js
I have
getSearchResultsGridLayout: function (gridOptions, uiGridConstants, datas) {
gridOptions.multiSelect = false;
// gridOptions.data.length = 0;
// gridOptions.data = '';
gridOptions.data = datas;
console.log("Grid Data ");
console.log(datas);
console.log(gridOptions.data);
angular.element(document.getElementsByClassName('grid')[0]).css('height', '0px');
// console.log(datas.length);
return gridOptions;
}
But how would I only change the data only when modal closes ?
Rest of the time it should not refresh the Grid ?
Or ,
Is there any way when on closing of the modal , instead of simply go back to the state using $state.for() and seeing the previous unrefreshed data , I can see the refreshed data ?

Hi I think you do not need to call the "TransactionServices.getTransactionAdvSearchResults()" in the "ABCCtrl" controller but you have to call it in the "DEFCtrl" controller.
You need to find a way to pass the "searchResultsParam" extracted in "ABCCtrl" to "DEFCtrl".
You can use the ui-router state parameters. You can specify a parameter in the "transaction.search.results" state, like this:
.state('transaction.search.results', {
...
params: {
searchResultsParam: null
}
...
})
And in the "ABCCtrl" pass it to the state:
$("#iConfirmationModal").on('hidden.bs.modal', function () {
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
$state.go('transaction.search.results', {searchResultsParam: searchResultsParam});
Then, in "DEFCtrl" you can read it and call the "TransactionServices.getTransactionAdvSearchResults()" method.

Twitter Bootstrap Popover hides immediately after show

I am trying to use Bootstrap popovers for error showing. The code works well only after first click on the button. During next clicks popover is showing but disappear immediately.
Added simple helper for popover re-usage:
var popoverHelper = function (selector) {
var $element = $(selector);
$element.popover({
placement: "bottom",
trigger: 'manual'
});
return {
showPopover: function (text) {
$element.attr('data-content', text);
$element.popover('show');
},
hidePopover: function () {
$element.popover('hide');
},
destroyPopover: function () {
$element.popover('destroy');
}
};
};
Using helper:
var pHelper = popoverHelper('#postInput');
$('#postButton').click(function (e) {
e.preventDefault();
// hide open popover if open
pHelper.hidePopover();
...
// some functionality
...
// show popover if some errors
pHelper.showPopover('error occurs!!');
});
jQuery used - 2.1.1, Twitter Bootstrap - 3.1.1.
Full sample at jsfiddle.
Small note: If I call popover destroy and if I do popover re-init on show, all works well.
But I think it is not optimal.
Jsfiddle sample.

Check this Demo Fiddle
A better solution would be to hide popover on user action on the error field.
$('input').focus(function(){
pHelper.hidePopover();
});