I am using an ionic tabs project. IONIC uses angular JS's ui-router for routing.
In a tab I want to have multiple state and I want to route between states.
for routing between states i am using $state.g();
here is my code:
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('footer',{
url:'/footer',
abstract:true,
templateUrl:'templates/footer.html'
})
.state('footer.home',{
url:'/home',
abstract:true,
views:{
'footer-home':{
templateUrl:'/templates/hometemplate.html',
controller:'HomeCtrl'
}
}
})
.state('footer.home.mainhome',{
url:'/mainhome',
parent:'footer.home',
views:{
'footer-home-landing':{
templateUrl:'/templates/myHome.html',
controller:'HomeCtrl'
}
}
})
.state('footer.home.about',{
url:'/about',
parent:'footer.home',
views:{
'footer-home-about':{
templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
controller:'AboutCtrl'
}
}
})
hometemplate.html: i have two ion-nav-view's inside on ion-nav-view
<ion-nav-view view-title="HomeTemplate">
<ion-nav-view name="footer-home-landing"></ion-nav-view>
<ion-nav-view name="footer-home-about"></ion-nav-view>
</ion-nav-view >
Now in myHome.html i have an image. on click of image I am using $state.go('footer.home.about');
In my test.html, i have one image on click of it want to take back to my myHome.html using $state.go('footer.home.myhome').
Here comes the problem. while going back to 'footer.home.myhome' myhome contents are not getting displayed. still the test.html contents are displaying but the click events on it are not triggering.
Strange behavior. Not understanding where I did wrong.
its almost like angular js, no need to worry about ionic.
Can somebody help me?
Not sure if this is just a mistake in your question but you should be using $state.go('footer.home.mainhome') instead of 'myhome'
The way i was trying is not correct.
found the right way of doing it here: http://codepen.io/TimothyKrell/pen/bnukj
so, instead loading two child states in an abstract state, have one state and have the other as their child state.
my code is not this way
.state('footer',{
url:'/footer',
abstract:true,
// views:{
// 'MainScreen':{
templateUrl:'templates/footer.html',
data: {
requireLogin: true
}
//}
//}
})
.state('footer.home',{
url:'/home',
// abstract:true,
views:{
'footer-home':{
templateUrl:'/templates/Home.html',
controller:'HIPACCtrl'
},
}
})
.state('footer.home.about',{
url:'/abouthipac',
//parent:'footer.home',
views:{
'footer-home#footer':{
templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
controller:'AboutCtrl'
}
}
})
Related
I am using Laravel+VueJs. I stuck on one thing. I am trying to load a new view using laravel route. I am using axios.
getRelatedChat(id) {
return axios.get('/chat/'+id).then(({ data }) => {
// document.write(data)
});
}
The code of whole view is coming in console as output, but i want to load it like window.url does for us. Have no idea how to do.
Vue has its own router. If you want to load a new page you can still use axios to get the data you want to show in the next page you want to open. Just try the Vue Router
I was making a nonsense. Actually there is no need to load the view. I can update some variable that are using on present component just like this:
axios.get('/chat/json/'+id).then(({ data }) => {
this.messages =data.messages;
this.withUser = data.user;
}
I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.
I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.
There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.
Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.
After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?:
export default class DuplicateButton extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = ({ redirect: false });
var redirectPath = '';
}
handleClick = (props) => {
var
{
push, record, resourceName
} = this.props;
let tempRecord = record;
var result = '';
console.log(this.props);
var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
result = resp.data;
let routePath = '/' + this.props.resource + '/' + result.id;
console.log(routePath);
this.redirectPath = routePath;
this.setState({ redirect: true });
return result;
});
}
render() {
if (this.state.redirect) {
console.log('Redirect to Edit page');
return <Redirect push to={this.redirectPath} />;
}
return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
I've got a modal window that when you click 'Add', it does its thing, dismisses, and then when the promise is resolved, publishes some events that tell relevant components to update:
this._viewControl.dismiss().then(() =>
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
Problem is, sometimes it works and they update their views, sometimes not. The modal always dismisses and the events fire though.
Am I doing something fundamentally wrong here?
Thanks.
Problem is, sometimes it works and they update their views, sometimes
not.
As you can read in this answer, Application state change is caused by three things:
1) Events - User events like click, change, input, submit, …
2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -
3) setTimeout(),setInterval(), because JavaScript
It turns out that these are the only cases when Angular is actually interested in updating the view.
So if you want to update other things outside Angular way, you will have to let Angular know that something has changed and needs to we aware of updating things. You can do this by first importing ngZone like this:
import { ..., NgZone } from '#angular/core';
Declaring it in your constructor like this:
constructor(..., private ngZone: NgZone ) { //... }
And then surrounding your code inside a zone
this._viewControl.dismiss().then(() =>
this.ngZone.run(() => {
// Execute here what you want and Angular will update the view for you.
// ...
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
});
Have you tried onDismiss ?
this._viewControl.onDismiss(() => {
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
So, it turns out, if I empty out my collection when I'm refreshing, so..
e.g
updatePage() {
this.myCollection = [];
this.someService.getItems().then(items => {
this.myCollection = items;
});
}
then the page always shows the update. So I'm going to put this one down to a timing/change detection bug in Angular 2 and move on!
I am new in using jquery. I am trying add in the simplemodal.js (Eirc Martin's simple modal) a function called 'jBox' that will take the data (ie link) and options and using ajax will load the content into the modal container. This way I want on my pages in several places easy call this function
jBox = function(address, options){
$.get(address, function(data) {
$.modal(data);
});
};
});
The code is working fine, but i would like to add a loading image before the content is fully loaded. There is a lots of similar posts about loader/ spinner in simplebox but none of the works for me.
I was trying following code
$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();
But, some way, it doesnt work for me. Any ideas what I am doing wrong? Thanks
I use the ajaxStart and ajaxStop events.
$("body").on({
ajaxStart: function() {
$(this).addClass("loading"); // so page knows it's in loading state
// .. your modal code
},
ajaxStop: function() {
$(this).removeClass("loading"); // not it loading state anymore
// .. What you should do if loading is done. (eg. hide modal)
}
});
In this case I set the body class to 'loading'. So you can do some magic in css if you like.
I tend to use it to disable forms as well.
body.loading div.some-class {
// your special style for during loading
}
Example: (werkwijze is custom, i also have the same code with other names like -contact)
$(function() {
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
});
$('#boxclose-werkwijze').click(function(){
$('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
$('#overlay-werkwijze').fadeOut('fast');
});
});
});
activator shows the content, boxclose closes the content.
clicking all activators opens all content while it needs to open only one and close the others..
edit got it fixed:
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/
You need to provide more information about how you are calling the pop-up script. If you are using jquery, you can just close all and then open one
$('.className').slideDown(200);
$('#specificItem').slideUp(200);
But again, you should explain how you are doing the calls in more detail for a better answer
example, put inside function jQuery
if($('.hide').css('display')=='block'){ $('.hide').slideUp(); }else{ $('.hide').slideDown(); }
$(function() {
$('.activator').each(function(){
$(this).click(function(){
showHideAnimation(clickedObj);
});
});
}
function showHideAnimation(clickedObj)
{
$('.activator').each(function(){
if($(this).id == clickedObj.id) {
$(this).fadeIn('fast',function(){
$(this).animate({'bottom':'0px'},800);
});
} else {
$(this).animate({'bottom':'-600px'},800,function(){
$(this).fadeOut('fast');
});
}
}
}
Please try this if it doesn't work properly then replace $(this) with only this