I have a search page that, by default lists products in a random order. Clicking a product lets you view it, and then there's a 'back' link which takes you back to the product list - this is saved in the random order using {% cache %} <ul of results...</ul> {% endcache %} with memcached. All works fine and well (have even a html comment cached # h:i:s to check)!
The search has an ajax enhanced interface which does all the ajax-type-stuff you'd expect; it also updates the url to reflect exactly the same url that the non js search would do (behind the scenes communicating with this exact url, only with an /ajax/true/ flag in the url iteself).
When you use the ajax search even once to alter the results, for example set a country name, then click view product, when you click 'back' link the product ordering is back to random (as it has not been cached); the product set is saved though (generated from the url).
Is it possible to cache the result block using the django cache as ajax generates it, keeping the order and set exactly the same for when you hit that url again? or should I investigate other avenues?
Cache the results:
Example ajax search (with cache):
https://github.com/tomchuk/django-ajax-tasks/blob/master/example/templates/home.html
https://github.com/tomchuk/django-ajax-tasks/blob/master/ajax_tasks/templatetags/ajax_task.py
From django-ajax-tasks: https://github.com/tomchuk/django-ajax-tasks
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 new to docpad.
I have something like filter in my project. There is few switchers to filter a list of icons. After user clicks an icon, the details about chosen item should be shown. This item is in docpad collection. How to implement this?
Every icon in the list has the id which is equal to the id of responding item in docpad collection.
Is there any way to store id of chosen item in a variable onclick(in order to use it in filter of getCollection or getFileById in eco template)?
I'm unclear about what you want to achieve. If you want to filter items on a page with a user click, something like a masonry/pinterest layout, then the way is to output all collection items to the page and then filter them with client side JavaScript. If you want to display further details when a user clicks on an item, the principle is the same. Output all details of the collection to the page but only make the full details visible when an item is clicked on by the user (again using client side script).
Now, if the collection is too large or it's contents too long to output to a page and you need to generate content on post back (ie dynamically) then a page can be marked dynamic = true in the metadata. And you will also need to install the clean urls plugin
Edit:
As an example of filtering a collection on a dynamically generated page using the eco template system.
---
layout: simple
dynamic: true
---
<%collection = ['Aardvark',"Arrows","Armageddon","Buildings","Bats","Bob the builder"] %>
<%query = #req.query%>
<%-query.q%>
<%filter = query.q%>
<h1><%-(new Date()).toString()%></h1>
<ul>
<% for item in collection:%>
<%if item[0].toLowerCase() == filter or !filter:%>
<li><%-item%></li>
<%end%>
<%end%>
</ul>
This assumes that there is a query parameter in the form of q=aor q=betc. ie http://127.0.0.1:9778/?q=a. I've also written out the date to prove that the page is regenerated on each request.
Checkout the metadata section of the DocPad documentation.
I have a URL that displays a customer list like this:
http://domain.com/pls/apex/f?p=724:2:820875406836801:::::
The list of customers are displayed with the title being linked to Page3 & request has CustomerId
When I click the URL http://domain.com/pls/apex/f?p=724:3:21712451478201::NO:RP,3:P3_CUSTOMER_ID:82, Page 3 is loaded correctly with details of selected customer. But the "Update" and "Delete" action buttons never work.
But, if I click the browser refresh button and then try to perform an update or delete, it works.
I don't know where I could be going wrong. Can someone give me hints?
I am not using BRANCH_TO_PAGE_ACCEPT in my URL link definition.
It looks like you have the session ID hardcoded in the URL on page 2:
http://domain.com/pls/apex/f?p=724:2:820875406836801:::::
The session ID is 820875406836801, whereas:
http://domain.com/pls/apex/f?p=724:3:21712451478201::NO:RP,3:P3_CUSTOMER_ID:82
The session ID has mysteriously been changed to 21712451478201. I'm not sure, but I suspect that you've hardcoded the session ID in your report on page 2. This has the effect of causing a new login session to be created when page 3 is opened (and maybe this is why the update/delete buttons don't work - but you haven't told us what the error message is so I'm not sure); refreshing the page may be restoring the session.
If I'm right, what you need to solve this issue is to use the session variable (&SESSION.) in your report on page 2 instead of hardcoding it, e.g.:
http://domain.com/pls/apex/f?p=724:3:&SESSION.::NO:RP,3:P3_CUSTOMER_ID:82
The issue was with the way the url was created. First of all, I should not set only 1 thing (Title) to be a url. It should be the entire div. Like below.
<li><div style="">
<a href="f?p=&APP_ID.:2:&SESSION.::NO::P2_PK_PROJECT_ID:#LINK#" rel="external">
<h3>#TITLE#</h3>
<p><strong>#BOLD_TEXT#</strong></p>
<p>#PLAIN_TEXT#</p>
</a></div>
</li>
A report row template with the above code was created. This template is used in my Customers List page. Now each customer is a link (Title, Name, etc). The link href is also hard-coded. Note that I am passing ProjectID:#LINK# #LINK# refers to a value like 1, 2 etc
Now clicking this, loads page 2 correctly and Apply Changes & Delete button are now clickable.
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.