This is my code for the nav page which picks up all the props from the index page fine. But the nav page has a navigator component and it seems unable to pass through the props from a simple state to the initial route page in the navigator.
var MainPage = React.createClass({
render () {
return (
<NavigatorIOS ref="nav" style={styles.container} titleTextColor='#FFFFFF' barTintColor='#061009' tintColor='#ECCB2B' navigationBarHidden={true}
initialRoute={{
component:HomePage,
title: 'Home Page',
passProps: {
language:this.props.language
}
}} />
);
}
});
I click a button to call a function located on the index page to update the state there and the result will pass through to the home page but not to the initial route navigator page. this.props.language updates on the home page but not on the second page where it is being activated. The value itself is there, its not null, it just never changes.
Functions are passed through ok, its just not updating on the fly. So when I click whilst on the initial route navigator page to change the language, the language changes for the tab bar index page ok but does not update in the initial route navigator page.
Related
I've been using the MasterPageDetail approach in creating a hamburger menu for my Xamarin Forms app. The menu itself works fine as taken from the Xamarin documentation https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/. What I noticed was that if I create a simple link to a page in one of my views, the hamburger menu and it's icon are replaced with a back button.
What I would like to know is how to create a link in a content page that will preseve my hamburger menu instead of showing a back button. Any link you click from the MasterPage takes you to the corrosponding view but you can still see the hamburger menu, if you click a link within one of the pages however you are taken to the page but with a back button instead. It's causing a very confusing navigational experience for my users.
The following code demonstrates how the manu is created in the hamburger menu just now.
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
public MasterPage()
{
InitializeComponent();
//var master = new MasterPage();
var masterPageItems = new List<MasterPageItem>();
masterPageItems.Add(new MasterPageItem
{
Title = "Dashboard",
IconSource = "dashboard-icon-24.png",
TargetType = typeof(Dashboard)
});
listView.ItemsSource = masterPageItems;
}
So that works perfectly, you can navigate around and the hamburger menu is there all the time.
Within my view called 'dashboard' I added some link to hope to those same pages that are in my hamburger menu, I did so int he following way:
<Button Text="Information" Clicked="informationClick" />
The code for this is as follows:
private void informationClick(object sender, EventArgs e)
{
Navigation.PushAsync(new Information());
}
When you click on this link however you lose the hambuger menu and it's repalced with the back button instead. I want to preserve the hamburger menu, does anyone know how I can do this from my content page?
You must replace the "Detail" property of your MasterDetail page with a new NavigationPage containing the page you are linking.
Something like that:
(App.Current.MainPage as MasterDetailPage).Detail = new NavigationPage(new ContactsPage());
This is not really clean but it makes the idea.
I am creating a website of static pages in MVC5. I want to update the "content" div on the right side , based on the menu item clicked which is on the left side of the page without refreshing the whole page. I have used one partial view for the menu part and for each item in menu , I have created partial views .
You could use something like this where 'yourMenuItem', 'partialUrl' and 'rightPanel' refer to the menu option to be clicked, the URL of partial returning the content and the target div where content is to be inserted:
$('#yourMenuItem').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$.get("/partialUrl", function(data) {
$("#rightPanel").replaceWith(data);
});
});
You should probably use #(Url.Action("Action", "Controller")) to derive the partial URL.
Prior to JQM 1.4, I created dialogues using data-role="dialog" and those pages were not added to the back stack, so navigating off one and then pressing back would bring you to the page before the dialog.
Now with 1.4.5, dialogues are defined as data-role="page" with data-dialog="true". Using this method, the dialog is added to the back stack, so if I navigate off the dialog and then tap back I am returned to the dialog. This is not the behavior I want. Is there a way, when the dialog opens, to tell JQM NOT to add it to the back stack?
Updated
As of jQuery Mobile 1.4, dialog widget is deprecated and will be removed in 1.5. It is now converted into a page - as you've mentioned - with data-dialog="true".
When you navigate to a dialog, jQM updates framework's navigation history as well as browser's navigation history. Even if you navigate to a dialog programmatically with changeHash disabled, when you hit back button, you will redirected to second previous history record.
A work around is to listen to pagecontainerbeforechange and alter toPage to navigate to the page where the dialog was called.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string" && data.options.direction == "back") {
var active = $.mobile.navigate.history.activeIndex;
for (var i = active; i >= 0; i--) {
if (!$($.mobile.navigate.history.stack[i].hash).hasClass("ui-dialog") && !$($.mobile.navigate.history.stack[i].hash).hasClass("ui-page-active")) {
data.toPage = $.mobile.navigate.history.stack[i].url;
data.options.transition = "flip";
break;
}
}
}
});
When you want to alter toPage, it should be a string and not an object. The event fires twice on each navigation, it returns string first and then an object.
When it returns a string, check navigation direction options.direction. If the direction is back, loop through $.mobile.navigate.history.stack in reversed order. The previous record should not be a dialog ui-dialog nor the active page ui-page-active. If both conditions return true, alter toPage.
Demo
I have a link in my navigation toolbar which is in the footer. When I am on a page, and click on the nav link, It brings me to #the-page for a split second, but then I get redirected back to the page I was previously on.
Anyone else run into this problem?`
$('#page-link').on('click', function() {
$.mobile.pageContainer.pagecontainer("change", "#the-page", { } );
});
This on click was in a pageshow function of the page that was showing for a split second
$('.ui-listview').on('click', 'li.latest-news', function() {
$.mobile.pageContainer.pagecontainer("change", "#single-article", { } );
});
by moving it to a pageinit function it seemed to fix it.
It turns out this was a rebinding problem, I added a console.log inside of this function, and realized it was being called multiple times per click.
I am developing one app that uses iScroller to display list of products,
I have used the pageshow event for loading the list of product, due to some circumstances i am not able to use the pageinit().
Issue is that when i click on any product it shows product detail page, but on product detail page when i click on back button, it again call the pageshow() of the product list page.
I dont want to run the pageshow() when user clicks on back button on detail page, other then this back button i want to run the pageshow() from everywhere else.
Please tell me how to solve this scenario.
The below example uses a variable to check whether back-button was clicked to view #products page. Once user navigate to from #products to #details and back using back-button it will alert that #products was viewed and thus you can stop reloading data again.
However, if a user navigate to other pages and back to #products page, it will work normally as it hasn't been viewed.
Demo
var viewed = false;
$(document).on('click', '.backbtn', function () {
viewed = true;
});
$(document).on('pagebeforeshow', '#products', function () {
if (viewed) {
alert('page has been viewed');
viewed = false;
}
else {
alert('first visit!');
}
});