I define a URL in Slim such as:
$app->get('/dashboard/items?', ....
I then add a link to it in sidebar.twig, and sure enough, it becomes of class "active" once the link is visited.
However, if the URL contains parameters, the link no longer becomes "active".
e.g. /dashboard/items?page=3
I want the menu to recognize that we are still on the same page, and be highlighted as active. Best way to fix that?
Thank you
[UserFrosting 0.3.1]
UserFrosting determines which menu item to highlight by trying to match the current page URL against the URLs in the sidebar menu.
By default, it is configured to compare the entire URL, before any # hashes. To have it disregard your query parameters as well, try having it split the current URL on both # AND ?:
var url_head = url.href.split(/[#\?]+/, 1)[0];
return this.href == url_head;
Related
I have an view that extends the current project view, where we add multiple tabs (notebook pages) to show information from other parts of a project.
One of these pages is an overview page that summarizes what is under the other tabs, and I'd like to link the headlines for each section directly to each displayed page. I've currently solved this by using the index of each tab and calling bootstrap's .tab('show') method on the link within the tab:
$(".overview-link").click(function (e) {
e.preventDefault();
var sel = '.nav-tabs a:eq(' + $(this).data('tab-index') + ')';
$(sel).tab('show');
});
This works since I've attached a data-tab-index="<int>" to each header link in my widget code, but it's brittle - if someone adds a tab later, the current indices will be broken. Earlier I relied on the anchor on each tab, but that broke as well (and would probably break if a new notebook page were inserted as well).
Triggering a web client redirect / form link directly works, but I want to show a specific page in the view:
this.do_action({
type: 'ir.actions.act_window',
res_model: 'my.model.name',
res_id: 'my.object.id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'current'
});
Is there any way to link / redirect the web client directly to a specific notebook page tab through the do_action method or similar on FormWidget?
If I understood well you want to select the tab from the JavaScript (jQuery) FormWidget taking into account that the id could change if anybody install another module that adds another tab
Solution 0
You can add a class to the page in the xml form view. You can use the id of the element selected by this class name in order to call the right anchor and select the right tab item. This should happen when the page is completely loaded:
<page class="nb_page_to_select">
$('a[href=#' + $('.nb_page_to_select').attr('id') + ']').click()
NOTE: As you have said the following paragrah I assume that you know where to run this instruction. The solution I suggest is independent of the index.
This works since I've attached a data-tab-index="<int>" to each
header link in my widget code, but it's brittle - if someone adds a
tab later, the current indices will be broken. Earlier I relied on the
anchor on each tab, but that broke as well (and would probably break
if a new notebook page were inserted as well).
Solution 1
When the page is loaded you can get the tab list DOM object like this:
var tablist = $('ul[role="tablist"]')
And then you can click on the specifict tab, selecing by the text inside the anchor. So you don't depend on the tab index:
tablist.find('a:contains("Other Information")').click()
I think if you have two tabs with the same text does not make any sense, so this should be sufficient.
Solution 2
Even if you want to be more specific you can add a class to the notebook to make sure you are in the correct notebook
<notebook class="nt_to_change">
Now you can use one of this expressions in order to select the tab list
var tablist = $('div.nt_to_change ul.nav-tabs[role="tablist"]')
// or
var tablist = $('div.nt_to_change ul[role="tablist"]')
Solution 3
If the contains selector doesn't convince you because it should be equal you can do this as well to compare and filter
tablist.find('a').filter(function() {
return $.trim($(this).text()) === "Other Information";
}).click();
Where "Other Information" is the string of the notebook page
I didn't tried the solution I'm giving to you, but if it doesn't work at least may be it makes you come up with some idea.
There's a parameter for XML elements named autofocus (for buttons and fields is default_focus and takes 1 or 0 as value). If you add autofocus="autofocus" to a page in XML, this page will be the displayed one when you open the view.
So, you can try to add this through JavaScript, when the user clicks on the respective link -which honestly, I don't know how to achieve that by now-. But you can add a distinctive context parameter to each link in XML, for example context="{'page_to_display': 'page x'}". When you click on the link, I hope these context keys will arrive to your JS method.
If not, you can also modify the fields_view_get method (here I wrote how to do that: Odoo - Hide button for specific user) to check if you get the context you've added to your links and add the autofocus parameter to the respective page.
As you said:
This works since I've attached a data-tab-index="" to each header
link in my widget code, but it's brittle - if someone adds a tab
later, the current indices will be broken.
I assume that your app allow multi-user interaction in realtime, so you have to integrate somewhere in your code, an update part function.
This function will trig if something has changed and cleanout the data to rebuilt the index in order to avoid that the current indices will be broken.
I've already tried to find anything about that problem but I guess I either was not sure how to shortly describe the problem to find a solution or nobody else had that before which I can't think of. Maybe my thinking is wrong, too.
I have a stateless wicket 1.6 form with an ajax supporting panel (WebMarkupContainer with output id). The panel holds a dataview with paging navigator. The dataview itself is filled by a DataProvider.
The panel shows some entries from the database and below that is the navigator. by clicking any page on the navigator, the panel is refreshed (ajax) and shows content from that page. The page itself is not re-rendered by the browser.
When I now leave the page by navigating to another internal page (so basically when leaving the dataview-panel-page in any way) to open a detail page or so and then return to that dataview-page the navigator is resetted (because it's stateless I guess). The navigator can't remember which page to show and begins at the top of the first page again.
The question is: How can I solve this? I would like to i.ex. navigate to page 2 and then temporary leave the page for another internal page. When returning I want to be on page 2, focussed on the record where I clicked the link to "details" before. This also happens when I just open a new page in a new Browser tab.
Thank you!
Here's some code:
final WebMarkupContainer gamesPanel = new AjaxContainer("gamesPanel");
final DataView<Game> dataView =
new GameDataView("gameOverview", targetCurrencyModel, searchTextModel, gameFilterModel,
new GameDataProvider(searchTextModel, gameFilterModel, targetCurrencyModel));
dataView.setItemsPerPage(ITEMS_PER_PAGE);
gamesPanel.add(dataView);
final XNPagingNavigator navigator = new XNPagingNavigator("navigator", dataView);
navigator.setOutputMarkupId(true);
add(navigator);
You guys can try what I mean: The page I'm talking about is http://www.xbox-now.de. Just navigate to page 2, then click on details and return to main page.
I think you might use History API to push a new state when you click on navigation bar. In the new URL for the state you can include a parameter that indicates the index of the current navigator page.
You can customize your AJAX link in order to perform this operations when user click on it.
For more details on History API see Updating address bar with new URL without hash or reloading the page
I solved this in the NoWicket framework by introducing a model aware page cache which reuses page instances when hashcode/equals matches in the page model. You can see the implementation in the GitHub repo, try this implementation of the IPageFactory wrapper as a starting point, but it is more code involved there, just check out the code, debug the example and navigate the code to understand it better in order to apply it to your application. See your use case in action by trying this data table example in the documentation website (which you can also debug locally): http://invesdwin.de/nowicket/ajaxdatatable
Try changing the paging index, navigate to a different page and navigate back to the data table example page. You will still see the paging index that you left there.
Thank you guys for your replies. I've done it now another way. Used the base code from here and modified it in some ways. Added some nice css AttributeModifiers to indicate the actual page:
item.add(new AttributeModifier("class", new PageLinkCssModel(pageable, pageIndex, "active")));
Then I modified some code to add or reset the page parameter, that it's 1) used only once and 2) keeps all the actual page parameters which were there before adding own ones. So I am just appending the page number now. This way I can keep my initially mount path like www.foo.bar/path/path/path. Complete URL would now look like: www.foo.bar/path/path?page=123.
To pass my entered page (i.e. page=5) to the data provider I just had to override the providers iterator. It should start with the page I entered. Due to the ugly generated navigator URLs (which are extremly bad for SEO) I now have nice looking urls which are working independently what wasn't possible before. And that's also the reason why I could not get back to the correct page. The navigator URL was not lookup-able by wicket.
new DataView<GamePrice>("gamePriceOverview", new GameDetailDataProvider(gameId, targetRegion) {
#Override
public Iterator<GamePrice> iterator(final long first, final long count) {
return super.iterator(ITEMS_PER_PAGE * getCurrentPage(), count);
}
getCurrentPage() comes from the base template and gets the actual page number entered (if one is entered):
public long getCurrentPage() {
// -1 weil zero based
return getRequest().getQueryParameters().getParameterValue("page").toString() != null
? (getRequest().getQueryParameters().getParameterValue("page").toLong() - 1)
: 0;
}
So instead of having ugly SEO-unfriendly URLs which are also not compatible to work independant (directly enter the generated url) I now have the same URL I expect with an added page-parameter.
URL now would looks like:
http://localhost:8080/game/4249/de/doom-preorder?page=2
URL before was:
localhost:8080/game/4249/DE/doom-preorder?0-1.ILinkListener-gamePrices-navigator-navigation-2-pageLink
If I now go back from the detail page to the main index with active "Bookmarkable-Navigator", I correctly come back to the page and position where I left it (because of bookmarkable page links).
That's how I achieved this problem with a nice bonus: User- and SEO-friendly URLs.
I am implementing a non-Javascript page for a client. The page contains a number of third party grids. When JS is turned off and a sort is performed the page i,s posted back to the server , which is fine. However, I want the page to navigate to the grid that was sorted.
I can do this by using anchors, and I have tested it. However, as I am new to MVC I don't know how to append the anchor to the outgoing URL.
For example I may get a URL like Team/User/42?SortGrid1-field-asc
After it has been processed by the controller I need the URL to be sent to the client as
Team/User/42?SortGrid1-field-asc#Grid1
Any ideas?
I have tried to append the anchor internally using lines like
return Redirect(Url.Action("User", "Team", new { Id = Id }) + "#Grid1");
But fail to see how to stop it going off in an infinite loop. If I redirect to another action then I go down a whole new path , which, code wise, will go on forever.
Have a look at the answer to a question I posted: How can I add an anchor tag to my URL?
I think you may have to go through the controller and use generateURL to get the anchor into the url
I have a pivot page, with one fixed pivotitem, and depending on data, a dynamic number of additional pivotitems. The fixed pivotitem keeps a hyperlink list of the new pivotitems created, and the idea is to click any of the links and navigate to that pivotitem.
It would look something like this:
FixedItem | DynamicItem1 | DynamicItem2
link: DynamicItem1
link: DynamicItem2
The problem I am facing is with the hyperlink click, it doesn't take me to the respective pivotitem, but instead takes me to the pivot page with no dynamic pivotitems. I am using the following code for navigation:
hyperlink.NavigateUri = new Uri("/MainPage.xaml?name=" + p.name, UriKind.Relative);
where p.name is the name of the pivotitem. I am not sure if this is the right syntax, but what's confusing is that all the created pivotitems get lost, leaving only the fixeditem - as if it was opening a new instance of the pivot page.
Then, in the OnNavigatedTo I tried the following:
if (NavigationContext.QueryString.ContainsKey("name"))
{
// URI is '/page?name=PivotItemToSelect'.
string selectedPivotItem = e.Uri.Query.Split('=').Last();
// Match PivotItemToSelect with the PivotItem's Name.
PivotItem pivotItemToShow = pivot.Items.Cast<PivotItem>().Single(i => i.Name == selectedPivotItem);
pivot.SelectedItem = pivotItemToShow;
base.OnNavigatedTo(e);
}
On the first line, I get an exception that this operation cannot be done on a "relative" URI. Any other way I could that information?
If I change the pivotitem name to a number, say i, and pass that i as the index, I got the following code to work as the _click method of the hyperlinkbutton - but in real usage the name will most likely be a text string:
pivot.SelectedIndex = int.Parse(i);
I am not sure how totally off the track I am, and would appreciate any pointers in the right direction.
Thanks.
The correct way to access the QueryString in your OnNavigatedTo event is like this:
string selectedPivotItem = this.NavigationContext.QueryString["name"];
Using a Pivot control for your navigation like this seems very strange, but since I know nothing about the context of your app, I'll assume you have chosen it for a reason.
If you are designing an app with a dynamic list of items to navigate to, it would be better to have a single page for your link list and a single detail page that can use the query string to bind to the specific object you are wanting. This will perform better and make more sense to your users. But again, I don't know the context of your app or your reasoning, so that's up to you! :)
I have a working TYPO3 extension. It is attached this wiki page. How can I change the code of this extension so it is of the USER_INT type? I.e. I don't want TYPO3 to cache the output of this plugin, and want TYPO3 to invoke the extension ever time a page that uses the extension, i.e. disable the caching for this extension.
To disable caching for your extension go to your piX/class.tx_XXX_piX.php file and remove the following line (below your class declaration):
var $pi_checkCHash = true;
You also need to add the following line in the main method (below $this->pi_loadLL();):
$this->pi_USER_INT_obj=1; // Configuring so caching is not expected. This value means that no cHash params are ever set. We do this, because it's a USER_INT object!
grunwalski it's the opposite you have to change this:
t3lib_extMgm::addPItoST43($_EXTKEY,'piX/class.tx_yourextension_piX.php','_piX','list_type',1);
to this:
t3lib_extMgm::addPItoST43($_EXTKEY,'piX/class.tx_yourextension_piX.php','_piX','list_type',0);
The simpliest way to solve your problem is to go back to Extension Maganer, select your extension, choose "Edit in Kickstarter" from the dropdown menu, and then select the corresponding Frontend plugin to edit it's properties.
Check the first checkbox which means that you want your plugins to be rendered as USER_INT cObjects. After that click the View result button, uncheck all custom PHP files (your own code, like modules and plugins) on the right side and click the WRITE button. Please be careful. If you don't uncheck the checkboxes of your own files, they will be overwritten with dummy files.
The correct and comlete way to do this is a combination of the answers of #arturh and #Mehdi Guermazi:
change the last parameter in the addPItoST43() call in ext_localconf.php from 1 to 0
remove the var $pi_checkCHash = true; line from the property definitions in the head of the pi1 class.
add the $this->pi_USER_INT_obj=1; line to the start of the main() function in pi1.
These changes are identical to what you will get when you use the kickstarter method explained in the solution of #bencuss.
When you have created your extension with Kickstarter you also have to go to the file [yourextension]/ext_localconf.php and change this line
t3lib_extMgm::addPItoST43($_EXTKEY,'piX/class.tx_yourextension_piX.php','_piX','list_type',0);
to this:
t3lib_extMgm::addPItoST43($_EXTKEY,'piX/class.tx_yourextension_piX.php','_piX','list_type',1);
Edit the file setup.txt of your extension "myext". Change "USER" into "USER_INT".
plugin.tx_myext = USER_INT
plugin.tx_myxt {
This extension will never be cached.