My site is:
http://econrespuestas.com.ar
And i'm having trouble with AJAX page loader integration. When you click on a link in "secondary-menu", it adds it the "current-menu-item" class, but it doesn't remove de "current-menu-item" class from the other ones.
I'm trying to do it with this code:
// highlight the current menu item
jQuery('secondary-menu li').each(function() {
jQuery('thiss').removeClass('current-menu-item');
});
jQuery(thiss).parents('li').addClass('current-menu-item');
but it isn't working. There must be something wrong with the removeClass selector. Could you help me?
Firstly, thiss doesn't exist (unless declared somewhere else). It must be this. In addition try something more like...
jQuery('.current-menu-item').removeClass('current-menu-item');
jQuery(this).parents('li').addClass('current-menu-item');
This is saying "Remove the class current-menu-item from any objects with the class current-menu-item, then add the class current-menu-item to the parent li of the clicked item"
In addition, make sure that in your CSS, .current-menu-item{...} appears after any styling for the non-currently selected item.
See Fiddle: http://jsfiddle.net/6hR9K/2/
Also, unless you have a specific conflict with using the $ sign in place of jQuery, I suggest doing exactly that.
$('.current-menu-item').removeClass('current-menu-item');
$(this).parents('li').addClass('current-menu-item');
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 have many layouts that extends VerticalLayout. I am removing all of them from a main layout add adding one of them to the main layout, to change the "page". First, is there a better option to this ?
My main question is, since I am adding the same component created in another scope, the content of the layouts doesn't change until I refresh. I want it to change after I click the icon in the menu bar.
So what I am looking for is a method like component.refresh() or something like this.
How can I achieve this ?
What your missing is this:
1. You can not add one component to two or more parents. The moment you add a component to parent2, its removed from parent1 (You get to see this when you hit refresh)
2. You are not using #PreserveOnRefresh on your UI class
the page markup has
<div wicket:id="stepPanel" />
tag in it and when the page is first loaded it works great that is
add(new MyFirstPanel("stepPanel"));
works fine. But then when I trigger an Ajax event and request redrawing
addOrReplace(new MySecondPanel("stepPanel"));
target.add(MyPage.this);
i get the following error
Last cause: Failed to find markup file associated. MyFirstPanel: [MyFirstPanel [Component id = stepPanel]]
please note that it tries to find the wrong markup (should look for markup for MySecondPanel) and it fails regardless it succedded to do so before!
I instantiate panels using reflection, but could it be a problem here? No exceptions thrown.
Anwser:
Actually it was something else - I have noticed that one of my AjaxSubmitLinks had reference to a form that was no longer placed in a markup... so whatever you do just remember not to leave that reference.
You are adding MyPage after replacing the Panel causing MyPage to re-render.
There is a good example on how to replace panels here.
Yes you can call panels via reflection. I don't clearly know what you are trying to do with event here but if you want you can attach your panel with AjaxSelfUpdatingTimerBehavior and define the duration which will update this component in the given time period.
Hope its useful.
I am trying to select a link/button inside of a form, that is in a div. the way it was made is that there are two links/buttons of the same id, name etc. however they are in different forms, so the code i wanted to use is:
_myTest.Form(Find.ById("PermissionsForm")).Child(Find.ByClass("saveBtn")).Child(Find.ByText("SAVE"));
any help would be appreciated
I think this is what you need:
var button = _myTest.Form("PermissionsForm").Button(Find.ByClass("saveBtn"));
This will lookup the button having the class 'saveBtn' inside the form 'permissionsform' in your browser instance _myTest.
Have a look at this page to decide if you need to have .Button(..) or .Link(...) based on the html tag that is used in your html.
How about building a regex for the element?
Regex could something like this
Regex elementRe = new Regex("id=LnkOk href="http://stackoverflow.com");
Then you can use your code to Click this link. The Click method can be extended to accept Regex if it is not already doing that.
Let me know how this goes or if you need more info.
Cheers,
DM
I have created the layout for my new portfolio webpage here: http://vitaminjdesign.com/work.html
I want to have a legend with tags (ALL, logo design, marketing, web design, print design) and when these tags are clicked, the page filters the results and display them like they are currently displayed. At first, I want ALL projects displayed, but when the user clicks on a tag (say "print design"), the list is filtered and displayed.
If I have this as my legend: logo
and when logo is clicked, I want all of the div's with the class "logos" to stay and all of the the divs with the other classes to fade out.
What is the easiest way in jquery to make this work. Please note: I am not very experienced with jquery, so please be as thorough and idiot-proof as possible.
First add the classes (logodesign, marketing, webdesign, printdesign) that apply to each project to the div your are assigning the numeric class to.
Then create links that are to filter for each tag like:
Logo Design
Then assign a click event that will hide the others and show the selected one.
var $projects = $('#projects');
$('a.logodesign').click(function() {
hideAll();
showTag('logodesign');
});
function showTag(tag){
$projects.find('div.'+tag).stop(true).fadeIn();
}
function hideAll(){
$projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut();
}
Although it isnt a direct answer to my question, I found a tutorial on how to achieve EXACTLY what I wanted. It is here:
http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip