I am currently writing an application using socket.io and ionic. I have to handle a list of 6000 people so I've decide to use collection-repeat and swipe + ion-option-button to verify items (remove then from the list)
The names on the list can be removed and the changes will be broadcasted to the rest of apps using sockets so everyone will have their own list updated in real-time
But if If the list change, each row is assigned new data but the html stays the same, including the state of the swiped button!
Here is a screen recording of the bug: https://youtu.be/15oZj7G1DQ0
You can see the list shrinking because another user is removing items from the list and broadcasting to me through websockets, but the button doesn't move along with the item and just stays in the same place.
The problem doesn't happen with ng-repeat but I can't use ng-repeat for this.
And I can't use $ionicListDelegate.closeOptionButtons() to go around the problem because it can be really annoying for the users.
There is any possible solution for this?
resumed code sample:
1) people controller
$rootScope.verify = function(){
this.person.verified = true;
//broadcast to main controller
$rootScope.$broadcast('verify', this.person)
}
2) Main Controller (aka socket controller)
$rootScope.$on('verify', function(e, person) {
//send to socket server
socket.emit('event:verify', person);
});
//incoming data from the socket server
socket.on('event:incoming',function(personData){
var person = $filter('filter')($scope.people, {id: personData.id}, true)[0];
var key = $scope.people.indexOf(person);
$scope.people[key].verified = personData.verified;
});
so if you look at this example: http://play.ionic.io/app/a8d986cdaf19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-list>
<ion-item>
I love kittens!
<ion-option-button ng-if="item" class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive">Edit</ion-option-button>
</ion-item>
</ion-list>
<ion-toggle ng-model="item">
Show Delete?
</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
You can use ng-if to show or hide a optoin button, so you can broadcast a event when a item is removed and hide the option button with a variable that you can toggle based on the event.
$scope.$emit('objectRemoved');
and then:
$scope.$on('objectedRemoved', function(){
$scope.variableToControlVerifyButton = false;
})
if you post your code I may be able to help more but I hope you get the general idea.
Related
Well, thanks in advance for those who will help me to solve this one.
What I am trying to do is to create clickable itens in the main menu of Google Sheets. The step of creating multiple drop list items is already overcome, using this script to create menu itens:
const onOpen = () => {
const ui = SpreadsheetApp.getUi();
const parentMenu = ui.createMenu('Partners');
parentMenu.addItem('Thebest50s','openWebsite');
parentMenu.addItem('The20best','openWebsite');
parentMenu.addToUi();
};
Used this HTML as a reference:
<!DOCTYPE html>
<html>
<body>
Click here to open the webpage.
</body>
<script>
var windowReference = window.open('<?= url; ?>', '_blank');
if (windowReference !== null) {
google.script.host.close();
}
</script>
</html>
And this script to open the first item of the menu when the client click in it:
const openWebsite = () => {
const htmlTemplate = HtmlService.createTemplateFromFile('url.html');
htmlTemplate.url = 'https://www.theworlds50best.com/list/1-50';
const htmlOutput = htmlTemplate.evaluate().setHeight(50).setWidth(200);
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(htmlOutput, 'Thebest50s');
Utilities.sleep(2000)
But obviously I didn't open the second item when I click in it.
I try to put some conditions, but it didn't help. Could someone help to solve this: when click in The20best items it opens https://www.getbento.com/blog/best-restaurant-websites-design/
Try using this script:
function onOpen() {
SpreadsheetApp.getUi().createMenu("Partners")
.addItem("Thebest50s", "openBest50")
.addItem("The20best", "openBest20")
.addToUi();
}
/**
* Run when "Thebest50s" is selected from the "Partners" menu is clicked.
*
*/
function openBest50(){
openUrl("https://www.theworlds50best.com/list/1-50'")
};
/**
* Run when "The20best" is run from the "Partners" menu or when the red YouTube button is clicked.
*/
function openBest20(){
openUrl("https://www.getbento.com/blog/best-restaurant-websites-design/")
}
function openUrl(url){
const blob = `
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div id="blocked" hidden>
<p>Go to link! \>\></p>
<p>You may have popups blocked for Google Workspace.</p>
<p>You can always remove the popup block for next time. 👍</p>
<button onclick="google.script.host.close()">Close</button>
</div>
<script>
const urlLinked = window.open("${url}");
if(urlLinked){
google.script.host.close()
}else{
document.getElementById("blocked").hidden = false;
}
</script>
</body>
</html>
`
const html = HtmlService.createHtmlOutput(blob)
.setWidth(400)
.setHeight(200);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html,"Link")
};
This script should show create a custom menu with 2 different options: TheBest50s and The20Best. You may want to update the menu information as you desire. The problem with your previous script is that you never set the URL for The20Best therefore clicking on it will not redirect the user anywhere.
I'm having trouble getting the Messenger Checkbox plugin to work: the Facebook script loads fine, it parses the page well (I can see this with the debug version of the SDK), but the checkbox remains in "hidden" status.
This is an HTML sample of my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestCheckboxMessenger</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: "[my-app-id]",
autoLogAppEvents: true,
xfbml: true,
version: "v10.0",
});
FB.Event.subscribe("messenger_checkbox", function (e) {
if (e.event == "rendered") {
console.log("Plugin was rendered");
} else if (e.event == "checkbox") {
var checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == "not_you") {
console.log("User clicked 'not you'");
} else if (e.event == "hidden") {
console.log("Plugin was hidden");
}
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk/debug.js"
></script>
<div
class="fb-messenger-checkbox"
origin="https://[my-domain-name]/"
page_id="[my-page-id]"
messenger_app_id="[my-app-id]"
user_ref="[some-random-id]"
size="medium"
skin="light"
center_align="true"
></div>
<app-root></app-root>
</body>
</html>
I have carefully read the facebook documentation and the solutions proposed on StackOverflow, but the checkbox does not appear. I have taken into account the following points:
My page is served on HTTPS with a domain name that is whitelisted in my page options
The user_ref is a randomly generated id that is new on every page refresh
My app is in what was called "development mode" so I have Standard access to pages_messaging and I have admin role on the app (and I am connected to my account)
My Messenger webhook is live and working
As strange as it may seem, the conversation plugin works fine.
What conversation plugin looks like
Is there a method to debug the checkbox status? To know why it is hidden? Because I have no error message in the Chrome console and all this is very frustrating :)
Ok so, acccording to this Facebook Update, the checkbox plugin and some other features including optin mechanics, media messages, etc. have been deactivated in Europe and some other countries because of GDPR.
Facebook planned to restore them by Q1 2021, but now they are moving the timeline towards Q2 2021.
I don't understand why they don't put a warning message on the docs about these features... :(
I have a Django ModelForm which is displayed in the template by using using crispy forms. After the user fills out the fields and presses a Submit button, an email is sent at the backend using Django's core send_email.
The problem is that the call to send_email is synchronous, so the user has to wait for the next page to load (success/failure page) but in this time the user might press the Submit button again and this generates multiple POSTs, making multiple emails.
I want to use Vue.js to make the button inactive once the user presses it but only if it passes Django's form validation. Is there a way to detect this?
Add to your button :disabled="!readyToSend" where readyToSend can be returned by your data function or a computed propoerty.
Before submitting the form set this variable to false, afater receiving data from your API, reset it to true.
In the following example I've choosen to make readyToSend a computed proporty where it will return true if the form is valid and if the process is not waiting for the API response.
The complete Code Pen example is here
html file :
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<form #submit.prevent>
<input type="text" v-model="dataToSend" placeholder="Something to send">
<button type="button" :disabled="!readyToSend" #click="send">Send</button>
</form>
</div>
</body>
</html>
javascript:
var vm = new Vue({
el: '#app',
data: function(){
return {
message: "please enter your message and click on send.",
dataToSend: "",
sentAndWaiting: false,
}
},
methods:{
send: async function(){
this.sentAndWaiting = true;
// Send Data Here
this.message = "sending....";
try{
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let jsonResponse = await response.json();
}
catch(e){
this.message = e.message;
}
// reponse received ... do Something with it
this.reponseReceived();
},
reponseReceived: function(){
this.sentAndWaiting = false;
this.message = "Ok. Got The response.";
}
},
computed:{
readyToSend: function(){
return this.dataToSend.length > 0 && !this.sentAndWaiting;
}
},
});
in my browser I had to test this by going to the developper tools and limit my internet connexion to the GPRS and disabling cache:
Screenshot DevTools
I have some console.log's in my app, which work fine when viewing the app in a desktop browser. Now, I'm trying to remote-debug the app on a phone, with Intel App Preview. I have launched my app on the phone and clicked "Begin debugging on device" in XDK. This opens up XDK's remote debugging UI, in which I can go to a console. But the console.log's don't get printed on this console. What could be the problem?
BTW I think this used to work for me in the past, just not now.
In order to view the console.log messages under the "Debugging Session" console in the TEST tab, you have to copy the provided script tag from the "On Device Debugging" section for insertion after the BODY element.
For example,
Note: The src attribute for the script may change when XDK is closed or quitted.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script>
function hello(){
console.log("Hello");
}
function windowsize(){
console.log("Window size Width: " + window.innerWidth + " Height: " + window.innerHeight);
}
</script>
</head>
<body>
<h1>Welcome to console log testing</h1>
<p>Hello World</p>
<button onclick="hello()">Hello_console.log</button>
<button onclick="windowsize()">Windowsize_console.log</button>
</body>
<script src="http://debug-software.intel.com/target/target-script-min.js#_oDg9dKa6AG4LMdTRJMSDIPU_8Wtj433kqrvyFjcAT4"></script>
</html>
After you have included the script tag, you will need to Push Files for your project to the Testing servers. When you scan the QR code, your application should load as expected. Open the Debugging Session panel by clicking on the "Begin Debugging on Device" button. You should see a list of targets and clients. Once you select the appropriate target, click to the Console tab in the Debugging Session panel to see console.log messages executed when the console is open.
If this still doesn't work for you, I recommend that you uninstall Intel XDK and re-install.
I'm new to developing for Facebook. I'm actually writing an app for a university course.
I followed the tutorials on the developer website, and they originally worked like a charm. I used the example which produced a login with Facebook button, and another page which would retrieve information from the logged in user and display it on the page.
I left it for a couple of weeks to work on other commitments, now this code doesn't work. Whereas before it would list the profile picture, name, email etc. Now it just says undefined. The only thing I could put it down to was that I had been using something which had been depreciated, since I'd now switched over to the timeline for my Facebook account (however why would the original example I used still be the first set of tutorials on the developer website https://developers.facebook.com/docs/guides/web/).
I also went to the Open Graph page on the developer website, they have a tutorial there which just displays a picture of a cookie and then adds the app to your timeline (I'm sure you're all familiar with it). That doesn't work either! It just brings up a blank box which immediately vanishes (doesn't ask me to authorise anything) and doesn't add anything to my timeline.
I've tried looking at my app settings but I can't see anything odd.
Probably you are using some deprecated functions.
First thing to do is to make sure you have an application created on facebook, and that the site URL on the settings of the application is the site that you are writing your application (example: http://locahost/application_name). Also, take note of the application id (you can find all these settings on https://developers.facebook.com/apps/).
Now that you got this, here is working example for extracting information for your user (replace "YOUR_APP_ID" with your application ID:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/default.css" />
<script type="text/javascript" src="js/jquery-ui.min.1.8.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui.min.js"></script>
<script type='text/javascript' src="js/main.js"></script>
<script type='text/javascript' src='js/default.js'></script>
<script language="JavaScript">
function get_feed()
{
FB.api('/me', function(response) {
alert(response.name);
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="login"></div>
<div id="test"></div>
<div id="stream"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
window.location.reload();
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// logged in and connected user, now get the facebook info
get_feed();
document.getElementById('login').innerHTML
='Logout fom Facebook<br/>';
} else {
document.getElementById('login').innerHTML
='<fb:login-button show-faces="true" width="200"'
+ ' max-rows="1" perms="user_about_me, user_likes, friends_likes, read_stream, publish_stream">'
+ '</fb:login-button>';
FB.XFBML.parse();
}
});
</script>
</body>
</html>
Hope it helps.