GWT Query selector i.e. $("#id") not working inside callback function. However xyz.find("#id") works, where xyz -> Gquery variable. Is it that callback function doesn't support $ selector or is there some other problem.
Are you sure that the element with id "id" is attached to the dom when the callback function is called ?
When you execute $("#id"), gQuery try to find elements matching the selectors within the set of elements of the DOM tree .
When you execute xyz.find("#id"), gQuery try to find elements matching the selectors inside the array of elements selected by xyz no matter the elements are still or not in the dom tree.
Related
For example I use in a LWC that I build.
Is it possible to remove an element (for example ) that exists only after is rendered?
I tried to use query selector inside my .js file:
this.template.querySelector('h3');
But I can't find the target element this way.
I have a section of my view (html) that is generated programmatically by a viewmodel/class. This uses the Aurelia DOM (Aurelia Docs - pal :: Dom) functionality to generate and add the raw HTML elements to the view.
However, I am unable to get events within the generated html to call back to the viewmodel. An example:
let deleteButton = this.dom.createElement("button");
deleteButton.setAttribute("onclick", "cancelCreditNote(`${ row.creditNoteId }`)");
A click on the generated button won't call back to the viewmodel, which does have a cancelCreditNote function. Various other things like deleteButton.setAttribute("click.delegate", "cancelCreditNote('${ row.creditNoteId }')"); do not work either.
Does anyone know how to access a viewmodel class from essentiall 'raw' html in aurelia?
Unfortunately in this instance I cannot use the standard aurelia templating to generate the HTML.
The DOM property on PAL is just an abstraction for the browser's DOM object, create element is likely just calling document.createElement which doesn't afford any Aurelia binding to the created element.
You could try using aurelia.enhance(context, element) which takes an existing DOM element and runs it through the templating engine.
With this method you can also pass a binding context to apply to the element.
In my HTML I use this:
<div id="collapsesidebar" click.delegate="toggleSidebar()">
In my view-model I have this method:
toggleSidebar(){
alert('hi');
}
You could also do this from your view-model with JQuery like this:
attached() {
$('main').on('click', ()=> alert('hi'));
}
The last option is ONLY available áfter the attached() method is triggered: before that the binding needs to do its job and only after that the elements are located inside of the dom.
In other words: this will not work:
activate(){
$('main').on('click', ()=> alert('hi'));
}
because the constructor and the activate method both get fired before the attached method.
I'm trying to process all select elements with a specific data- attribute set.
I've got the loop working to pick up the element, but whenever I try to find the value of its other data- attributes I get undefined error messages.
Here is the loop:
$('select[data-hm-observed="1"]').each(function(idx, sel) {
alert(sel.getAttribute('data-hm-url'));
alert(sel.data('hmUrl'));
});
In the loop the first alert works, but the second produces:
TypeError: 'undefined' is not a function (evaluating
'sel.data('hmUrl')')
If I use the Safari console I can get the select object, put it in a variable, and interrogate its data- attributes without issue.
It seems that the .each() is having an effect on the sel variable contents - but I can't understand what.
Using JQuery 1.7.1
UPDATE:
Just discovered that if I change the loop so that it explicitly gets the element again, it all works:
$('select[data-hm-observed="1"]').each(function(idx, sel) {
xx = $(sel);
alert(sel.getAttribute('data-hm-url'));
alert(xx.data('hmUrl'));
});
Is this the correct solution?
Can I infer from this that the element passed into the loop by .each hasn't been 'processed' by jquery, and that I have to pull it myself via $(...) so that jquery does its stuff to it - this doesn't feel right - but its working.
sel is a DOM Object here, not equipped with the abilities of a jQuery Object. First, you should turn this DOM Object into a jQuery Object like this:
alert( $(sel).data('hmUrl') );
Alternatively, you can also use $(this).data('hmUrl'), because this will refer to sel (the current DOM element in the iteration).
See also .each() 2nd Example
I'm using an API that returns a JQuery Object which is a reference to a DIV container. I know my structure inside of the DIV container. I basically need to read some attributes from the first .
I've tried chaining the standard selectors off of my object but I get an error.
XML filter is applied to non-XML value ({selector:"div.panes > div.slice(0,1)", context:({}), 0:({}), length:1})
[Break on this error] var svideo = $(api.getCurrentPane()).('a').get(0);
Change your code to use .find() when you're going for descendant elements, like this for the DOM element reference directly:
$(api.getCurrentPane()).find('a').get(0)
//or..
$(api.getCurrentPane()).find('a')[0]
or if you want a jQuery object...
$(api.getCurrentPane()).find('a:first')
//or..
$(api.getCurrentPane()).find('a:eq(0)')
//or..
$(api.getCurrentPane()).find('a').eq(0)
typically when you refer to an object you would use a selector like this :
$(this).jqueryfunction()
if u would need an element within this object you would use :
$('typicalselector',this).jqueryfunction()
My question is how would I use jquery selector to select various objects something along the lines of :
($(this.fistobject) and $(this.secondObject)).jqueryfunction()
thanks for your help
When you wrap an object or run a selector, you get a set or collection. So this would return a collection and then add another collection to it, and then perform jqueryfunction() to the combined set:
$('someSelector').add('anotherSelector').jqueryfunction()
This works with contexts, too.
You can use a comma, just like in CSS. I.e.
$('div, a', this)
would select all div and a elements in 'this'.
I dont think you can work jQuery on Javascript objects, they should be jQuery-wrapped HTML Elements.
You can use multiple selectors like this:
$(selector1, selector2, ..., selectorn).jqueryfunction();