I am using Bootstrap 5.0.2 as the basis of my website, I finally got the modal to appear on page opening, thanks stack overflow, my aim is to not have the modal appear should the visitor move to another page and then return.
This is the code for running the modal. What do I need to add to make it only function the first time this page is viewed per session?
<script>
window.addEventListener('DOMContentLoaded', () => {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
});
You would need to implement sessionStorage.
When a user visits the page, we check to see if the sessionStorage contains a value for the modal. If it is the first time they load the page, it would not contain a value as we haven't set anything to it yet. In that case, we show the modal as normal and set a value for the sessionStorage. That way, when the user refreshes the page the value is already set in sessionStorage so the if statement will not run.
window.addEventListener('DOMContentLoaded', () => {
if (!sessionStorage.getItem("modal")) {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
sessionStorage.setItem("modal", "blah");
}
});
Related
I have a home page that displays results based on some user information. From results page user can navigate to profile page and edit information. After edit information, they navigate back to home page. The problem is, the home page not refreshed with new results. It still shows old results. How can i reload this page with the new data.
home.page.ts:
openProfilePage() {
this.router.navigate(['/profile']);
}
profile.page.ts
onSubmit() {
this.router.navigate(['/home'], {replaceUrl: true});
}
You can trigger a call you need to make to update the info on:
ionViewDidEnter() {
console.log('ionViewDidEnter ');
// call update function
}
ionViewWillEnter(){
//here you check data is changed or not and call your function according to that this method call every time when navigate to home page
}
The main interface for my app is dynamically built based upon whether or not the app has been activated. I created a previous route service that uses Angular’s Activated Route to detect if the main interface needs to be updated without doing a complete refresh.
I'm setting up an app which have to fill a long 4-part form, which might be displayed in 4 sequential screens in a mobile application. Now on the 4th part of the form, there is a submit button. User clicks on Submit and all the previous screens should be popped and user should be taken back to the Item-List screen(1st screen) where the updated data items must be shown. We won’t be pushing anything new here, just going back to a previous route. But the first page should be reloaded. How is this possible?
// Updated Answer
So if this is your first screen where you are pushing and where you want to call a function when poped, this is how you can do it.
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => RegisterScreen()))
.then((success) {
if(success){
// call your function here
}
});
I am automating an angular based UI. After a successful login to main page, sometimes, based on some logic, a modal based TOUR pops up which is intermittent. I need to click on CANCEL if the modal pop up appears and if does not appears then proceed with rest of execution. But my code fails with
"ElementNotVisibleError: element not interactable"
when I use below code to validate if element is visible.
browser.switchTo().activeElement().then(function() {
browser.sleep(1000);
element(by.id("closeBtn1")).isPresent().then(function(text) {
if (text) {
element(by.id("closeBtn1")).element(by.xpath('span')).click();
}
})
});
Here is what you are probably looking for:
browser.wait(protractor.ExpectedConditions.visibilityOf($('modal-popup-selector')), 2000)
.then(async function () {
$('modal-popup-cancel-button').click(); // if modal did appear then close it
}, function () {
// do nothing if modal did not appear within 2000 msc.
});
This approach works well if you do not know what are pre-conditions for the modal to be shown, but on the other side it will take extra time (2000 msc) for each time the modal did not appear.
Check visibilityOf condition docs.
I have the following code to check if my tab is liked by the user:
protected bool IsPageLiked()
{
try
{
var current = ConfigurationManager.GetSection("facebookSettings")
as IFacebookApplication;
dynamic data = FacebookWebContext.Current.SignedRequest.Data;
if (data.page != null)
{
var pageId = (String)data.page.id;
var isUserAdmin = (Boolean)data.page.admin;
var userLikesPage = (Boolean)data.page.liked;
if (userLikesPage)
return true;
}
}
catch (Exception ex)
{
return false;
}
return false;
}
This works correctly when I load my tab initially.
However, if I try and call the same code after changing page within the tab, I get the following error:
{"Precondition failed: !String.IsNullOrEmpty(signedRequestValue)"}
Is there a way I can make this code work after the first page?
I know I can check if the tab is liked on the first page, and put this into a session object or something, but I'd prefer not to do this.
My app itself is MVC 3
Thanks
EDIT
I think what is happening is when I change page (I'm using a RedirectToAction method), it's loosing the signed_request query string, hence the error I am getting.
Edit 2
Not sure the above is what is happening after all, as I can't see any query string values on the initial page? It's still not able to get the signedrequest.
It looks like the signed_request is a form object (Request.Form["signed_request"] returns the string in the inital page, but not the second page).
Page tabs are basically just your app within an iframe on the page, like you've noticed the signed request is POSTED to the tab on page load.
When you change page within the tab the outer Facebook frame isn't reloading so the signed_request is not being re-posted to your tab which is why you can't access it again.
You will need to either pass the signed_request from one page to the next yourself or make sure all links use target="_top" so that the whole page is reloaded each time and you still get the POST.
To define which page you want your tab to load you can use an additional parameter called app_data in the url to your tab, eg
http://www.facebook.com/MY_PAGE?sk=app_MY_APP_ID&app_data=A_STRING_OF_DATA
Your tab will then receive this as part of signed_request, you can grab it and use it to work out which page your tab needs to display.
I have searchbox in my web app.
I am curious how to clear ModelState when user hits back button. The page retains the 'text-input' from the search results page when the user hits back and goes to home page, which also has a search box.
Before Posting the ques did some initial research here.
I checked similar question on StackOverflow and saw that ModelState.clear() helps you clear he info. But when the user hits "back", the controller does not get called (obv!!) thereby Clear() does not get called.
So what is the best way to get around it.
One possible way would be to use javascript and clear the value when the page is loaded. For example with jQuery:
<script type="text/javascript">
$(function () {
$(':text').val('');
});
</script>