How do I change the 'alert' click event in this fiddle to remove the row in which the icon was clicked? I have tried several approaches none of which have worked. I want to delete/remove the row, not post an alert. Thank you in advance.
Here is the Fiddle
function actionFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="edit ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
added: var $table = $('#table')
and this to the click function:
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
Now it works.
var $table = $('#table')
function actionFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a>',
'<a class="edit ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
Related
I am using google place SearchBox ( not AutoComplete ) for place search. My objective is I want to restrict the search for a particular country (UK).
I know the same thing can be achieved easily by using AutoComplete. But I can't use this because my map will populate on enter key as well as against a search button.
I am using code to select the first option on search button click.
I have tried with google.maps.LatLngBounds but that only sets the priority of result, not restricting anything.
Html:
<ul class="list-unstyled search-branch">
<li>Search branches:</li>
<li><input type="text" placeholder="City, town or postcode" id="txtbranch" value="Eurochange" />
<input type="button" class="button gold" id="getbranch" value="Search" />
<div style="clear:both;"></div>
<div class="error-message-summary" id="locationnotfound" style="padding: 0;top:-30px; position:relative; font-size:16px;display:none">
No search results found.
</div>
</li>
</ul>
js:
var input = document.getElementById('txtbranch');
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 1512631)
);
var options = {
bounds: defaultBounds
}
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
$('#getbranch').click(function () {
var input = document.getElementById('txtbranch');
if (BranchAddressSelector.val() == "") {
return;
}
google.maps.event.trigger(input, 'focus');
google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
return false;
})
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces()[0];
if (typeof (places) === "undefined") {
locationNotFoundSelector.css("display", "block");
return false;
}
if (BranchAddressSelector.val() == "") {
return false;
}
var address = places.formatted_address;
if (typeof (address) === "undefined") {
locationNotFoundSelector.css("display", "block");
return false;
}
var latitude = places.geometry.location.lat();
var longitude = places.geometry.location.lng();
$.ajax({
type: "GET",
url: BranchLocatorUrl.GetBranches,
data: { Latitude: latitude, longitude: longitude },
success: function (data) {
if (data.length > 0) {
markers = data;
LoadMap(0, 0);
BranchListSelector.html(CreateSearchHtml(markers));
goToByScroll("dvMap");
BranchListSelector.css("display", "none");
paginationSelector.css("display", "none");
$('.map-distance').css("display", "block");
locationNotFoundSelector.css("display", "none");
var show_per_page = 6;
var number_of_items = BranchListSelector.children('.BranchItem').size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
totalPages = number_of_pages;
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="previous_link" style="color: #007ea0;" href="javascript:previous();">Prev</a> ';
var current_link = 0;
while (number_of_pages > current_link) {
navigation_html += '<a class="page_link" style="color: #007ea0;" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a> ';
current_link++;
}
navigation_html += '<a class="next_link" style="color: #007ea0;" href="javascript:next();"> Next</a>';
$('#page_navigation').html(navigation_html).css("float", "right").css("display", "none");
$('#page_navigation .page_link:first').addClass('active_page');
BranchListSelector.children('.BranchItem').css('display', 'none');
BranchListSelector.children('.BranchItem').slice(0, show_per_page).css('display', 'block');
BranchListSelector.css("display", "block");
// paginationSelector.css("display", "block");
$('.map-distance').css("display", "none");
$('#moreBranch').css("display", "block");
}
else {
alert("Data not found.");
}
},
error: function (e) {
alert("Some Problem occurs.Try after some time");
return;
}
});
});
I want to use select2 in my Symfony project but still do not know how to display results. My code for frontend is
$(".js_search").select2({
ajax: {
url: "{{ path('search') }}",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
console.log(data.items);
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
});
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}
markup += '</div></div>';
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
g
and for the backend
public function searchAction()
{
$response = new Response();
$response->setContent(json_encode(
[
'items' =>
[
'id' => 1,
'text' => 'test'
]
]
));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
I dont know how should $response looks like or how to show returned data in view.
Somebody know the answer ?
I am using this https://select2.github.io/
Your response should be a JSON array with the elements Select2 uses to create the option tags for the dropdown.
In your case the content in the reposnse to your AJAX request would be:
[{"id": 1, "text":"test"}]
Select2 will then update the element identifed by the JQuery Selector $(.js-search) with the options and values in your response.
I am new to web programming and especially to css and bootstrap.
I found implemintation of multiselect-dropbox in angularjs:
'use strict';
var app = angular.module('myApp', ['app.directives']);
app.controller('AppCtrl', function($scope){
$scope.roles = [
{"id": 1, "name": "Manager", "assignable": true},
{"id": 2, "name": "Developer", "assignable": true},
{"id": 3, "name": "Reporter", "assignable": true}
];
$scope.member = {roles: []};
$scope.selected_items = [];
});
var app_directives = angular.module('app.directives', []);
app_directives.directive('dropdownMultiselect', function(){
return {
restrict: 'E',
scope:{
model: '=',
options: '=',
pre_selected: '=preSelected'
},
template: "<div class='btn-group' data-ng-class='{open: open}'>"+
"<button class='btn btn-small'>Select</button>"+
"<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>" +
"<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
"</ul>" +
"</div>" ,
controller: function($scope){
$scope.openDropdown = function(){
$scope.selected_items = [];
for(var i=0; i<$scope.pre_selected.length; i++){ $scope.selected_items.push($scope.pre_selected[i].id);
}
};
$scope.selectAll = function () {
$scope.model = _.pluck($scope.options, 'id');
console.log($scope.model);
};
$scope.deselectAll = function() {
$scope.model=[];
console.log($scope.model);
};
$scope.setSelectedItem = function(){
var id = this.option.id;
if (_.contains($scope.model, id)) {
$scope.model = _.without($scope.model, id);
} else {
$scope.model.push(id);
}
console.log($scope.model);
return false;
};
$scope.isChecked = function (id) {
if (_.contains($scope.model, id)) {
return 'icon-ok pull-right';
}
return false;
};
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
<pre>selected roles = {{selected_items | json}}</pre>
</div>
I want to use it in my project.
But I need to replace the appearance of the images.
Here how it looks now:
And I want the delete and checked signs will appear on another side:
Any idea how to implement it?
What changes I have to make changes on external resources files?
Not sure, is this right way or not, but its work for you
Change position of Text Check All and Uncheck All
"<li><a data-ng-click='selectAll()'>Check All <i class='icon-ok-sign'></i></a></li>" +
"<li><a data-ng-click='deselectAll();'> Uncheck All<i class='icon-remove-sign'></i></a></li>"
'use strict';
var app = angular.module('myApp', ['app.directives']);
app.controller('AppCtrl', function($scope){
$scope.roles = [
{"id": 1, "name": "Manager", "assignable": true},
{"id": 2, "name": "Developer", "assignable": true},
{"id": 3, "name": "Reporter", "assignable": true}
];
$scope.member = {roles: []};
$scope.selected_items = [];
});
var app_directives = angular.module('app.directives', []);
app_directives.directive('dropdownMultiselect', function(){
return {
restrict: 'E',
scope:{
model: '=',
options: '=',
pre_selected: '=preSelected'
},
template: "<div class='btn-group' data-ng-class='{open: open}'>"+
"<button class='btn btn-small'>Select</button>"+
"<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'>Check All <i class='icon-ok-sign'></i></a></li>" +
"<li><a data-ng-click='deselectAll();'>Uncheck All <i class='icon-remove-sign'></i></a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
"</ul>" +
"</div>" ,
controller: function($scope){
$scope.openDropdown = function(){
$scope.selected_items = [];
for(var i=0; i<$scope.pre_selected.length; i++){ $scope.selected_items.push($scope.pre_selected[i].id);
}
};
$scope.selectAll = function () {
$scope.model = _.pluck($scope.options, 'id');
console.log($scope.model);
};
$scope.deselectAll = function() {
$scope.model=[];
console.log($scope.model);
};
$scope.setSelectedItem = function(){
var id = this.option.id;
if (_.contains($scope.model, id)) {
$scope.model = _.without($scope.model, id);
} else {
$scope.model.push(id);
}
console.log($scope.model);
return false;
};
$scope.isChecked = function (id) {
if (_.contains($scope.model, id)) {
return 'icon-ok pull-right';
}
return false;
};
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
<pre>selected roles = {{selected_items | json}}</pre>
</div>
For the first 2, you need to change the template to move the icons to after the text.
template: "<div class='btn-group' data-ng-class='{open: open}'>"+
"<button class='btn btn-small'>Select</button>"+
"<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'>Check All <i class='icon-ok-sign'></i></a></li>" +
"<li><a data-ng-click='deselectAll();'>Uncheck All <i class='icon-remove-sign'></i></a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'> {{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
"</ul>" +
"</div>" ,
For the options list you need to change the isChecked method and replace pull-right by pull-left
$scope.isChecked = function (id) {
if (_.contains($scope.model, id)) {
return 'icon-ok pull-left';
}
return false;
};
Notice that I added a couple of to the template to give some gap between the icons and the text. You could do the same thing in CSS too.
'use strict';
var app = angular.module('myApp', ['app.directives']);
app.controller('AppCtrl', function($scope){
$scope.roles = [
{"id": 1, "name": "Manager", "assignable": true},
{"id": 2, "name": "Developer", "assignable": true},
{"id": 3, "name": "Reporter", "assignable": true}
];
$scope.member = {roles: []};
$scope.selected_items = [];
});
var app_directives = angular.module('app.directives', []);
app_directives.directive('dropdownMultiselect', function(){
return {
restrict: 'E',
scope:{
model: '=',
options: '=',
pre_selected: '=preSelected'
},
template: "<div class='btn-group' data-ng-class='{open: open}'>"+
"<button class='btn btn-small'>Select</button>"+
"<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
"<li><a data-ng-click='selectAll()'>Check All <i class='icon-ok-sign'></i></a></li>" +
"<li><a data-ng-click='deselectAll();'>Uncheck All <i class='icon-remove-sign'></i></a></li>" +
"<li class='divider'></li>" +
"<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'> {{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
"</ul>" +
"</div>" ,
controller: function($scope){
$scope.openDropdown = function(){
$scope.selected_items = [];
for(var i=0; i<$scope.pre_selected.length; i++){ $scope.selected_items.push($scope.pre_selected[i].id);
}
};
$scope.selectAll = function () {
$scope.model = _.pluck($scope.options, 'id');
console.log($scope.model);
};
$scope.deselectAll = function() {
$scope.model=[];
console.log($scope.model);
};
$scope.setSelectedItem = function(){
var id = this.option.id;
if (_.contains($scope.model, id)) {
$scope.model = _.without($scope.model, id);
} else {
$scope.model.push(id);
}
console.log($scope.model);
return false;
};
$scope.isChecked = function (id) {
if (_.contains($scope.model, id)) {
return 'icon-ok pull-left';
}
return false;
};
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
<pre>selected roles = {{selected_items | json}}</pre>
</div>
![kendo popup][1]
How to add a button to view details in the kendo popup UI
Like Update, Cancel button. I want to add one more button in that popup
This is a HTML for a confirmation modal dialog
<div data-role="modalview" id="confirmationView" data-init="app.confirmationView.onInit" style="display: none;">
<p class="message" data-bind="text: confirmationText"></p>
<hr>
<p>
<a data-role="button" class="buttonYes" data-bind="click: onYesClick">Yes</a>
<a data-role="button" class="buttonNo" data-bind="click: onNoClick">No</a>
</p>
</div>
And that is ViewModel for it (a requireJs module)
/*global define*/
define(['kendo', 'jquery'], function (kendo, $) {
'use strict';
var viewModel = kendo.observable({
callback: undefined,
confirmationText: '',
onInit: function () {
kendo.bind('#confirmationView', viewModel);
},
onYesClick: function () {
if (typeof viewModel.callback === 'function') {
viewModel.closeConfirm();
viewModel.callback(true);
} else {
viewModel.closeConfirm();
}
},
onNoClick: function () {
if (typeof viewModel.callback === 'function') {
viewModel.callback(false);
}
viewModel.closeConfirm();
},
onCloseClick: function() {
viewModel.closeConfirm();
},
showConfirm: function(text, callback) {
viewModel.callback = callback;
viewModel.set('confirmationText', text);
$("#confirmationView").show().data().kendoMobileModalView.open();
},
closeConfirm: function () {
$("#confirmationView").data().kendoMobileModalView.close();
}
});
return viewModel;
});
To show confirmation dialog you can just call showConfirm from this module
i want to go by ajax .
my html code:
<i class="fa fa-minus fa-2x borderd" ></i>
my javascript code:
bootbox.dialog({
title: 'Delete News',
message: 'Are you sure?',
buttons: {
submit: {
label: "Accept",
className: "btn-primary btn-sm",
callback: function () {
$.ajax({
url: 'News.aspx/DeleteNews_Click',
//type: 'post',
success: function () {
bootbox.alert("Deleted!", function () {
location.href = 'News.aspx';
});
}
});
}
},
cancel: {
label: "Cancel",
className: "btn-default btn-sm"
}
}
});
my event code in News.aspx.cs:
protected void DeleteNews_Click(object sender, EventArgs e)
{
//some codes...
}
but it doesn't go to DeleteNews_Click.
what should i do?
Thanks
Lets say you have a delete control on your page like this:
<asp:Button ID="Delete" runat="server" OnClick="Delete_Click" style="display:none" />
<i class="fa fa-minus fa-2x borderd" ></i>
Then you could call the code behind like this way:
$(document).on("click", "#DeleteNews", function (e) {
bootbox.dialog({
title: 'Delete News',
message: 'Are you sure?',
buttons: {
submit: {
label: "Accept",
className: "btn-primary btn-sm",
callback: function () {
document.getElementById('<%: Delete.ID %>').click();
}
},
cancel: {
label: "Cancel",
className: "btn-default btn-sm"
}
}
});
});
and in your code behind you could display the success message when the news has deleted successfully:
protected void Delete_Click(object sender, EventArgs e)
{
// delete the news here
if(result == success){
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"SuccessMessage",
#"bootbox.alert('Deleted!',
function () {
location.href = 'News.aspx';
});", true);
}
}