There is never an entry in the local/sync Storage, even though the alert is being displayed.
script.js:
document.getElementById('save').onclick = function() {
chrome.storage.local.set({"ad": "1"}, function() {
console.log('Value is set to ' + value);
});
alert('Boop');
};`
manifest:
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"permissions": [
"storage"
],
html:
<script src="script.js"></script>
<div id="main" style="padding:30px">
<p>Enter your name: <input id="name"></p>
<input id="save" type="button" value="SAVE">
</div>
Does anyone have any ideas?
Related
I don't know how to differentiate the two button in sweetalert
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" id="deleteform" action="/">
<input type="hidden" name="amccode" id="amccode" value="1">
<button class="btn btn-danger" id="test1_id" name="test1" type="submit">TEST1</button>
<button class="btn btn-danger" id="test2_id" name="test2" type="submit">TEST2</button>
</form>
<script>
$('#test1_id').on('click',function(e) {
event.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "All data related to this AMC ID will be parmanently deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit();
} else {
swal("Cancelled", "ha :)", "error");
}
});
});
$('#test2_id').on('click',function(e) {
event.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "TEST2",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit();
} else {
swal("Cancelled", "ha :)", "error");
}
});
});
</script>
in the code to handle form, I can't get name="test1" or name="test2" info , so the two button can't be differentiated , so I want to handle action1 when press button1,and handle action2 when press button2
my backed code is
from flask import Flask, flash, render_template, request
app = Flask(__name__)
app.secret_key = "assa"
#app.route("/", methods=["POST", "GET"])
def single_input():
if request.method == "POST":
print(request.form)
return render_template("index.html")
return render_template("index.html")
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
I can't get which response is from test1, which is from test2
You need to use attr to get attribute of element
https://api.jquery.com/attr/
$('#test1_id').on('click',function(e) {
var getNameAttr = $(this).attr("name");
console.log(getNameAttr);
event.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "All data related to this AMC ID will be parmanently deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit();
} else {
swal("Cancelled", "ha :)", "error");
}
});
});
$('#test2_id').on('click',function(e) {
var getNameAttr = $(this).attr("name");
console.log(getNameAttr);
event.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "TEST2",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit();
} else {
swal("Cancelled", "ha :)", "error");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" id="deleteform" action="/">
<input type="hidden" name="amccode" id="amccode" value="1">
<button class="btn btn-danger" id="test1_id" name="test1" type="submit">TEST1</button>
<button class="btn btn-danger" id="test2_id" name="test2" type="submit">TEST2</button>
</form>
I have dataTable and returns correct data, but the UI is my problem meaning it does not have columns and sorting are not looking good, here is my logic below and need some help to make look good. I have also attached the back end code for clarity as to why this code, User Interface does not have rows with data grid columns.
[![enter image description here][1]][1]
<!--Building some table here that filters data from db-->
<div style="width:90%; margin:0 auto;">
<table id="eNtsaCourseLists">
<thead>
<tr>
<th>Id</th>
<th>Course</th>
<th>Nickname</th>
<th>Term</th>
<th>Published</th>
<th>CourseLicence</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
</center>
<!--Javascript functionality for dataTable-->
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(function () {
$("#eNtsaCourseLists").dataTable({
"ajax": {
"url": "/Home/loadTableResults",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autowidth": true },
{ "data": "Course", "autowidth": true },
{ "data": "Nickname", "autowidth": true },
{ "data": "Term", "autowidth": true },
{ "data": "Published", "autowidth": true },
{"data": "CourseLicence", "autowidth":true}
]
});
});
</script>
public ActionResult loadTableResults()
{
//RegCoursesViewModel regCourses = new RegCoursesViewModel();
using (eNtsaRegistration_2 vb = new eNtsaRegistration_2())
{
var data = vb.Courses.OrderBy(n => n.Course).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
}
[1]: https://i.stack.imgur.com/wF76c.png
My app pulls json data and randomises the results on click, how can i validate each result that get's generated and state whether the value is valid/invalid?
view
<div ng-controller="idCtrl">
<button ng-click="randomize()">Random value on click</button>
<p>Id Number: <span data-ng-bind="RandomId.number"></span></p>
<p>Valid?: <span></span> </p>
</div>
json
[
{"number": "8607025402081"},
{"number": "8501016184086"},
{"number": "6104053425672"},
{"number": "8909025012083"},
{"number": "2222222222222"},
{"number": "8888888888888"},
{"number": "0000000000000"},
{"number": "9999999999999"}
]
script
var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.regex = '(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))';
$scope.randomize = function(){
$http.get('js/idnumbers.json')
.success(function(data) {
$scope.idnumber = data;
var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
$scope.RandomId = $scope.idnumber[randomIDIndex];
console.log(data);
})};
}]);
ngPattern is used with input controls most often. If you wanted to use ngPattern you could do something like the following. However, the invalid values are not being put in the text box. I assume this is because they are...invalid.
Note: I modified your regex from a string to a RegExp.
var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http',
function($scope, $http) {
var data = [{
"number": "8607025402081"
}, {
"number": "8501016184086"
}, {
"number": "6104053425672"
}, {
"number": "8909025012083"
}, {
"number": "2222222222222"
}, {
"number": "8888888888888"
}, {
"number": "0000000000000"
}, {
"number": "9999999999999"
}];
$scope.regex = /(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))/;
$scope.randomize = function() {
//make your HTTP call here
$scope.idnumber = data;
var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
$scope.RandomId = $scope.idnumber[randomIDIndex];
console.log($scope.form.theInput.$valid);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="idApp">
<div ng-controller="idCtrl">
<form name="form">
<button ng-click="randomize()">Random value on click</button>
<p>Id Number: <input name="theInput" ng-pattern="regex" ng-model="RandomId.number"></input></p>
<p>Valid?: <span>{{form.theInput.$valid}}</span> </p>
</form>
</div>
</div>
Since ngPattern is limited to input boxes you may want to just use good ol' JavaScript to accomplish the validation. E.g.,
var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http',
function($scope, $http) {
var data = [{
"number": "8607025402081"
}, {
"number": "8501016184086"
}, {
"number": "6104053425672"
}, {
"number": "8909025012083"
}, {
"number": "2222222222222"
}, {
"number": "8888888888888"
}, {
"number": "0000000000000"
}, {
"number": "9999999999999"
}];
var regex = /(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))/;
$scope.randomize = function() {
//http call here
$scope.idnumber = data;
var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
$scope.RandomId = $scope.idnumber[randomIDIndex];
$scope.valid = regex.test($scope.RandomId.number);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="idApp">
<div ng-controller="idCtrl">
<button ng-click="randomize()">Random value on click</button>
<p>Id Number: <span data-ng-bind="RandomId.number"></span>
</p>
<p>Valid?: {{valid}}
</p>
</div>
</div>
<html>
<head>
<meta charset="utf-8">
<title>React component</title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="myContent"></div>
<script type="text/jsx">
var ChatMessagesLists = React.createClass({
getInitialState: function() {
return {data: {chat_messages:[]}};
},
render: function(){
return
(
<div className="chatLstsWrapper">
<h1>Chat Messages</h1>
<ChatMessagesData data={this.state.data} />
</div>
)
},
componentDidMount: function(){
$.ajax({
url: 'jsontextfile.json',
dataType: 'json',
success: function(data){
this.setState({data: {chat_messages:[]}});
}
});
}
});
var ChatMessagesData = React.createClass({
render:function(){
console.log(this.props.data.chat_messages);
return(
<ul className="chatLsts">
{
this.props.data.chat_messages.map(function(chatmessages){
return <li>{chatmessages.from_account_id}</li>
})
}
</ul>
)
}
})
React.render(<ChatMessagesLists />,document.getElementById("myContent"));
</script>
</body>
</html>
JSON File
{
"message": "List of chat messages",
"data": {
"since_index": 1,
"before_index": 2,
"chat_messages": [
{
"text": "Load more",
"type": "text",
"key": "8ff134e7-e302-445b-903e-0038097c8a29"
},
{
"text": "my test data",
"type": "text",
"key": "3c7c3065-3701-4350-a64a-8a52f9fe1578"
},
{
"text": "My message",
"type": "text",
"key": "40f7c342-a019-44c3-ad2b-8b2ae018972b"
}
],
"max_results": 20
},
}
While loading the data getting below error. Can anyone please suggest where am i wrong
Error: Invariant Violation: ChatMessagesLists.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Hy,
Have you tried:
var ChatMessagesData = React.createClass({
render:function(){
var items = this.props.data.chat_messages.map(function(chatmessages){
return <li>{chatmessages.from_account_id}</li>;
})
return(
<ul className="chatLsts">
{
items
}
</ul>
);
});
PS: In Ajax callback, you not update the state:
success: function(data){
this.setState({data: {chat_messages: data}});
}
I'm trying to select data from my json file with
$resource request :
Im using a global variable productSelected in my controller,
but when I change it's value with ng-model , that don't do an effect on the model and the value of reference still the same!
Anyone have an idea please ?
Here is my code :
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('Produits',['$resource', function ($resource) {
return $resource('data/produits.json/:id',{id: "#id"},
{
'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
}
);
}]);
myApp.controller('produitsCtrl', function($scope, $http,Produits,$log) {
$scope.productSelected=0;
Produits.query(function(data){
$scope.produits=data;
$scope.reference=$scope.produits[$scope.productSelected].reference ;
});
});
<div ng-app="myApp" >
<div ng-controller="produitsCtrl">
Product : <input type="text" ng-model="productSelected"/> {{ productSelected }} <br/>
Reference : {{reference}}
</div>
</div>
produits.json
[{
"id" : 1,
"reference": "AA"
},
{
"id" : 2,
"reference": "BB"
}]
Just have a look at this code may be helpful for you
<body ng-app="myApp" data-ng-controller="MainCtrl" id="div1">
Product : <input type="text" ng-model="productSelected" ng-change="fun(productSelected)"/> {{ productSelected }} <br/>
Reference :<p ng-model="reference"> {{reference}} </p>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope){
$scope.productSelected=0;
$scope.produits= [{
"id" : 1,
"reference": "AA"
},
{
"id" : 2,
"reference": "BB"
}];
$scope.reference=$scope.produits[$scope.productSelected].reference;
$scope.fun=function(val){
//alert(val)
if(val!=undefined && val!=null && val!='')
$scope.reference=$scope.produits[$scope.productSelected].reference;
else
$scope.reference=$scope.produits[0].reference;
};
});
</script>
</body>