I am trying to insert a piece of html code (ion-header-bar) after i click on login button . I need this code to be added on top of all the modules. As it is a same piece of code in all the modules, is there anyway to achieve it by writing it in a single place rather than adding the repeated code to all the modules.
EDIT I realize that the question did not clarify which version of ionic is used. This answer is only working for ionic 2 and ionic 3 (and possibly later versions) - ionic 1 will work differently
if you follow the typical structure of an Ionic 2 or 3 Project (with an App.component using <ion-nav>) you would just put the <ion-header-bar> next to your <ion-nav> with an *ngIf:
/// src/app/app.html
<ion-header-bar *ngIf="isUserLoggedIn()">This only shows when is UserLoggedIn() returns true</ion-header-bar>
<ion-nav [root]="rootPage"></ion-nav>
And inside your app.component.ts you just implement the function used by the *ngIf
/// src/app/app.component.ts
#Component({
templateUrl: 'app.html'
})
export class MyApp {
public rootPage: any = MenuPage;
public isUserLoggedIn(): boolean {
// TODO: Implement this to return true when the user is logged in
}
}
there are many ways to do this - but this is about the simplest I can think of right now, given the limited information you provided.
I created a codepen for this:
https://codepen.io/anon/pen/aEYBmL
In your HTML add ng-if to your header bar and give it a function that just returns true when the user is logged in:
<html>
(...)
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive" ng-if="isUserLoggedIn()">
<h1 class="title">this only shows if isUserLoggedIn() returns true</h1>
</ion-header-bar>
<ion-content>
<h1 style="margin-top: 56px">Here is your other content!</h1>
</ion-content>
</body>
</html>
then attach that function or variable to your scope inside your controller:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.isUserLoggedIn = () => {
// TODO Implement this
return true;
}
});
read about ng-if here:
https://docs.angularjs.org/api/ng/directive/ngIf
EDIT: Displaying a component on every screen:
Look at this codepen:
https://codepen.io/calendee/pen/ubzDq
here you have your ion-nav-navbar (which is simmilar to a ion-header-bar with a backbutton and a title) outside of ion-nav-bar, which makes it display all the time - without putting it everywhere
///This wont be replaced as its not inside the ion-nav-view. So its displayed on every screen.
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
/// Everything in here will be replaced by your current navstack
</ion-nav-view>
Related
This previous SO question shows how we can use a Vue2 component as the content of a LeafletJS popup. I've been unable to get this working with Vue3.
Extracting the relevant section of my code, I have:
<script setup lang="ts">
import { ref } from 'vue'
import L, { type Content } from 'leaflet'
import type { FeatureCollection, Feature } from 'geojson'
import LeafletPopup from '#/components/LeafletPopup.vue'
// This ref will be matched by Vue to the element with the same ref name
const popupDialogElement = ref(null)
function addFeaturePopup(feature:Feature, layer:L.GeoJSON) {
if (popupDialogElement?.value !== null) {
const content:Content = popupDialogElement.value as HTMLElement
layer.bindPopup(() => content.$el)
}
}
</script>
<template>
<div class="map-container">
<section id="map">
</section>
<leaflet-popup ref="popupDialogElement" v-show="false">
</leaflet-popup>
</div>
</template>
This does produce a popup when I click on the map, but it has no content.
If, instead, I change line 14 to:
layer.bindPopup(() => content.$el.innerHTML)
then I do get a popup with the HTML markup I expect, but unsurprisingly I lose all of the Vue behaviours I need (event handling, etc).
Inspecting the addFeaturePopup function in the JS debugger, the content does seem to be an instance of HTMLElement, so I'm not sure why it's not working to pass it to Leaflet's bindPopup method. I assume this has something to do with how Vue3 handles references, but as yet I can't see a way around it.
Update 2022-06-09
As requested, here's the console.log output: I've put it in a gist as it's quite long
So just to document the solution I ended up using, I needed to add an additional style rule in addition to the general skeleton outlined in the question:
<style>
.leaflet-popup-content >* {
display: block !important;
}
</style>
This overrides the display:none that is attached to the DOM node by v-show=false. It would be nice not to need the !important, but I wasn't able to make the rule selective enough in my experiments.
I use jquery datepicker and it not display after I click ajax button.
Is there any way to show datepicker again after click? I use wicket 8.
BasePage.java
public class BasePage extends WebPage {
...
}
BasePage.html
<body>
...
<script src="/js/jquery.min.js"></script>
<script src="/js/jqueryui.min.js"></script>
<script src="/js/main.js"></script>
</body>
HomePage.java
public class HomePage extends BasePage {
public HomePage() {
SearchForm searchForm = new SearchForm();
Form<SearchForm> form = new Form<>(new CompoundPropertyModel<SearchForm>(searchForm))
AjaxButton btn = new AjaxButton() {
protected void onSubmit(AjaxRequest target) {
// Handle search data
...
target.add(form);
}
};
TextField<String> date = new TextField<>("searchDate");
form.add(date);
form.add(btn);
}
}
HomePage.html
<wicket:extend>
<form wicket:id="form">
<input wicket:id="searchDate" class="datepicker" />
<button wicket:id="btn">Search</button>
</form>
</wicket:extend>
main.js
$(function() {
$(".datepicker").datepicker();
...
});
After click ajax button all script in file main.js not working
Please help me.
when you update form via AJAX you replace each element inside it, which includes the input field you use with datepicker. But doing so you loose the javascript setting done by main.js when page was first loaded.
You can solve this in two ways. First, you could update only those elements that need to be refreshed, for example the component that you use to show search result (I suppose there must be such an element in your code).
The second solution, more heavier and complicated, is to make a custom TextField component that execute the datepicker javascript code each time is rendered.
An example of such solution can be found is in the user guide: https://wicket-guide.herokuapp.com/wicket/bookmarkable/org.wicketTutorial.ajaxdatepicker.HomePage
I would recommend to follow the first solution as it's more natural and simpler and requires less code.
UPDATE:
If you want to refresh the textfield another simple solution is to use target.appendJavaScript​ to reapply the datepicker plugin:
target.add("$('#" + date.getMarkupId() + "').datepicker();");
this should add the datepicker to the fresh new field.
In my Ionic 1.3.1 app I am using the ion-slides component to display sections of a questionnaire:
<ion-slides options="vm.options" slider="data.slider">
<ion-slide-page ng-repeat="s in ::vm.sections">
<div class="bar bar-header bar-positive">
<button class="button button-small button-icon icon ion-chevron-left"
ng-click="vm.previous()"
ng-show="::$index !== 0"></button>
<h1 class="title">{{::s.text}}</h1>
<button class="button button-small button-icon icon ion-chevron-right"
ng-click="vm.next()"
ng-show="::($index + 1) < vm.sections.length"></button>
</div>
<ion-content class="has-header">
<div ng-if="s.include" ng-show="s.show">
<!--My content-->
</div>
</ion-content>
</ion-slide-page>
</ion-slides>
In my controller I listen for the slideChangeStart:
$scope.$on("$ionicSlides.slideChangeStart", function (event, data) {
alert('slideChangeStart');
vm.activeIndex = slider.activeIndex;
vm.propertySurvey.CurrentSectionIndex = vm.activeIndex;
//include is used on an ng-if so elements are removed from the dom
//and the number of watchers is reduced
//also, the slider displays the contents of the
//previous slide unless they are explicitly hidden
vm.sections[slider.previousIndex].include = false;
vm.sections[slider.previousIndex].show = false;
initialiseQuestions(vm.activeIndex);
});
When I click on my previous and next buttons, which call slider.slidePrev() or slider.slideNext(), the slideChangeStart event fires - and I see the alert. But if I slide the page using a gesture - the header changes as I expect but the event does not fire. I've tried switching the swipe off in my options without success (not my preferred solution anyway):
vm.options = {
noSwiping: true,
effect: 'fade'
}
UPDATE
I tried using slideChangeEnd but that event isn't firing either.
So I moved all my code into a single gotoSlide(index) method that I call from my next, previous and pagerClick methods - so that I don't rely on the ion-slides event.
And I added Ionic on-swipe directives to my ion-slide-page component to see if they would work:
<ion-slide-page ng-repeat="s in ::vm.sections"
on-swipe-left="vm.next()"
on-swipe-right="vm.previous()">
That made the swipe work in the Ripple emulator (where it wasn't working at all before), but it still doesn't work on any of my android devices. Again, the swipe events don't seem to fire.
I am using the Crosswalk plugin
The problem goes away if I remove the effect option. So this works:
vm.options = {
noSwiping: false,
speed: 300
}
And, since these are the default values anyway, I ended up removing the options object altogether.
NB replacing 'fade' with 'slide' did not work
Reference:
http://ionicframework.com/docs/api/directive/ionSlides/
I had a similar problem, and the above answer did not work for me, so I thought I'd share what did:
Per the Swiper API (which underlies ion-slides), you can add event based call backs directly to the widget.
The following worked for me (assuming the scope.slider object...)
//the 'slideChangeStart' event has a slider argument in its callback
scope.slider.on('slideChangeStart', function(slider) {
//do stuff - maybe you want to store the activeIndex
scope.indexIReallyCareAbout = slider.activeIndex;
});
The Swiper API gives a list of events that can named in the 'on' callback function under the header Callbacks
I'm trying to update the title of the document in a React app. I have very simple needs for this. The title is essentially used to put the Total component on display even when you're on a different tab.
This was my first instinct:
const React = require('react');
export default class Total extends React.Component {
shouldComponentUpdate(nextProps) {
//otherstuff
document.title = this.props.total.toString();
console.log("Document title: ", document.title);
return true;
}
render() {
document.title = this.props.total;
return (
<div className="text-center">
<h1>{this.props.total}</h1>
</div>
);
}
}
I thought this would just update the document.title every time this component was rendered, but it doesn't appear to do anything.
Not sure what I'm missing here. Probably something to do with how React runs this function - maybe somewhere that the document variable isn't available?
EDIT:
I'm starting a bounty for this question, as I still haven't found any solution. I've updated my code to a more recent version.
A weird development is that the console.log does print out the title I'm looking for. But for some reason, the actual title in the tab isn't updating. This issue is the same across Chrome, Safari, and Firefox.
I now use react-helmet for this purpose, as it allows to customize different meta tags and links, and it also supports SSR.
import { Helmet } from 'react-helmet'
const Total = () => (
<div className="text-center">
<Helmet>
<meta charSet="utf-8" />
<title>{this.props.total}</title>
</Helmet>
<h1>{this.props.total}</h1>
</div>
)
Original answer: there's actually a package by gaeron for this purpose, but in a declarative way:
import React, { Component } from 'react'
import DocumentTitle from 'react-document-title'
export default class Total extends Component {
render () {
return (
<DocumentTitle title={this.props.total}>
<div className='text-center'>
<h1>{this.props.total}</h1>
</div>
</DocumentTitle>
)
}
}
Inside your componentDidMount() function in App.js (or wherever), simply have:
componentDidMount() {
document.title = "Amazing Page";
}
The reason this works is anywhere in your react project you have access to the Js global scope. Go ahead and type window in your sites console. Basically everything there you will be able to access in your React project.
I think webpack-dev-server runs in an iframe mode by default:
https://webpack.github.io/docs/webpack-dev-server.html#iframe-mode
So that might be why your attempts to set the title are failing. Try setting the inline option to true on webpack-dev-server, if you haven't already.
If the react-document-title package isn't working for you, the quick'n'dirty way to do that would be in a lifecycle method, probably both componentDidMount and componentWillReceiveProps (you can read more about those here):
So you would do something like:
const React = require('react');
export default class Total extends React.Component {
// gets called whenever new props are assigned to the component
// but NOT during the initial mount/render
componentWillReceiveProps(nextProps) {
document.title = this.props.total;
}
// gets called during the initial mount/render
componentDidMount() {
document.title = this.props.total;
}
render() {
return (
<div className="text-center">
<h1>{this.props.total}</h1>
</div>
);
}
}
There is a better way of dynamically changing document title with react-helmet package.
As a matter of fact you can dynamically change anything inside <head> tag using react-helmet from inside your component.
const componentA = (props) => {
return (
<div>
<Helmet>
<title>Your dynamic document/page Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
.....other component content
);
}
To change title, meta tags and favicon dynamically at run time react-helmet provides a simple solution. You can also do this in componentDidMount using the standard document interface. In the example below I am using the same code for multiple sites, so helmet is looking for favicon and title from an environment variable
import { Helmet } from "react-helmet";
import { getAppStyles } from '../relative-path';
import { env } from '../relative-path';
<Helmet>
<meta charSet="utf-8" />
<title>{pageTitle[env.app.NAME].title}</title>
<link rel="shortcut icon" href={appStyles.favicon} />
</Helmet>
I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.
I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.
Any Idea what will work good as an replacement ??
Thanks for your help.
I was also looking for a similar plugin and then I found mdl-jquery-modal-dialog
https://github.com/oRRs/mdl-jquery-modal-dialog
I used this because the other one I found was having issue on IE11. This one works fine.
<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Show Info
</button>
Here a JSFiddle: https://jsfiddle.net/w5cpw7yf/
I came up with a pure JavaScript Solution for this
You can use the default bootstrap data attributes for the buttons, and make sure that your buttons and modals have their own unique IDs.
You need to have Material Design Lite's JS included before using this JavaScript
Check out the code. Any reviews are welcomed. :)
// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');
// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
var t = modalTriggers[i].getAttribute('data-target');
var id = '#' + modalTriggers[i].getAttribute('id');
modalProcess(t, id);
}
/**
* It applies the listeners to modal and modal triggers
* #param {string} selector [The Dialog ID]
* #param {string} button [The Dialog triggering Button ID]
*/
function modalProcess(selector, button) {
var dialog = document.querySelector(selector);
var showDialogButton = document.querySelector(button);
if (dialog) {
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
}
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
Show Modal
</button>
<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
<span class="close">×</span>
<h4 class="mdl-dialog__title">Hello World</h4>
<div class="mdl-dialog__content">
<p>This is some content</p>
</div>
</dialog>
I use MDL with bootstrap and the modal is displayed correctly after adding the data-backdrop attribute this to the modal element:
<dialog data-backdrop="false">
Hope it helps!