I've been trying to get this to work for 4 days now, with no luck.
I have a very simple jquery mobile app.
The app has a header, content and footer.
The footer is being generated dynamically on the 'pagecreate' event because it is always the same and I don't want to have its HTML in every page.
So I do something like this:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));
});
DrawHeader() and DrawFooter() simply prepent the header div to the page and append the footer div.
SetFooterEvents() sets the onclick events of the footer navbar buttons and SetActiveFooter() is SUPPOSED to set the ui-btn-active to the current active footer link.
To do this, I've added the data-active-footer attribute to the page div and the data-name attribute to the navbar elements. I'm searching for the current element according to the data-active-footer in the page and apply the ui-btn-active class.
function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");}
So far so good.
Now, say I've changed to a page and the navbar is lit (it has successfully recieved the ui-btn-active class), and I'm clicking on the previous page, the lit item in the navbar doesnt change back!
If i click on the the page again (ie: changed to second page [corrent lit], changed back to first page [second page is still lit], then clicked on first page again) it does light the navbar button.
What I found out was that jqm also changed the navbar of the previous page when I'm changing the navbar of the current page in the 'pagecreate' event.
I've tried to overwrite this behaviour using the 'pageshow' event, that is, trying to apply the ui-btn-active class to the current element in the navbar but the problem is that $(this) and e.currentTarget objects in the 'pageshow' event DO NOT CONTAIN THE FOOTER ELEMENT!!!
$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0
alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});
Any ideas?!
Thanks.
Before delving into more detail, please try adding .ui-state-persist together with .ui-btn-active
This makes sure active buttons stay active when you changePage and the footer is the same. Also make sure, all your footers have the same data-id attribute.
On a sidenote: check the latest blog post about upcoming features for jqm 1.1 - it will include a fetch link utility, which allows to ajax-update portions of a page. So you could use this functionality to grab and insert a footer on every page. I'm trying the same right now with a login form, which I need on every page.
Have you tried "ui-state-persist"?
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Home</li>
<li>Favorite</li>
</ul>
</div>
I still dont know why but jqm moves the footer from page to page, eventhough I assign a new footer to each page.
Maybe because I set the same ID to all of them.
Anyhow, I used this workaround to solve the problem:
On the 'pagebeforeshow' event, I set the button I want active to all the footers in the documents. I've set a special data-name attribute to each navbar button, I give it the 'ui-btn-active' class after removing it from the rest of the items.
var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");
Related
I have a button in the table in the first page. When I click on the button, I want to save the panel Id and display on the next page. How can I call the data in angular? I'm desperately seeking for help since I'm stuck in there for almost a week now.
These are the images for my problem.
enter image description here
So this one is the first page, where there are buttons in each row.
After clicking Assign, it should show readonly data of ship name and panel name.
enter image description here
Regarding your issue, you should get the panel_id from params in the URL.
E.g.
In the routing of the assigning page, you just set the path:
{
path: 'assigning/:id',
component: <YourComponent>
}
So you can get the panel_id by using ActivatedRoute.
On click event of "Assign" button, you can pass the value to the ts component. In the ts file you can pass it via URL route as a parameter to the next page or store it in localStorage and read from the next page.
<button (click)="passValue(value)">Assign</button>
I am using Bootstrap UI Pagination to paginate search results page and also want to store query, current page and page size in URL so it can be shared by users:
http://localhost:39519/#?q=security&limit=10&page=2
The problem is that when I browse link that, the 2nd page is displayed but after a while (when DOM is loaded) current page get reset and first page is
displayed.
Here is plunker but I dont know how to simulate change in URL.
<uib-pagination ng-show="total" direction-links="false" boundarylinks="true" items-per-page="pageSize" total-items="total" ng-change="pageChanged()" ng-model="currentPage"></uib-pagination>
http://plnkr.co/edit/RhxoYOyDjwyoLbMOFtct?p=info
I run on some interesting issue during working with nested Layouts.
Lets go right to example. A index.html have just one region:
...
<div id="screen" />
...
Now I have a login view which render on this region. When I succeed login I present home page(within ApplicaitonLayout) which contains so statistics. ApplicationLayout looks like this
<div id="screen">
<header />
<nav id="menu" />
<section id="content"/>
<footer />
</div>
what I do here is render ApplicationLayout in screen region. Important thing here is that I want home navigation to be routable. I omit a lot of JS/Marionette code but basically I have something like that(base on Brain Mann style)
var applicationLayout = ApplicationLayout();
var navigation = {
goHome: {
new MenuController({region: applicationRegion.menu});
new HomeController({region: applicationRegion.content});
}
}
app.screen.show(applicaitonLayout);
new HomeRoute(controller: navigation);
So what I do here is I ALWAYS need to render menu even if I don't need that for example someone click different menu option and only applicationRegion.content should be rerendered.
To be more general how to handle region which are partially static (After login menu always will be displayed) when navigation change?
Edit:
So the question is: Should I need always render menu on every change in menu navigation, even this menu is already there?
To be more specific we have 2 ways to reach home page:
- 1st route from browser, in which we would like to render whole home page(include menu)
- 2nd Navigate from menu item, in this case we should NOT need to render menu, because it should be there already.
For that purpose, use an application region: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md
Your menu would be displayed in a region, and the main content (which can contain layouts) would be in another region.
You can see an example (from my book on marionette) here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/app.js#L3
And a live example here: http://davidsulc.github.io/marionette-gentle-introduction/#contacts
Edit based on comments:
If your layout has been rendered (and therefore the menu is visible), you only need to change the layout's subview when a menu item is clicked: myLayout.show(newView).
The communication can be handled through reqres, see for example https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js#L11 (event trigger) and https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js#L27 (event handler)
Extjs prefers your app to be a single page app, but I'd still like to be able to do things like refresh my page and keep my current location in the app, and enter a url to get directly to a particular point in the app. Is there a solution for this?
Yes, I do the same in my app. You can use the Ext JS history mechanism to do so. Have a look at this example from Sencha.
You can listen to the history change event like this
Ext.History.on('change', function(token) {
// you navigate-to-target code goes here, e.g. change the viewport content
}
You can then initiate navigation by setting the browser hash to some navigation target
document.location.hash = yourNavigationToken;
This gives you also the ability to use deep-linking and forward/backward navigation with the browser buttons.
You need to init the history:
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
and add an iframe and a hidden input field to your page, like in the example:
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
How can i save the textfields and checkboxes to the DB without reloading the page?
Just to click on the button and then its in the DB. Nothing more. I don't get it. This means when I have a textfield where I type in a content -> then click the button, the content from the textfield should be in the DB and should do nothing more (not reloading the page, or go to top for example).
I don't get it.
EDIT:
When I have a a <div> tag with the id="testid" in the standard create.gsp:
def create() {
def mytestInstance = new Mytest(params)
}
and the <g:remoteLink> which should save this part looks like:
<g:remoteLink class="button" name="myForm" update="testid"
url="[controller:'mytest', action: 'create']" value="....." />
That does not work because the page is refreshing or something like this and the things are not stored in the DB, plus they are not in the textfields any more.
Use <g:formRemote> or <g:submitToRemote> to do the form submission with an Ajax call.
You should be able to use the formRemote tag to send the data to a controller via Ajax
Edit
As it says on that page;
This tag also requires the use of either the <g:javascript/>(link) or <g:setProvider/>(link) tags. See the AJAX section of the user guide to find out more.
Have you done that?