I have a situation, when I have a tour containing eleven steps.
In each step the popup contains "Prev", "Next", "End Tour" buttons.
Instead of using "End Tour" to "skip", I try to skip all the steps and go to the 11th step, but I can't get this to work.
steps: [
{
element: "#mobile",
title: "Mobile Number",
content: "Click ‘Next’ to view the next search field, Click ‘Previous’ to view the previous search field and click ‘skip’ to select End result.",
placement: "right",
backdrop: true,
orphan: true,
template: function (step) {
return "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-xs btn-pink' data-role='prev'>« Prev</button><span> </span><button class='btn btn-xs btn-danger' data-role='next'>Next »</button><span> </span><button class='btn btn-xs btn-success' data-role='skip'>Skip</button> </div> </nav> </div>"
},
onNext: function () {
dir = 'next';
},
onPrev: function () {
},
onShown: function () {
}
}
]
Here i am using data-role as "skip ".and how can i use this as a function like that onShow(), onEnd(), etc.
I tried goTo(i) method also not working.
So, after reading DOCs - there is no method out-of-box to do skip steps.
But we can very easily build our own.
Simple solution (for exactly this scenario with 3 steps):
1.) add button role skip (our, new, role):
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
2.) write method for skipping that catches skip button click:
$("body").on("click","button",function(){
if($(this).attr("data-role") === 'skip'){
alert("skip pressed :)");
tour.goTo(2);
}
});
Less simple solution (for all scenarios):
1.) add buttons with role skip (our, new, role):
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>
...
etc
2.) have a method to:
a.) find all steps
b.) catch clicked button (skip) and it's step number (let's say x))
c.) goTo step x+1
Advanced solution:
extend Jquery plugin and add cross-scenario code to it
you can use this below code to achive this , For me its working
onNext: function(tour){
var curr=parseInt(tour.getState("current_step"));
while(true){
curr+=1;
var step=tour.getStep(curr);
//TODO: check if it's undefined
if($(step.element).length){
tour.goto(curr);
return curr;
}
}
},
onPrevious: function(tour){
var curr=parseInt(tour.getState("current_step"));
while(true){
curr-=1;
var step=tour.getStep(curr);
//TODO: check if it's undefined
if($(step.element).length){
tour.goto(curr);
return curr;
}
}
}
Related
I store some data in a localstorage in my Javascript file. I want to create a delete button on the details grid that allows me to delete an individual item. I need to first identify the key of the selected item and then use the localStorage.removeItem(key) method to delete the item. But my method doesn't seem to work.
This is in my factory:
removeItem: function (data) {
var prefixLength = prefix.length;
Object.keys(localStorage)
.forEach(function (key) {
if (key.substring(0, prefixLength) == data) {
var item = window.localStorage[key];
localStorage.removeItem(key);
}
});
},
Then I call it in my controller.js:
$scope.remove = function () {
expService.removeItem($scope.expense);
},
my button is:
<button type="button"class="btn btn-sm btn-danger pull-right" id="remove" ng-click="remove()">
<span class="glyphicons glyphicons-bin"></span>
</button></div>
In my case, I had to delete a localstorage data on button click. Here is how I achieved that.
<button onclick="deleteFavorite('Id or name what you set as key')"> Delete </button>
function deleteFavorite(Id){
localStorage.removeItem(Id);
}
Please note that you can add id dynamically to the function using javascript and you have to reload the page to see if the item is deleted or not.
I didnt see error but simple to do it
<button type="button"class="btn btn-sm btn-danger pull-right" id="remove" ng-click="remove(expense)">
<span class="glyphicons glyphicons-bin"></span>
</button>
and js
$scope.remove = function (itemTodelete) {
localStorage.removeItem(itemTodelete);
},
localStorage.removeItem('itemTodelete');
localStorage.remove('itemTodelete'); or
localStorage.clear();
I'm triying to paginate the response of an API. This API, have 15 items per page.
Actualy, i'm using something like this:
vm.next = function(currentPage){
$http.get('/api?page='+vm.firstPage++)
.then(function(data){
vm.chuck = data.data.Response;
});
}
vm.previous = function(currentPage){
$http.get('/api?page='+vm.firstPage--)
.then(function(data){
vm.chuck = data.data.Response;
});
}
and
vm.firstPage = 1;
My html view for buttons:
<div class="text-center">
<button type="button" class="btn btn-warning" ng-click="$ctrl.previous()">Previous</button>
<button type="button" class="btn btn-warning" ng-click="$ctrl.next()">Next</button>
</div>
The idea was to had the increment/decrement on every click. It works, but only after the second click. Also, if i change the value of vm.firstPage to 2, it works since the very first click, but when i click Previous, it becomes a mess.
What can i do to have the increment/decrement on the buttons?
I'm using AngularJs and javascript
I think it's about the operator precedence. Make vm.firstPage++/vm.firstPage-- before API call
vm.next = function(currentPage){
vm.firstPage++;
$http.get('/api?page='+vm.firstPage)
.then(function(data){
vm.chuck = data.data.Response;
});
}
I'm trying to buil a like/dislike system for a project and I'm having some trouble in the last part.
The like/dislike system is working, but I would like to have the button change automatically after the click (change class and icon).
This is working based on many rows and each of them is in this way (Like):
<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat],
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-info
pull-right btn-xs'><i class='fa fa-thumbs-up'></i></button>
In PHP I already made the code so the button shown at page load is to Like or Dislike based if there is a like or not.
The button to "Dislike" is the same, only changes the class of the button and the class of the :
<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat],
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-
danger pull-right btn-xs'><i class='fa fa-thumbs-down'></i></button>
I have this code working to set the like/dislike, but I can't get a way to change the class of the button and the class that's inside that specific button:
$.ajax({
type:'POST',
url:'inc/like.php',
data:'id='+id+'&cat='+cat+'&scat='+scat+'&sscat='+sscat+'&uid='+uid,
success:function(msg){
if(msg == 'err'){
/** alert('Some problem occured, please try again.'); **/
$.toast({
heading: 'Error!',
text: 'There was a problem processing your like.',
position: 'top-right',
loaderBg: '#ff6849',
icon: 'error',
hideAfter: 3500
});
}else{
$.toast({
heading: 'Success!',
text: msg,
position: 'top-right',
loaderBg: '#ff6849',
icon: 'success',
hideAfter: 3500,
});
if(msg == "Like added."){
alert(1);
//** Remove Class btn-info and add class of button to btn-danger.
//* Change class of the <i> element to fa-thumbs-down (inside that button)
}else{
alert(2);
//** Remove Class btn-danger and add class of button to btn-info.
//* Change class of the <i> element to fa-thumbs-up (inside that button)
}
}
}
});
}
So, as I did it in PHP, after some likes/dislikes, some icons in the list are diferente (some are to like and other to dislike)
Please note that should be only effective for that button in specific and not in all buttons of that page.
I can't get an easy way to do it. Anyone could help me?
Thanks.
You can pass your button to your function LikeDislike by using this keyword.
<button type='button'
onClick='LikeDislike(this, $row_data[id], $row_data[cat], $row_data[scat], $row_data[sscat], $_SESSION[user_id]);'
class='btn btn-info pull-right btn-xs'>
<i class='fa fa-thumbs-up'></i>
</button>
after that, where you handle your ajax code, you can do the following :
function(ele, a, b, c, d) {
$.ajax([...],
success: function(){
// Do whatever you like...
ele.find('> i').removeClass('some-class').addClass('other-class');
}
);
}
I did it, hope that would be the best way to do it.
For those that need this information, I left here the answer:
First I set the button an ID and the class another one.
The button ID is set as 1,2,3,4...
The elemento inside the button is set as 1_1, 2_1, 3_1..
Then, in the if statement (commented above):
if(msg == "Like added."){
document.getElementById(id).className = 'btn btn-danger pull-right btn-xs';
document.getElementById(id+"_1").className = 'fa fa-thumbs-down';
}else{
document.getElementById(id).className = 'btn btn-info pull-right btn-xs';
document.getElementById(id+"_1").className = 'fa fa-thumbs-up';
}
I am writing in .js file and trying to loop through each element and add this "self.renderButtons". when i click on delete it should call the remove function. It is not doing that, can anyone help?
self.renderButtons = function (id) {
return ('<span class="fa fa-file-text-o"></span> Details'
+ '<button class="btn btn-sm btn-danger" data-bind="click: removeItem"><span class="glyphicon glyphicon-trash"></span> Delete</button>');
}
self.removeItem = function (item) {
$(document).trigger('loader-show');
self.service.delete(item.Id, self.handleDelete, self.handleError);
};
Manipulating the DOM is Knockout's job. If you want to have a button that corresponds to each element of an array, that is a job for the foreach binding. You manipulate the observableArray, and Knockout will take care of making the DOM reflect that state.
is there a way to pass additional data to bootstrap modal function callback?
for example, lets say my link that causes the modal to open has an extra attribute in it with a bit of useful data in it, how could I reference that attr?
HTML
<span listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
JS
$('#editTaskList').on('show', function () {
// get the source of the click, and then get the data i need.
});
Could this work for you ?
<span listid="80" href="#editTaskList" data-toggle="datamodal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
var $editTaskList = $('#editTaskList');
$('body').on('click.modal.data-api', '[data-toggle="datamodal"]', function (e) {
var $this = $(this);
$editTaskList.data('anyAttr',$this.data('anyAttr'));
$editTaskList.modal('show');
e.preventDefault();
})
$editTaskList.on('show', function () {
var myData = $editTaskList.data('anyAttr');
});
I know that this is an old question, but this is the first thing i've found on google. So, I want to put some important information here...
You NEED to put your callback function binded on events BEFORE you call the modal, for example:
$('#modal').on('shown', function(){
// Do something when the modal is loaded
});
$("#modal").modal();
This is very important and helped me a lot, so, here it is...
Like this -
<span id="modal_opener" data-extrastuff="stuff" listid="80" href="#editTaskList" data-toggle="modal" class="btn btn-mini right"><i class="icon-edit"></i> Edit Task List</span>
$('#modal_opener').click(function() {
var stuff_i_want = $(this).attr('data-extrastuff');
});