I am Bootstrap Select user in IE11.
When I fill data with ajax and open it then it automatically move down wards and when I select any value then it's not selected. How can I remove this error?
jQuery.ajax({
url: base_url + "UserBusinesses/ajaxState/" + countryId,
dataType: 'json',
beforeSend: function () {
$('#UserBusinessStateId').html('<option value="">Loding... </option>');
$('#UserBusinessStateId').selectpicker('refresh');
$('#UserBusinessCityId').html('<option value="">Select city</option>');
$('#UserBusinessCityId').selectpicker('refresh');
},
success: function (obj) {
var addHtml = '';
addHtml += '<option value="">Select state</option>';
$.each(obj, function (key, value) {
var selected = "";
if (selectedState == key) {
var selected = "selected='selected'";
}
addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
});
jQuery("#UserBusinessStateId").html(addHtml);
$('#UserBusinessStateId').selectpicker('refresh');
}
});
I am facing this issue In IE and I have find the solution
$('#UserBusinessStateId').selectpicker('refresh');
remove this and add this code
$('#UserBusinessStateId').selectpicker('render').selectpicker('refresh');
Related
I have to use AngularJS to build a dashboard and one of the components is a table.
Since I did not find relevant dependencies/libraries for angularjs (like tabulator or datatables), I am doing it myself.
Instead of using the native angular filter, I built a custom method, but I am not sure if I am following a good approach.
The main idea is that when I pull the data object (array of objects) via Ajax, I create both an "original" and a "current" data object,s and at the beginning, they are exactly the same of course.
Then I created an input field above every column heading and I linked the search function to the blur and keyup events (enter key).
When the search function is triggered, I start making changes to the "current" object. This way I can filter by multiple columns incrementally. I filter the data object using an awesome library called AlaSQL.
I also linked to a button the "reset" method, which simply makes the "current" object equal to the "original" object, and cleans up the input fields.
The point is, am I missing any best practices? Are there better ways to do so with AngularJS?
Any suggestions?
Thanks a lot.
HTML
<div ng-app="myApp">
<div ng-controller="divController">
<my-table></my-table>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('divController', function ($scope, $http) {
$scope.data = {};
$scope.data.current = null;
$scope.data.original = null;
$scope.filter = {
id: {
field: "id",
value: null
},
name: {
field: "name",
value: null
},
owner: {
field: "owner",
value: null
},
}
$scope.reset = function () {
console.log("reset");
$scope.data.current = $scope.data.original;
for (let prop in $scope.filter) {
$scope.filter[prop]["value"] = null;
}
}
$scope.filterExec = function (field, value) {
if (value) {
console.log(`Executing filter on field "${field.trim()}" by this value "${value.trim()}"`);
var filtered = alasql('SELECT * FROM ? where ' + field + ' LIKE "%' + value + '%"', [$scope.data.current]);
$scope.data.current = filtered;
}
}
$http.get("./workspaces_demo_obj.json")
.then(function (response) {
console.log(response);
$scope.data.original = response.data;
$scope.data.current = response.data;
});
});
app.directive('myTable', function () {
return {
template:
'<div>Total rows {{data.current.length}} <button ng-click="reset()">RESET</button></div>' +
'<table class="table table-responsive table-sm">' +
'<thead>' +
'<tr><th>Workspace ID</th>' +
'<th>Name</th>' +
'<th>Owner</th></tr>' +
'<tr><th><input ng-model="filter.id.value" ng-blur="filterExec(filter.id.field, filter.id.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.id.field, filter.id.value)" placeholder="Filter by id"></input></th>' +
'<th><input ng-model="filter.name.value" ng-blur="filterExec(filter.name.field, filter.name.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.name.field, filter.name.value)" placeholder="Filter by name"></input></th>' +
'<th><input ng-model="filter.owner.value" ng-blur="filterExec(filter.owner.field, filter.owner.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.owner.field, filter.owner.value)" placeholder="Filter by owner"></input></th></tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="x in data.current">' +
'<td>{{ x.workspace_id }}</td>' +
'<td>{{ x.name }}</td>' +
'<td>{{ x.owner }}</td>' +
'</tr>' +
'</tbody>' +
' </table>',
restrict: 'E'
};
});
Here is how I am adding fields.
$scope.addEmailField = function () { //Function to add new email field.
if (valid <= 1 && checkToDelete == 0) {
var mailTxtId = 'mail' + valid;
var mailModel = 'Contact_Email' + valid;
var hide = 'hide' + valid;
hide = false;
console.log(mailTxtId);
var emailDiv = angular.element(document.querySelector('#emailDiv'));
var element = $compile('<div id="' + mailTxtId + '" style="margin-left: -60px; width:200px; margin-top:15px"><input id= "' + mailModel + '" type = "text" class="form-control" ng-model="' + mailModel + '" ng-blur="validateEmailDynamic(' + valid + ')">' +
'<input id="' + valid + '" class="form-control" style="margin-left: 206px; width:54px; margin-top:-34px" type="button" value="-" ng-click="deleteField(' + valid + ')"><span ng-show ="' + hide + '" style="color:red">' +
'Invalid email</span></div>')($scope);
emailDiv.append(element);
valid = valid + 1;
}
};
But not getting the value of ng-model.
Store your input box in a directive's template. Then add ng-class that would determine whether it should show or not.
app.directive('inputBox', function(){
template:'<input ng-model="item">'
});
Usage in the html:
<div ng-class="{ input-box : triggerInputBox }"></div>
Controller:
$scope.triggerInputBox = true;
This is just one of many ways to accomplish this. But directives are very useful for dynamically showing templates.
I'm trying to add an ng-click attribute in the return of my formatter object in highcharts:
formatter: function() {
var item = "";
if (this.series.name == fluidVsConsumerDaily.pondSelection.pondName) {
item = angular.element('<a> Pond Volume Level: <b>' + this.y + '(BBL)</b></a>');
} else {
item = angular.element('<button ng-click="vCtrl.section.dashboard.fluidVsConsumerDaily.openFluidSourceModal(' + this.series.options.fluidSourceFacilityId + ')"> Fluid Source: <b>' + this.series.options.fluidSourceName + '</b> - ' + this.y + '(BBL) </button>');
}
var element = $compile(item)(vm);
$scope.$digest();
return element.html();
},
Unfortunately the click still doesn't work. When i'm inspecting the DOM, ng-click is present.
Thanks in advance.
My JSON:
[{"status":"success","id":1,"title":"title1","content":"test"},
{"status":"success","id":2,"title":"title2","content":"test2"},
{"status":"success","id":3,"title":"title3","content":"test3"},
{"status":"success","id":4,"title":"title4","content":"test4"}]
I have the following success-function inside of my Ajax Request:
function(response){
response.forEach(function(data) {
$('#suche').append('<li id="post_id_' + data.id + '" ><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');
})//foreach end
}
Now I want to show the content of the item with id 3 for example:
$(document).on('click', '#post_id_' + data.id, function(){
$('#postcontent').append(data.content);
});
How can I assign the correct content "test3" for this ID?
Assuming response is what you posted
[{"status":"success","id":1,"title":"title1","content":"test"},
{"status":"success","id":2,"title":"title2","content":"test2"},
{"status":"success","id":3,"title":"title3","content":"test3"},
{"status":"success","id":4,"title":"title4","content":"test4"}];
The following code should display the content associated with each element when you click on it.
function(response){
response.forEach(function(data) {
$('#suche').append('<li id="post_id_' + data.id + '" ><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');
$(document).on('click', '#post_id_' + data.id, function(){
$('#postcontent').html(data.content); //replace content instead of appending
});
})//foreach end
}
I'm working for iPhone application using phonegap. In the application there are few dropdowns whose values are more the 10000. Now we are trying to replace the dropdown with Autocomplete.
We are maintaining those 10000 records in SQLite DB and fetch the records from the DB as user enters the string.
CODE:
<input type ="text" class="inputFormText" ng-model="Location.location" id="location" list ="locValues" placeholder="{{'lSummary_Location_text'|translate}}" autocomplete = "on" maxlength="80" ng-keyup="populateLocations($event)"/>
<div class="aListCon">
<datalist id="locValues">
</datalist>
</div>
$scope.populateLocations = function($event){
if ($event.target.value.length > 2) {
try
{
db.transaction(function(tx){
tx.executeSql("SELECT ID, VALUE FROM tbl_Location WHERE VALUE LIKE '%" + $event.target.value + "%'", [],
function(tx, res){
if(res.rows.length > 0)
{
var template = "";
for (var i = 0; i < res.rows.length; i++) {
var id = res.rows.item(i).value + ' / ID: ' + res.rows.item(i).id;
template += '<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>';
};
document.getElementById('locValues').innerHTML = template;
}
else
console.log("No records found")
},
function(ex){
console.log("Populate Location Error: " + ex.message);
});
});
}
catch(ex)
{
console.log("Populate Location Error: " + ex.message);
}
};
};
I was able to fetch the records form the SQLite and append to the datalist, but Autocomplete is not displayed in the UI.
Any idea where I'm going wrong?
Thanks in advance
This code should be working:
var divtoappend=angular.element( document.querySelector( '#locValues' ) );
divtoappend.append("<option class="aCon" id="' + id + '" value="' + res.rows.item(i).value + '"></option>");