I've been looking around for an answer to this question but all the related questions seem to be seeking to prevent this functionality.
Simply put, how do I make a bootstrap modal appear on the first two pages of a users visit? Right now I have a modal going with some simple cookie script that makes it appear once per visit. Is this something that is possible using cookies or some other method?
Not sure if this is helpful, but this is the cookie code i'm currently using -
jQuery(document).ready(function($) {
setTimeout(function(){
if(!jQuery.cookie('modalShown')) {
jQuery("#myemailmodal").modal('show');
jQuery.cookie('modalShown', true);
}
}, 20000);
you can use sessionStorage and make a counter with it:
$(document).ready(function(){
let counter = sessionStorage.getItem('counter');
counter++;
sessionStorage.setItem('counter',counter);
if ( counter <= 2 )
launchmodal();
})
Related
I'm using keep-alive to maintain the state of a multi-step form in Vue3 so users can navigate back and forth as needed.
What I can't figure out, is how to force a clear of the cache. When users complete the form I give them an option to re-start and I currently clear the form submission object and return the users to page 1 of the form but keep-alive is preserving the form state so checkboxes are pre-selected. Is there a call I can make from my reset function to clear the keep-alive cache? Ideally for only some of the form steps, not all.
Hard to do.;) There's no built-in method to clear the keepAlive cache.
Looks like the form is not completely reseted but maybe could be enough to destroy the instance of components wrapped in
Are you using key="x" on the component that's wrapped with ? Like:
<KeepAlive>
<component key="x"/>
</KeepAlive >
reseting the key together with redirecting to 1st page could help.
But also to my mind came an idea that You maybe should re-initialize form initialData
ex:
<script>
const initialState = () => {
return {
name: '',
surename: '',
location: {
name: null,
},
};
};
export default {
data() {
return initialState();
},
methods: {
reset() {
Object.assign(this.$data, initialState());
},
},
};
</script>
let's dive into
https://learnvue.co/tutorials/vue-keep-alive
Found related issue:
https://stackoverflow.com/a/71766767/10900851
https://github.com/vuejs/vue/issues/6259#issuecomment-436209870
I actually ended up using an entirely different method and thought I would put it here in case it is of use to someone else.
I found it here: https://michaelnthiessen.com/force-re-render/
Basically, a reset of a component can be forced by changing its key value. This has the added benefit of letting you selectively force a re-render of any number of child components.
In the parent.
<PageOne :key="page_one_key">
<script>
export default {
...
data() {
return {
page_one_key: 0,
}
},
...
methods: {
myreset(){
this.page_one_key += 1;
}
}
}
</script>
If there are downsides to this approach I would love to know but it seems to work perfectly - allows back/forwards navigation of my form and selective resetting of the cached components.
It is also simple to implement.
var a = $v('P1995_LUMBER');
if ((a = '1')) {
apex.submit({
request: "CREATE",
set: {
LUMBER: "P1995_LUMBER",
LST_NME: "P1995_LST_NME",
FST_NME: "P1995_FST_NME",
},
});
} else if (a != '1') {
apex.submit({
request: "Update",
set: {
LUMBER: "P1995_LUMBER",
LST_NME: "P1995_LST_NME",
FST_NME: "P1995_FST_NME",
},
});
} else {
alert("bang bang");
}
Couple of things:
JavaScript's equality check is either == or === (more details here). (a = '1') assign '1' to the variable.
It seems like you're not using the apex.submit process correctly. Typically, you would set the item's value
e.g.:
apex.page.submit({
request: "SAVE",
set: {
"P1_DEPTNO": 10,
"P1_EMPNO": 5433
}
} );
Although, by looking at your JavaScript code, I would say you don't even need to use JavaScript.
Whenever you submit a page, all items on it are automatically sent to the server-side. You can then reference them using bind variables. You could then simply have two process, one for the Create and one for the Update, each having the corresponding insert/update statement using the different items on your page.
Usually what you will see is a page with two buttons for Create/Edit. They will have a server-side condition so that only the correct one is displayed.
Try creating a Form type page (form with report) using the wizard, and you'll see how everything is done.
Without seeing the page and the code you're using it's hard to tell what your issue really is, more details would be required.
That code does not have any sql in it so it is impossible to diagnose why you are encountering a TOO_MANY_ROWS exception. Run the page in debug mode and check the debug data - it should show you what statement is throwing the exception. If you need more help, post a proper reproducible case, not a single snipped of code without any context.
Anyone knows how to remove a view from the back history (or navigation stack) in ionic2?
In Ionic 1 I solved this with
this.$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true
});
Would be really useful, for example, to fully remove the login page of my application from the history once a successfully login was performed.
Just not showing the back button isn't enough in such case, since Android terminals got their own physical back button on the devices.
I tried, after my login function returned a successful promise and before pushing the next page in the stack:
this.navController.pop();
or
this.navController.remove(this.viewCtrl.index);
but unfortunately both weren't successful :(
obrejacatalin on the https://forum.ionicframework.com/t/solved-disable-back-in-ionic2/57457 found the solution
this.nav.push(TabsPage).then(() => {
const index = this.nav.getActive().index;
this.nav.remove(0, index);
});
so I guess it's important to push the next page first, wait for the promise answer and then remove the current view
To remove one backview you need to use startIndex and count of pages to remove from stack.
this.navCtrl.push(NextPage)
.then(() => {
const startIndex = this.navCtrl.getActive().index - 1;
this.navCtrl.remove(startIndex, 1);
});
See this document for more options like removeView(viewController):
https://ionicframework.com/docs/v2/api/navigation/NavController/#remove
I got the same issue with Ionic 3.
So, only two steps to reset history:
// ...
constructor(public navCtrl: NavController) { }
// ...
this.navCtrl.setRoot(NewPageWithoutPrev);
this.navCtrl.popToRoot();
// ...
Links:
https://ionicframework.com/docs/api/navigation/NavController/#setRoot
https://ionicframework.com/docs/api/navigation/NavController/#popToRoot
I'm new to Meteor and its API / philosophy, so I might be thinking about this the wrong way.
I want to display some new friend requests on a page or a message if there aren't any. Here's some code:
// addfriend.js
Template.friendRequests.helpers({
friendRequests: function () {
return [
{ username: 'alice' },
{ username: 'carl' },
{ username: 'eve' },
];
},
hasFriendRequests: function () {
var template = Template.instance();
return template.helpers.friendRequests.length > 0;
}
});
// addfriend.html
<template name="friendRequests">
<h2>Friend requests</h2>
{{#if hasFriendRequests}}
<p>Someone's popular today!</p>
<ul>
{{#each friendRequests}}
<li>{{username}}</li>
{{/each}}
</ul>
{{else}}
<p>Sorry, nobody likes you right now.</p>
{{/if}}
</template>
My problem is that friendRequests will ultimately be a MongoDB query and I want hasFriendRequests to not repeat that query. I just want it to act on the friendRequests helper. But the code I have above does not work for that.
More generally, I'm interested in being able to apply any function f to an expensive helper so that I don't have to recompute it. So if you can illuminate me, that'd be awesome!
One way I can think of doing this is by putting the data in Session and working from it there. Is this how this should be done?
Any help would be appreciated!
Thanks!
Alin
Edit: I realize friendRequests.length works here actually, but I'm still interested in how to do this in the general case.
Although this will eventually be a mongodb query, you will most likely set up this friend request list as a published collection. In meteor this means that this collection is being copied over the wire on the initial page load, and only being sent once.
Once on the client, both your friend requests helper and your hasFriendRequests will use this same client side data. The data is actually copied into a client side mini mongodb database that just has the information subscribed to.
So the short answer is, there will only be one DB query for this, because meteor will do all the magic for you.
The key will be in setting up your publication and subscription. So assuming you only play blush and subscribe to it once. You are all set.
I am trying to learn how to use jsPlumb in my Ember.js application so I put a minimal jsFiddle together to demonstrate how they could work together.
In this example so far I just insert the nodes and add them to jsPlumb. I have not added any links between them yet. At this stage the nodes should be draggable but they are not.
Error I get in the browser console:
TypeError: myOffset is null
Which points to this part of the code in jsPlumb:
for (var i = 0; i < inputs.length; i++) {
var _el = _getElementObject(inputs[i]), id = _getId(_el);
p.source = _el;
_updateOffset({ elId : id });
var e = _newEndpoint(p);
_addToList(endpointsByElement, id, e);
var myOffset = offsets[id], myWH = sizes[id];
var anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e });
e.paint({ anchorLoc : anchorLoc });
results.push(e);
}
You can see that a simple example without integration with Ember.js works as expected. I know that this version of jsPlumb I have uses jquery-ui to clone elements and support drag and drop. A post here shows there is an issue with jquery-ui draggable functionality in Ember. However, I am not sure if I am hitting the same problem. If that is the same issue I am having, I would appreciate some help in how to implement the solution suggested there in my application. I am new to both Ember and jsPlumb, so I would appreciate clear guidance about what is going on here and what path to take.
How can I make this example work?
Luckily my suspicion was wrong and the issue was not with metamorph. jsPlumb and Ember work just fine together, without any hacks. I put a little example in this jsFiddle that demonstrates how they could work together.
Credit goes to Simon Porritt who helped me at jsPlumb user group to identify the problem. What I was missing was a simple call to jsPlumb.draggable element. However, the above error persisted after this fix.
The particular error message above was result of Ember calling didInsertElement an extra time with an element which did not make it to the DOM. I have reported this issue. One workaround is to check the element makes it into the DOM before calling jsPlumb. As you can see in the jsFiddle I have added this code in the didInsertElement hook to get rid of the error.
elementId = this.get 'elementId'
element = $("#"+elementId)
if element.size() > 0
console.log "added element", element
jsPlumb.addEndpoint element, endpoint
jsPlumb.draggable element
else
console.log "bad element"
Hope this helps someone.