Volání funkce v javascriptu po úspěšném odeslání formuláře
- Danny
- Člen | 146
Zdravím,
chtěl bych se zeptat jak mám vyřešit situaci, kde mám přihlašovací
formulář a po úspěšném přihlášení chci ukázat notifikaci(pomocí
javascriptu), která mi momentálně funguje na toto tlačítko
<a href="" class="btn btn-success waves-effect" data-type="success">Success</a>ale nevím jak to zavolat přímo z presenteru až se uživatel přihlasí. Musí to být řešené pomocí ajaxu?
Děkuji :)
- Danny
- Člen | 146
Tak jsem to vyřešil tak že si předávám flash message do šablony a v šabloně je vkládám do scriptu viz takhle. Stránka se stejně obnovuje.
<script>
$(window).load(function(){
function notify(message, type){
$.growl({
message: message
},{
type: type,
allow_dismiss: false,
label: 'Cancel',
className: 'btn-xs btn-inverse',
placement: {
from: 'top',
align: 'right'
},
delay: 2500,
animate: {
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight'
},
offset: {
x: 30,
y: 30
}
});
};
//if ($('.alert')[0]) {
notify({foreach $flashes as $flash}{$flash->message}{/foreach},'success');
//}
});
</script>Nejsem si ale jistej jestli je to úplně clear řešení.
- GEpic
- Člen | 566
Danny napsal(a):
Tak jsem to vyřešil tak že si předávám flash message do šablony a v šabloně je vkládám do scriptu viz takhle. Stránka se stejně obnovuje.
<script> $(window).load(function(){ function notify(message, type){ $.growl({ message: message },{ type: type, allow_dismiss: false, label: 'Cancel', className: 'btn-xs btn-inverse', placement: { from: 'top', align: 'right' }, delay: 2500, animate: { enter: 'animated fadeInRight', exit: 'animated fadeOutRight' }, offset: { x: 30, y: 30 } }); }; //if ($('.alert')[0]) { notify({foreach $flashes as $flash}{$flash->message}{/foreach},'success'); //} }); </script>Nejsem si ale jistej jestli je to úplně clear řešení.
Na slide efekt používat jQuery a ještě k tomu další knihovnu? Však to jde udělat pomocí CSS3 a transition.
Editoval GEpic (28. 7. 2016 12:44)
- GEpic
- Člen | 566
Danny napsal(a):
To mě vůbec nedošlo, díky zkusim to jinak :)
Můžu se ještě zeptat jak nofitikace řešíte obecně? Chtěl bych implementovat to nejlepší řešení.Děkuji :)
Vždy podle klienta a jeho požadavků (hlavně kvůli starým prohlížečím). Pokud není potřeba tolerovat staré IE (protože v jejich firmě používají vyspělé prohlížeče), vždy volím CSS3.
Samozřejmě je možné si pohrát s umístěním a šířkou, toto je řešení v případě, že používáš bootstrap do pravého horního rohu.
#fm {
position: fixed;
top: 70px;
left: auto; /* šířky v CSS nenastavujeme! */
right: auto; /* šířky v CSS nenastavujeme! */
z-index: 10010; /* Tady záleží na tvém celkovém stylu, alert musí být vždy 'nejblíž monitoru'*/
opacity: 0;
animation-name: alert, alert-hide;
animation-delay: 0s, 5s; /* Pět sekund může být dlouho, než alert odjede */
animation-duration: .3s, .3s; /* Zde můžeš nastavit jak rychle přijede / odjede */
animation-fill-mode: forwards, forwards;
animation-timing-function: linear, linear;
}
#fm .alert i {
margin-top: -10px; /* Toto musíš upravit podle své BS šablony, aby ikonka hezky seděla */
}
@keyframes alert {
from {
opacity: 0;
transform: translateY(-200px);
}
to {
opacity: 1;
transform : translateY(0);
}
}
@keyframes alert-hide {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform : translateY(-200px);
height: 0;
}
}Ideální umístit hned za <body> tag (ale nezáleží na
tom, vzhledem k tomu že position: fixed)
{snippet flashMessages}
<div n:if="count($flashes)>0" id="fm" class="col-sm-3 col-sm-offset-9">
<div n:foreach="$flashes as $f" class='alert alert-{$f->type}'>
{switch $f->type}
{case "success"}
{var $icon = 'check'}
{case "warning"}
{var $icon = 'warning'}
{case "danger"}
{var $icon = 'warning'}
{default}
{var $icon = 'info-circle'}
{/switch}
<i class="fa fa-{$icon} fa-3x pull-left"></i> {$f->message}
</div>
</div>
{/snippet}A volání je jasné:
$this->flashMessage('Zelený', 'success');
$this->flashMessage('Modrý', 'info');
$this->flashMessage('Žlutý', 'warning');
$this->flashMessage('Červený', 'danger');
$this->redrawControl('flashMessages'); # v případě ajaxuAle ty bootstrap používáš, takže to můžeš vyzkoušet.
Editoval GEpic (29. 7. 2016 12:27)
- GEpic
- Člen | 566
Danny napsal(a):
Super díky za tip určitě to vyzkouším :)
Jj vyzkoušej a dej vědět, ve spojení s ajaxem je to fakt pohodka :)
Popř. můžu pomoct (i když to dáš) aby ti to třeba vyjíždělo z prava, z leva, ze shora, ze spodu (to se mi začalo líbit i Google), nebo fade a podobně.
Editoval GEpic (7. 8. 2016 21:59)