When opening a dialog, it is shown more than once
Tried to prevent double opening by checking if a dialog is already open
if (!this.dialogService.hasOpenDialog) {
return this.dialogService
.open({ viewModel: AssignTeam })
.whenClosed((response) => {
if (!response.wasCancelled) {
return this.protectionService.assignTeam(devices, response.output);
}
this.selectedDevices.splice(0);
});
}
Expected: One dialog should be shown. When the user clicks ok it should be gone
Actual: The dialog is opened more than once. When the user clicks ok, he is presented by the same dialog and has to cancel it
Here is the html when opening the dialog:
<body class="ux-dialog-open">
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted -->
</ai-dialog-header>
<ai-dialog-body>
<!-- ommited-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- ommitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted-->
</ai-dialog-header>
<ai-dialog-body>
<!-- omitted-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- omitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST",
location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<div aurelia-app="main" class="page_container">
<!-- omitted-->
</div>
<script src="scripts/vendor-bundle.js"></script>
<script>
requirejs.config({
skipDataMain: true
});
// Configure Bluebird Promises.
Promise.config({
longStackTraces: false,
warnings: false,
cancellation: true
});
require(['aurelia-bootstrapper']);
</script>
<div></div>
<div></div>
</body>
Also tried to investigate more, using this code:
if (!this.dialogService.hasActiveDialog) {
console.log(this.dialogService);
return this.dialogService
.open({ viewModel: AssignTeam })
.then((openDialogResult: DialogOpenResult) => {
console.log(openDialogResult);
return openDialogResult.closeResult;
});
DialogService debug
It seems like two controllers are allocated
Related
vue.js, how can I make my section hide only after the submit button is pressed. right now the section disappears after I press one letter. I want the V-if and V-else to activate only after the user has submitted their request. or if routing the results on to a different page would easier id like to go that route also.
<template>
<div class="home">
<section id="whiteClawVideo" class="videoWrapper d-block w-100">
<div class="video-container fluid">
<iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?
autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<form #submit.prevent="SearchMovies()" class="search-box">
<input type="text" placeholder="What are you looking for? " v-model="search" />
<input type="submit" value="Search">
</form>
<div class="movies-list" v-if="search !== ''" >
<div class="container">
<div class="row">
<div class="col-3" v-for="movie in movies" :key="movie.imdbID">
<router-link :to="'/movie/'+movie.imdbID" class="movie-link">
<img class="movieImg" height="100%" :src="movie.Poster" alt="Movie Poster" />
<div class="type">{{ movie.Type }}</div>
<div class="detail">
<p class="year">{{movie.Year}}</p>
<h3>{{ movie.Title }}</h3>
<p>{{movie.imdbID}}</p>
</div>
</router-link>
</div>
</div>
</div>
</div>
<div class="container" v-else>
<MovieSection />
<SecondMovieSection />
</div>
</div>
</template>
import { ref } from 'vue';
import env from '#/env.js';
import MovieSection from '#/components/MovieSection.vue';
import SecondMovieSection from '#/components/SecondMovieSection.vue'
export default {
components: {
MovieSection,
SecondMovieSection
},
setup () {
const search = ref("");
const movies = ref([]);
const SearchMovies = () => {
if (search.value !== "") {
fetch(`API_HERE`)
.then(response => response.json())
.then(data => {
console.log(data)
movies.value = data.Search;
})
}
}
return {
search,
movies,
SearchMovies
}
}
}
Well, it closes once you type a single character because search is a model - it updates on every keypress you do within input it's bound to. What you wanna do instead is hide form based on whether you have entries in your movies array or not, so try changing v-if="search !== ''" to v-if="!movies.length"
I am trying to close a Modal of Materialize CSS if the validation is correct but I can not find the form.
The simplest thing was to do a type validation:
v-if = "showModal" and it works but leaves the background of the Modal and although click does not disappear. The background is a class named 'modal-overlay'
This is my code:
<i class="material-icons modal-trigger tooltipped" style="margin-left: 2px;
color:#ffc107; cursor:pointer;" #click="getById(article), fillSelectCategories(),
titleModal='Edit', type='edit'" data-target="modal1">edit</i>
I imported M from the JS file of MaterilizeCSS
import M from "materialize-css/dist/js/materialize.min";
Method:
update(){
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.getInstance(elem);
console.log(instance)
That returns 'undefined'
I tried this too on the update() method:
var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()
I initialize the modal from mounted and it works fine but I can not close it at the moment I require it.
mounted(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
}
But I know what else to try :(
It really is difficult to know why things aren't working for you without looking further into your code, but I've created this simple example to demonstrate how it could be done ..
new Vue({
el: "#app",
data: {
modalInstance: null,
closeAfterTimeElapsed: true,
seconds: 1
},
mounted() {
const modal = document.querySelector('.modal')
this.modalInstance = M.Modal.init(modal)
const select = document.querySelector('select');
M.FormSelect.init(select);
M.updateTextFields();
},
methods: {
handleClick() {
if (this.closeAfterTimeElapsed) {
setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
}
}
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<!-- Modal Trigger -->
<button #click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br>
<br>
<div class="row">
<div class="input-field col s6">
<select v-model="closeAfterTimeElapsed">
<option :value="false">False</option>
<option :value="true">True</option>
</select>
<label>Close Modal After</label>
</div>
<div class="input-field col s6">
<input id="seconds" type="number" v-model="seconds">
<label for="seconds">Seconds</label>
</div>
</div>
</div>
See this JSFiddle
This is from the docs:
#click.prevent.self will prevent all clicks while #click.self.prevent will only prevent clicks on the element itself.
I tried making a fiddle to actually prevent all clicks but am unsuccessful. Can someone elaborate what this line in the docs actually mean?
Fiddle:
var app = new Vue({
el: '#appp',
methods: {
logger(arg) {
console.log(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp">
<div #click.prevent.self="logger('1')"> 1
<br>
<div #click.prevent.self="logger('2')"> ..2
<br>
<div #click.prevent.self="logger('3')"> ....3
</div>
</div>
</div>
</div>
One of the best ways to see how .prevent and .self interact is looking at the output of the Vue compiler:
.prevent.self:
on: {
"click": function($event){
$event.preventDefault();
if($event.target !== $event.currentTarget)
return null;
logger($event)
}
}
.self.prevent
on: {
"click": function($event){
if($event.target !== $event.currentTarget)
return null;
$event.preventDefault();
logger($event)
}
}
The key difference between those 2 code blocks is inside the fact that the order of the operations matters, a .prevent.self will prevent events coming from its children, but doesn't run any code, but a .self.prevent will only cancel events directly created by itself, and ignores child requests completely.
Demo:
var app = new Vue({
el: '#appp',
data: {log:[]},
methods: {
logger(arg) {
this.log.push(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
<form #submit.prevent="logger('form')" style="width: 50%;">
<button>
<p #click.prevent.self="logger('prevent.self')">
prevent.self
<span>(child)</span>
</p>
<p #click.self.prevent="logger('self.prevent')">
self.prevent
<span>(child)</span>
</p>
<p #click.prevent="logger('prevent')">
prevent
<span>(child)</span>
</p>
<p #click.self="logger('self')">
self
<span>(child)</span>
</p>
<p #click="logger('none')">
none
<span>(child)</span>
</p>
</button>
</form>
<pre style="width: 50%;">{{log}}</pre>
</div>
</div>
I have a view like this
#model IEnumerable<DuckingOctoBear.Models.PostViewModel>
<p>
#if (User.IsInRole("Administrator") || User.IsInRole("Editor"))
{
#Html.ActionLink("Create New", "Create")
}
</p>
<div class="">
#foreach (DuckingOctoBear.Models.PostViewModel item in Model)
{
<a href="/Posts/Details/#item.Post.Id" class="post-element">
<h4>#Html.DisplayFor(modelItem => item.Post.Title)</h4>
<h6>
Inserted by #item.User.UserName at #item.Post.Date.ToString("dd MMMM yyyy hh:ss")
</h6>
<article>
#Html.Raw(item.Post.Text)
</article>
<span>
#if (User.IsInRole("Administrator") || User.IsInRole("Editor"))
{
#Html.ActionLink("Edit", "Edit", new { id = item.Post.Id })
<span>|</span>
}
#Html.ActionLink("Details", "Details", new { id = item.Post.Id })
<span>|</span>
#if (User.IsInRole("Administrator"))
{
#Html.ActionLink("Delete", "Delete", new { id = item.Post.Id })
<span>|</span>
}
</span>
</a>
}
</div>
...where I would like include a Javascript file which have strong dependencies to other Javascript files already included in the _Layout.cshtml
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
How can I include that local file without register it in a bundle, and so for all views?
Ok epic fail
for this _Layout.cshtml
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I could add just a new section
#RenderSection("LocallyScriptLibrary", required: false)
then in the target view doing just:
#section LocalScriptLibrary{
<script src="~/Scripts/LocalLibrary.js"></script>
}
I have developed a small test application. Loading the person records
works as expected. I can modify firstName and lastName.
In the personedit template I have a action which triggers the save method of
the App.PersonController.
What is the best way to save the modified record (implementation of the save method) ?
JavaScript:
window.App = Ember.Application.create();
DS.RESTAdapter.configure("plurals",{"person" : "people"})
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.RESTAdapter.create({namespace: 'restservice'})
});
var attr = DS.attr;
App.Person = DS.Model.extend({
firstName: attr('string'),
lastName: attr('string'),
birthDay: attr('string')
});
App.Router.map(function(){
this.resource('people',function(){
this.resource('person',{path: 'people/:person_id'});
this.route('edit');
});
});
App.PersonRoute = Ember.Route.extend({
model: function(params){
console.log('PersonRoute: set Model ==> perform App.Person.find(params.person_id)')
var p = App.Person.find(params.person_id);
return p;
},
renderTemplate: function(){
this.render('person');
this.render('personedit',{outlet: 'personedit'});
}
});
App.PersonController = Ember.Controller.extend({
save: function(){
console.log('save: Person:',this.content);
}
});
App.PeopleEditRoute = Ember.Route.extend({
model: function(params){
console.log('EditpersonRoute: set Model ==> perform App.Person.find(params.person_id)')
var p = App.Person.find(params.person_id);
return p;
}
});
Templates:
<script type="text/x-handlebars" data-template-name="application">
<nav>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>{{#linkTo "people"}}Personen anzeigen{{/linkTo}}</li>
<li>{{#linkTo "page1"}}Page 1 anzeige{{/linkTo}}</li>
<li>{{#linkTo "page2"}}Page 2 anzeige{{/linkTo}}</li>
</ul>
</div>
</div>
</nav>
<div id="main-content">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="people">
<div id="people">
<H3>Personen Liste</H3>
<ul>
{{#each person in controller}}
<li>
{{#linkTo "person" person}} {{person.firstName}} {{person.lastName}} {{/linkTo}}
</li>
{{/each}}
</ul>
</div>
<div class="row-fluid">
<div class="span6">
{{outlet}}
</div>
<div class="span6">
{{outlet personedit}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="person">
<div id="person" class="inline">
<H3>Person View</H3>
<dl>
<dt>Vorname</dt>
<dd>{{content.firstName}}</dd>
<dt>Nachname</dt>
<dd>{{content.lastName}}</dd>
</dl>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="personedit">
<H3>EDITOR</H3>
<fieldset>
<legend>Person</legend>
<label>Vorname</label>
{{view Ember.TextField valueBinding="content.firstName"}}
<span class="help-block">Example block-level help text here.</span>
<label>Nachname</label>
{{view Ember.TextField valueBinding="content.lastName"}}
<button {{action "save" }} class="btn">Save</button>
</fieldset>
</script>
I have found the correct way of saving in another answer. The implementation of my save method needs only one additional line:
App.PersonController = Ember.Controller.extend({
save: function(){
console.log('save: Person:',this.content);
this.content.get('transaction').commit();
}