Action function not working in jQuery-confirm - javascript

I am using https://craftpip.github.io/jquery-confirm/#customizing plugin for the popup. I just need a help When user click on Confirm button then why It's not redirecting it? If I used alert(); then it is displaying.
The function is not getting id value.
Would you help me in this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
</head>
<body>
<?php
$delete_id=2;
?>
<a href="javascript:void(0);" onClick="warning('<?php echo $delete_id;?>')" class="cross-cta">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script type="text/javascript">
function warning($id){
$.confirm({
title: 'DELETE SELECTED!',
content: 'Are you sure?.',
type: 'red',
typeAnimated: true,
theme: 'material',
buttons: {
tryAgain: {
text: 'Confirm',
btnClass: 'btn-red',
action: function(){
window.location='mypage?action=empty&deletekey='+id+'';
}
},
close: function () {}
}
});
}
</script>
</body>
</html>

Finally I found my issue.
The issue was function warning($id){ in this line.I used $id instated of id.
I have to use like this function warning(id) and it's working perfectly.

Related

jQuery Not Responding to Second 'this'

I've written this function to switch between font awesome arrows:
function toggleClass() {
$('.fa-arrow-up').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-down').removeClass('fa-arrow-up')
// console.log($(this))
})
$('.fa-arrow-down').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-up').removeClass('fa-arrow-down')
console.log($(this))
})
}
$(toggleClass);
On the first click when the class is fa-arrow-up it works, when the class is fa-arrow-down and I click it for a second time, it is toggling the .info-section, but not replacing the fa-arrow-down with fa-arrow-up. Any suggestions on why this function is not working both ways?
UPDATE adding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js" crossorigin="anonymous"></script>
</body>
</html>
Hope this help you.
$('.fa-arrow-up').on('click', function(event) {
$(this).toggleClass('fa-arrow-down fa-arrow-up')
})
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js"></script>
I found a solution for the issue.
HTML
<button class="arrow-icon" type="button">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-arrow-down"></i>
</button>
CSS
.arrow-icon .fa-arrow-up{
display: inline-block;
}
.arrow-icon .fa-arrow-down{
display: none;
}
.arrow-icon.active-icon .fa-arrow-up{
display: none;
}
.arrow-icon.active-icon .fa-arrow-down{
display: inline-block;
}
JS
$(function(){
$('.arrow-icon').on('click', function(){
$('.info-section').toggleClass('hidden');
$(this).toggleClass('active-icon');
});
});

Remove disabled class onclick

I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.

Trello api invalid token

I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>
You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/

Bootstrap fresh table inside ng-view

I am working on a project with AngularJS and facing an issue (which seems to be known but I did not understand or succeed to apply the solutions) :
I tried to use fresh table (http://demos.creative-tim.com/fresh-bootstrap-table) with ng-view. When I prepare a template without angular it is all working fine. But when I try to insert this table in angular in an ng-view it's not working anymore.
I have figured out that has to do with the javascript code they use after the balise :
<script type="text/javascript">
var $table = $('#fresh-table'),
$alertBtn = $('#alertBtn'),
full_screen = false;
$().ready(function(){
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
striped: true,
sortable: true,
pageSize: 8,
pageList: [8,10,25,50,100],
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
});
$(function () {
$alertBtn.click(function () {
alert("You pressed on Alert");
});
});
function operateFormatter(value, row, index) {
return [
'<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a>',
'<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">',
'<i class="fa fa-edit"></i>',
'</a>',
'<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'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) {
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);
}
};
</script>
I have read it is difficult to execute custom javascript functions with Angular. I don't know how to do this...
Here is my index.html file with the ng-view where I am trying to insert the table :
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SaaS Manager</title>
<meta name="Main" content="Dashboard">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="../resources/styles/fresh-bootstrap-table.css" rel="stylesheet" />
<link rel="stylesheet" href="../resources/styles/style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
<script src="controllers/dashboardController.js"></script>
<script src="controllers/configurationDetailsController.js"></script>
<script src="services/myService.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row banner">
<div class="col-md-4">
<img src="../resources/images/logo.png">
</div>
<div class="col-md-5">
<h1>My title</h1>
</div>
</div>
<div ui-view></div>
</div>
</body>
</html>
Here is the content of the view file :
<div class="container-fluid">
<section class="dashboard">
<div ng-controller ="dashboardCtrl as dashboard">
<div class="fresh-table toolbar-color-orange">
<div class="toolbar">
<h2>Liste des services disponibles</h2>
</div>
<table id="fresh-table" class="table">
<thead>
<th data-field="Nom" data-sortable="true">Nom</th>
</thead>
<tbody>
<tr ng-repeat="configuration in configurations">
<td>{{configuration.service.name}} </td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
The question is where should I put the javascript function ?
Thanks for your help guys !
I can't see where you implement ng-view in your HTML markup, and as far as where do you add in your javascript function, that would be in the controller associated with the view file for which you wrote the function.

Kendo UI: Unable to bind data to list view using MVVM

I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});

Categories