I am trying to get the active item from this menu list to display in a different style. When I reload the page, the style gets applied for a split second, then disappears and all items share the exact same style.
There is a similar thread saying the solution is to actually have the item available as a data property in that component. I have tried that too, and it would not work. It makes more sense to have all the data from a computed property since I am using Vuex for data storing.
The template:
<li class="topic"
v-for="topic in topics"
:key="topic"
#click="selectTopic($event, topic)"
:class="{'active': topic === current}"
>
{{topic}}</li>
and the script:
computed: {
topics: function(){
return this.$store.state.topics
},
current: function() {
return this.$store.state.current_topic
}
},
The current_topic is updated with the selectTopic method in this component. It all works fine, except I can't get the current_topic to have a distinctive style.
Oh, on the styles I simply have .topic.active {border:yellowgreen solid 0.5em;}. If I do topic:active then the style gets applied when I click but only for the time I am clicking (also if I hold), but it does not get applied when reload not even for a split second.
Any leads? thank you :-)
Just as a conclusion / closing of this thread. The code I presented is correct. The problem had to do with a getter which was converting the current_topic into a title. This is why topic and current did not match inside the class binding. I figure it is still worth leaving the thread since it might be helpful for somebody else dealing with class binding inside a v-for.
Related
I'm using Polymer and I am encountering a Problem. I think there is a good solution, but I still don't have the perfect understanding of polymer.
In my template I get a dom-repeat which gets me some _itemsas item. item.name returns the name of the item, it works just fine. Now I want to use this name to display it in a tooltip, so I call the function on-mouseenter="_showTooltip".
My function looks like this:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
}
How can I transfer the information of my original item to this function?
Thanks in advance!
You did not mention or tag which version of Polymer you're using so I will point you to the docs for Polymer 2 because that's what I use, but I am guessing something similar must exist for Polymer 3 also.
Any event triggered from elements rendered inside a dom-repeat will get a model key added, under which you will have the context, so you will have your item from HTML there.
You can see that in the docs here.
To start you can try to:
_showTooltip: function(e) {
var item = Polymer.dom(e).rootTarget;
//........here I get Information out of my item to use it in my tooltip and display it
console.log(e.model); debugger;
}
and continue from there..
The BluePrintJS React InputGroup component is great and convenient for modern user-interface. But unfortunately the React component do not allow access to the <input> element inside.
I need to access the input element for 2 main reasons :
if I have 50 InputGroups in my form, I don't want to write 50 OnChange() callbacks. When the user finishes all inputs, I want to get all InputGroup.value(), which is not possible (it is possible with regular input element thanks to HTMLInputElement.value, but InputGroup does not allow accessing internal input)
At form displaying, I need to focus on first field. InputGroup has no function focus(), while HTMLInputElement has one.
Briefly there are 2 functions missing in InputGroup : GetValue() and Focus() , and I cannot see why they are missing.
Any suggestion will be greatly appreciated.
Thanks a lot.
I found the way of getting the input ! with :
inputRef={(input:HTMLInputElement) => {
this.logininput=input;
}}
(didn't see it at first time).
Now I have the input object, I can set focus at "didmount", and I can get the value with logininput.value.
Thanks
Slightly different variation but this works too:
inputRef:(input:HTMLInputElement | null) => {
// your code here
return input;
}
}}
just be aware that code runs when you just render the component, depending on your usage, to me happens when I click the child control on a select.
In my case, I just wanted to modify an input that works for text search on a select.
I am wondering if there is a way that I can get the current element that is triggering the onBeforeChangeEvent function in jsViews. I want to get the current element that it is working on, to do some extra jQuery work on it.
A basic example is below:
$.views.helpers({
onAfterChange: function (ev)
{
//want to get element instance right here as an example.....
if (!PageSettings.cancelUpsert && ev.type == "change")
{
//do somthing to element that is currently being processed.
}
}
});
I searched through the objects being returned, but could find a stable way to get to the element. Any ideas, or tips towards where to look would greatly be appreciated. Thanks!
If you are looking for a data-linked element, such as an input: <input data-link="..." />, whose change event triggered the change, you can get that from either this.linkCtx.elem or ev.target.
More generally, the this pointer is the view object that is being changed.
There are a number of helper methods on the view object that you can use to access different elements within that view. For example this.contents("someSelector") will return a jQuery object that selects top-level elements in that view, and this.contents(true, "someSelector") will apply the selector to filter on all elements in the view (deep search not just top-level).
(You can use the selector "*" to get all elements)
I'm trying to load content from a different file into a div element within the current file using the jQuery load() function. Nothing fancy, just loading it and that's it. However the links that are contained in the loaded file become "disabled", you cannot click them, and pseudo-classes like :hover seem to be left out as well. Is there a solution to this?
$(document).ready(function() {
$("div.content").load("content.html");
});
let's say content.html contains just this line:
xxx
When it is loaded into the <div class="content"> the link is not clickable. It is colored according to the css, however the :hover effect doesn't work, and it behaves like normal text - not a link. This is a problem because the content I'm trying to load has a couple of links, and none of them work after being load()'ed.
I believe your issue is:
You use $('div.content').load('content.html') to send a request for content to (later) be inserted into the DOM.
You then run some code to specify handlers for nodes using $(document).click, $(document).bind etc - but this code runs before the new nodes have been added to the DOM.
New nodes are then added when the .load call completes.
The behaviour that you defined on all the origional nodes isn't being followed on the new nodes.
If that is the issue your're describing - then you need to add all the same bindings to the new nodes once they're created.
i.e. you need to provide a callback to add the bindings to the new elements:
function on_data_loaded() {
$('div.content ...').hover(.....);
// etc.
}
$('div.content').load('content.html', null, onloaded);
(note that's not a particularly clean way of doing it, but it should explain what needs to be done).
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}