I am using jdev11.1.1.6
If i need to scroll to top of page..this works perfectly..
var scrollTop = function (event) {
$('.mainWrapper,body,html').animate( {
scrollTop : 0
}, 'slow');
}
I call it from pqr.jsff as
<af:commandLink text="click test" clientComponent="true" id="col7">
<af:clientListener method="scrollTop " type="click"/>
</af:commandLink>
link where it directs it to specific element
I modified my function as below but it doesn't work for me
var scrollToSpecificPosition= function (event) {
$('.mainWrapper,body,html').animate( {
scrollTop : $("#gl1").offset().top
}, 'slow');
}
gl1 is the id where i wish to point
<af:goLink id="gl1" text="test"></af:goLink>
I call it from pqr.jsff as
<af:commandLink text="click test" clientComponent="true" id="col7">
<af:clientListener method="scrollToSpecificPosition" type="click"/>
</af:commandLink>
I guess, problem is an Id field.
"gl1" id is right identificator for adf component, but in html-dom it will be a bit different, since adf component itself may have complex html structure and to keep id's unique adf will add a parents id's to it as a prefix, etc.
One more thing. You have to check that clientComponent option is set to "true", to make sure that this component will be available in dom. Then find with something like FireBug real component id,
it may look a bit more complex, something like "pt1:pg1:gl1:link". And if you sure that your code will always run in the same enviroment, you can hardcode this id.
Another options, is to use mask to find your component.
Also you can try to use AdfPage (native js lib) to get access to the adf components by their original id (though its not that easy to use and it have some limitation too).
Related
I am using this project for the react map: https://github.com/gabidavila/react-usa-map
Here is a live example: https://codesandbox.io/s/frosty-christian-9gzcjx
I have a similar react project but thought posting that example would be easier.
mapHandler = event => {
alert(event.target.dataset.name);
};
For this event handler, I would like to alert the full state name instead of the abbreviation.In my actual project, I am setting the state based on what the user clicks on and using that to dynamically filter a grid. Problem is that the items in the grid are full state names instead of abbreviations.
Any help would be great. Thanks!
You'd need to read their documentation and see if they support full names.
If they seem to only support abbreviations, you may need your own mappings.
What that means is, you may take the abbreviation from event.target.dataset.name and map it into an object that contains the full name. Something like this:
const stateMappings = { NY: 'New York', CA: 'California'}
You can add more to the object above.
Then we can do a lookup in the object like so:
alert(stateMappings[event.target.dataset.name]);
Full code:
mapHandler = event => {
alert(stateMappings[event.target.dataset.name]);
}
I'm trying to use dojo Tooltips on a series of SVG elements that are tool buttons in my header. I'm using the method in the docs of attaching tooltips to multiple nodes like this:
new Tooltip({
connectId: query('.header'),
selector: 'svg',
position: ['below'],
getContent: function (e) {
return e.getAttribute('data-tooltiptext');
}
});
And that works, but if I use a selector of '.tool' (every SVG has a class of tool on it) my getContent function never gets called. 'svg.tool' doesn't work as a selector either. The docs an several examples around the net claim class selectors will work, but I've only been able to get element selectors to work.
I'm requiring 'dojo/query' and I've tried using 'dojo/query!css3' but that doesn't seem to make a difference. I don't know if it makes a difference, but I'm using dojo included with ESRI's ArcGIS JS API library, which reports a dojo version of 1.14.2.
I've experienced the same issue when using the selector attribute while creating a Menu. Within an SVG element, element selectors (even comma-concatenated ones) work, but class selectors do not. Outside of the SVG element, they worked just fine. You can play around with this by using dojo.query in your browser's console to see which elements get selected.
I was able to solve the issue by changing the selectorEngine in my dojo config. Using any of css3, css2.1, and css2 worked, so I think the issue may be in the acme engine. If you don't already have a dojo config, you can add it via a script tag:
<script>
var dojoConfig = {
selectorEngine: 'css3',
};
</script>
I am working on a project in ExtJS 4.2 written in the MVC pattern. I need a reference to a specific item inside MyViewport (extended from the class Ext.container.Viewport). The item which needs to be referenced from within the controller has the Class MyPanel (extended from "Ext.Panel"). Problem is there are several items with the same class, so simply doing a standart ExtJs-component-query like,
//inside myController.js
refs: [
...
{ref: 'specificItem', selector: 'MyViewport_alias > myPanel_alias'},
...
]
wont get me a reference to the item. Thats why i thought of retrieving the reference by something like this, since the items using MyPanel-class have a property title:
//inside myController.js
refs: [
...
{ref: 'specificItem',
selector: 'MyViewport_alias > myPanel_alias > title="title of specific item"'},
...
]
But i coulnd't find any examples on retrieving items as references by using their properties as parts of the component query other than this.
Has someone experience with this kind of problem?
Component queries in ExtJS are very similar to CSS query selectors. You could find a component by a specific property with syntax similar to: "... > [title=My Component Title]" - that said, using the "title" sounds like really bad practice.
At worst, as a visible part of the user-interface it's very sensitive to change - easily breaking your application and at best it immediately limits your application's language-support and configurability.
Ideally you should be utilising the itemId property as a more robust way of referencing components.
» fiddle
I hadn't noticed that 4.2 didn't support attribute selectors - the component query functionality seems to have always drawn inspiration from CSS though, so unfortunately if it's only a recent development it doesn't look like there's any way to do what you want using this method.
You'd have to manually fetch the component and/or create your own reference. You can select by xtype / alias in 4.2 and then apply a filter to the result, for example:
Ext.Array.filter(Ext.ComponentQuery.query('panel'), function(x){
return !!x.title.match('Sub Panel 2');
}).shift();
( Obviously no use in a controller's refs )
» fiddle
... this is however ugly - all the more reason to use itemId's properly. There was already an example of this in action in the first fiddle. All you need to do is assign an alphanumeric string (no spaces) to the property - these don't strictly need to be unique but it's generally preferable. Then in your selector simply prefix a hash # in front of the string which indicates to the engine that you are looking for a component with a specific ID.
itemId selectors definitely work in 4.2 so without seeing your code I can only speculate as to what the problem is. In your post you are using > which narrows the query to direct descendants only. Are you absolutely sure that the component you are looking for is a child of myPanel_alias and not wrapped up in another container? i.e.
"myPanel_alias #myItemId" <-- try this
"myPanel_alias > #myItemId" <-- instead of this
somewhere in my application I get a formatted html from server to be displayed to user:
me.myPanel().update(response.responseText);
Now, I want to put in this html some links (like "add comment") in every record. I get this in the server!
But how to capture this links in extjs to act like a button or so ?
I would use a delegate for this.
me.myPanel.el.on('click', me._click, me.myPanel, {
delegate: 'a.linkclass'
});
In the code above you would have a couple of < a > tags in the body of your panel. delegate will make sure that the click only applies to your a tags with only linkclass on them.
Here's a fiddle: http://jsfiddle.net/N9MSC/
I recommend to use the answer of Johan Haest
One other way would be to give unique ID's to the buttons. You can the use Ext.get('id') to fetch a Ext.dom.Element to which you can bind event like so
domElementRef.on('click', function() { alert('hit') })
You need to do this after the update is done.
Here's a JSFiddle
I have a page with 50 hidden checkboxes, and I want to be able to toggle each checkbox by clicking on a visible link. The actual checkboxes have to stay hidden...so... Is there a better way to do this, with a JS function so I don't have to include the entire onclick in each link? And I use mootools, not jQuery.
This works to activate a checkbox:
Select
But to toggle it, this works:
onclick="if (event.target.tagName != 'INPUT') document.getElementById('field_select_temp_professional_10').checked = !document.getElementById('field_select_temp_professional_10').checked"
None of what you posted is actually mootools code, you may as well not use mootools...
Markup:
Select
js in your domready:
document.getElements("a.add_app").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_select_p" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
If you have 100+ then I suggest you look at using event delegation from mootools-more and add just one event to the parent instead of creating 100 events and storing 100 functions that deal with it.
This is coding to patterns, and it involves changing your markup to make things work. You can also make the change based upon walking the DOM in relation to the clicked item, e.g. this.getParent().getElement("input[type=checkbox]"), or something can mean you don't need to store a relative id in the element itself.