I am using a theme made with bootstrap and sass for my webapp.
I am not very familiar with bootstrap and sass.
I need to know how to get the code to insert on my webapp.
You can see the notification example builder here
And more info abou the theme here
So... I need set a toast notification and use it on this function (for the alert):
function validarNombre () {
var tituloAlbm = document.querySelector("#dni").value;
console.log(tituloAlbm);
if (tituloAlbm == "" ) {
alert("Please Fill All Required Field");
return false;
} else if (tituloAlbm !== null){
add();
}
}
I know that is a very vague question, but I am really stuck on this...
Thank you in advance.
Kind regards.
I like Alertify JS as I have used it.
You will just need to call the Alertify via CDN or from a static folder and call that in the script.
You can check the demo here on JsFiddle
Check the default notification section here: https://alertifyjs.com/
You can use these properties
alertify.alert('Ready!');
alertify.success('Success message');
alertify.error('Success message');
Related
I'm having a nightmare doing a lot of scenarios using Apps Script, but nothing works! I have a function that makes a GET request returns an array of cards. Now, sometimes I need this card refreshes again to fetch the new content.
function listTemplatesCards(){
var getAllTemplates = getTemplates();
var allTemplates = getAllTemplates.templates;
var theUserSlug = getAllTemplates.user_slug;
var templateCards = [];
//There are templates
if(allTemplates.length > 0){
allTemplates.forEach(function(template){
templateCards.push(templateCard(template, theUserSlug).build());
});
return templateCards;
}
}
This function is called on onTriggerFunction. Now, if I moved to another card and I wanted to back again to the root but in clean and clear way, I use this but it doesn't work:
//Move the user to the root card again
var refreshNav = CardService.newNavigation().popToRoot();
return CardService.newActionResponseBuilder().setStateChanged(true).setNavigation(refreshNav).build();
Simply, what I want is once the user clicks on Refresh button, the card refreshes/updates itself to make the call again and get the new data.
The only way I've found to do this is to always use a single card for the root. In the main function (named in the appscript.json onTriggerFunction), return only a single card, not an array of cards. You can then use popToRoot().updateCard(...) and it works.
I struggled with this for over a day, improving on Glen Little's answer so that its a bit more clear.
I have my root card to be refreshed defined in a funciton called: onHomepage.
I update the appscript.json manifest to set the homepageTrigger and onTriggerFunction to return the function that builds my root card.
"gmail": {
"homepageTrigger": {
"enabled": true,
"runFunction":"onHomepage"
},
"contextualTriggers":[
{
"unconditional":{},
"onTriggerFunction": "onHomepage"
}
]
}
Then it is as simple as building a gotoRoot nav button function that will always refresh the root page.
function gotoRootCard() {
var nav = CardService.newNavigation()
.popToRoot()
.updateCard(onHomepage());
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}
As far as gmail addons are considered, cards are not refreshed but updated with new cards. And it is pretty simple.
//lets assume you need a form to be updated
function updateProfile() {
//ajax calls
//...
//recreate the card again.
var card = CardService.newCardBuilder();
//fill it with widgets
//....
//replace the current outdated card with the newly created card.
return CardService.newNavigation().updateCard(card.build());
}
A bad hack that works for my Gmail add-on:
return CardService.newActionResponseBuilder()
.setStateChanged(true) // this doesn't seem to do much. Wish it would reload the add-on
.setNotification(CardService.newNotification()
.setText('Created calendar event')
)
// HACK! Open a URL which closes itself in order to activate the RELOAD_ADD_ON side-effect
.setOpenLink(CardService.newOpenLink()
.setUrl("https://some_site.com/close_yoself.html")
.setOnClose(CardService.OnClose.RELOAD_ADD_ON))
.build();
The contents of close_yoself.html is just:
<!DOCTYPE html>
<html><body onload="self.close()"></body></html>
So, it looks like Google has considered and solved this issue for an ActionResponse which uses OpenLink, but not for one using Navigation or Notification. The hack above is definitely not great as it briefly opens and closes a browser window, but at least it refreshes the add-on without the user having to do so manually.
is there any oportnunity to use a Vaadin Button in a HTML script?
Id like to use the following button
Button button_login = ew Button();
button_login.setID("buttonlogin");
and this button should be implement in the following script
<div data-location="buttonlogin"></div>
(Only an idea)
Have so. an idea to bind the button in the html script?
Thank!
I am quite unsure what you mean by html script. If it is something you can achieve using JavaScript then here is my try.
Generally to execute JavaScript on button click
Button js = new Button("Do JavaScript");
js.addClickListener( click -> {
com.vaadin.ui.JavaScript.getCurrent().execute("alert(´Hello´)");
});
When in need to use external .js files, for example hello.js, contents below
function hello() {
alert("Hello JavaScriptWorld!");
}
Assuming hello.js is directly under /VAADIN/ directory, add following annotation to your UI or relevant component class
#JavaScript({"vaadin://hello.js"}) // all paths must be relative to /VAADIN
Then in ClickListener you can refer to function hello() like
com.vaadin.ui.JavaScript.getCurrent().execute("hello()");
Java
#com.vaadin.annotations.JavaScript("vaadin://themes/paastheme/layouts/ui/donut/donut.js")
public class BrowsePeopleUI extends UI {}
I put JS file to:
src/main/resources/VAADIN/themes/paastheme/layouts/ui/donut/donut.js
My donut.js is:
Javascript
var util = util || {};
util.donut = () => {console.log(document.querySelectorAll("[data-svg]"))};
I'm trying to add a section widgets dynamically to Card/CardService on newSelectionInput OnChangeAction, the card already added.
I did not see any documentation on Google, how to achieve this behavior.
Can someone please direct me to the right documentation or how I can do this.
Thanks
We can add/remove a section from card which is already built in onchange action of input fields.
function getCard(addSection) {
// this is your function to build the card. The initial "getCard" function call does not have any parameter passed, so it will be treated as "false". Hence no section will be added
addSection = addSection || false;
if(addSection) {
// add your section here
}
.....
return card;
}
function OnChangeAction() {
var card = getCard(true);
return CardService.newActionResponseBuilder().setNavigation(CardService.newNavigation().updateCard(card)).build()
}
I hope this solves your problem.
I am using ionic slides and I want to hide the pager when the user reaches the last slide.
There is a showPagger() method but I cannot figure out how to use it for this purpose.
Any help on this?? Thanks
html :
<ion-slides pager (change)="onSlideChanged()">
...
<ion-slides>
js :
$scope.onSlideChanged = function() {
if ($ionicSlideBoxDelegate.currentIndex() == $ionicSlideBoxDelegate.slidesCount()) {
$ionicSlideBoxDelegate.showPager(false);
}
else {
$ionicSlideBoxDelegate.showPager(true);
}
}
I will update answer later.
Unfortunately, after searching and searching I found out that it is an open issue about it in ionic repository. The showPager property is not exposed to the directive API, so there is no direct use to it.
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/