I'm making a userscript that adds a button to a specific stie, but I have encountered a problem that I'm not able to solve at my level of competence.
So in order to add the button I use JQuery, but the problem is that the element I'm appending it to does not hold a specific ID, which makes locating only the wanted element hard using JQuery.
I'm currently doing this:
$("div:contains('Add line')")
This works in the sense that my button is added at the place where I want it, but here's the problem that comes out of this: this also appends my button at other places on the site where I don't want it. So my question is if I'm able to limit the times that JQuery appends my button. The correct button is added first of them all so ideally I would just like to tell jquery to append my button once.
Thanks
You can get the very first element that matches your selector by using the .first() method right after your selector. Like this:
$("div:contains('Add line')").first()
To expand a bit on what #martin said you can iterate over what jQuery returns and only pick the dom node you want to append to.
However, the main issue here is that the button could change the it's order in the dom, so you're going to have broken code.
Since you're mentioning a single button, isn't there a more unique identifier / css path / x-path that you can use to pinpoint that div ?
Related
PS: Problem solved. Thx all you guys.
I need to change radio button to checkbox when page loading.
I can not make the checkbox directly, so I have to find a way to solve this.
I've tried How can I change a checkbox for a radio button using jQuery?, but got errors like replace is not a function or undefined.
$(':radio').attr('type','checkbox')
No need to iterate with "each". The selector selects all radios.
JSFiddle
The answer to this question depends a lot on where and when you can insert a script. If the script runs before the element is loaded into the page, then you will not be able to find it because it does not yet exist. However, if you are able to load the script inside the body either before or after the element has loaded, you can run a function with the body onload event (if before the element is created) or you can run it as the page is loading if the element has been created. Not withstanding the question of what code you need to garner a DOM reference to the element, the rest is easy. You just change the attribute on the element in question.
$("#foo").attr("type", "checkbox");
Just change the type of your inputs.
$(':radio').each(function(){
$(this).prop("type","checkbox");
});
I am trying to hide (or edit inline attribute) a frame from an other framset by clicking a button.
I used : $(".HiddenFrame").hide();
But seems that I can not find the item.
JSFiddle
"As far as my understanding of things goes, you need to perform actions like hide on divs. Basically, whatever you are trying to affect needs to respond to the css display attribute. If you must use frames, I would strongly suggest you use divs instead, then you will need to write some jQuery that actually removes the frame from the DOM instead of just trying to hide it."
Source :stackoverflow
and see this Link
I have an anchor tag in my application that has the sole purpose of firing some javascript to expand/collapse some panels. I was thinking about changing it to be a span with a click handler instead. Which is the best method:
Toggle Panels
OR
<a onclick="togglePanels()" href="javascript:void(0);">Toggle Panels</a>
OR
<span onclick="togglePanels()">Toggle Panels</span>
Or is there a better option that I have not included?
I would use a <button>. You can style it accordingly with CSS, but the semantic meaning is still preserved.
But if the user disables JavaScript, the button becomes useless and users might get confused.
If your site works with JavaScript only anyway, then this would be ok, but if it also works without, you better add it programmatically or hide it initially with CSS.
Update:
Don't forget to set type="button". By default a button is a submit button for a form, so omitting the type attribute would make it some kind of invalid outside of a form (although it would still work).
A common progressive-enhancement approach is to make your anchor an actual anchor link... if JS is not available, clicking the link will just bring the panels (which you can place down below, in the flow of the document, and hide on dom-ready/load when JS is available) to the top.
Toggle Panels
<div id="panels"><!-- your panels--></div>
Then in your click handler for #panelToggler, first use e.preventDefault() so it won't try to pull the anchor to the top, then include the logic to toggle the panels.
If you don't care about users without JS being able to use whatever is in the panels, then don't even show them the toggle panels control at all. Even if it doesn't look like a link, it is really janky to just have a non-working "toggle panels" line of text sitting there in your UI. In this case, it really doesn't much matter what element you hang the functionality on for the JS-enabled users... button is appropriate, but a is generally more flexible with styling options. Take a look at most of the buttons in GMail... they're clusters of nested divs.
I prefer to define a span element without any handler attributes, and then wire up any handlers in a separate script file. In my case, I have many different span elements with the same toggle expansion behavior, so giving them all the same class, like "expand", allows me to wire them all in my document loaded method using a class selector.
The better option would be using unobtrusive JavaScript:
var element = document.getElementById("#anchorId");
element.onclick = togglePanels;
A jQuery approach also helps a lot:
$("a").click(togglePanels);
But of course I think that it's nice as an anchor, since you can still have an href pointing to something in case the user isn't with JavaScript enabled.
Yes, if the element is in your original markup, the span is better. This is in the interest of some semblance of graceful degradation; users who don't have JavaScript enabled will still get the impression they can interact with the hyperlink, which they cannot.
The truly idealized unobtrusive solution would be to not include the element in the markup at all, and add it programmatically using JavaScript.
At the very least, you should not use the javascript: protocol in a hyperlink reference. Aside from challenges some might make that it is an improper use of hypertext references (hyperlinks should reference documents or resources, not define behavior) it poses a few technical challenges; for example, you don't have access to the anchor element via this.
I learned that a anchor will make the browser "ready to launch" when focused. Meaning some resurses will used. But I think transparency is important: http://www.javascripttoolbox.com/bestpractices/#onclick
Mike
I have a search page that loads results. Each row has a Delete button next to it which I want to fire a particular JavaScript function on my page using some parameters specific to that row.
Is it best to put the function call directly into the HTML being generated, e.g. onclick="deleteFunc(<params from results array>);" or should I instead attach the jQuery click events? I've been opting towards the latter, but in this case I'm not sure the best way to do that.
Can I somehow attach events to some HTML even if it is not yet added to the page? If not, I'll have to add all the results to the page, including the array index of each row from the search results, then attach the click event to the button while accessing that row's parameters from the original array using the index I stored in a hidden HTML field. This seems like a lot of work re-correlating everything, when there is a point at which I build the HTML where I have all the parameters that particular row's delete button needs.
Assuming I use jQuery's click events, is there some danger in running out of memory? I may have a thousand rows coming back. If so, what happens when it runs out of memory?
Another option would be to serialize each array row's JSON into a hidden field next to the delete button, which I could then retrieve later. Seems like that would be more memory efficient, but also seems ugly.
Think the .live() JQuery method may work for you.
Attach a handler to the event for all elements which match the current selector, now or in the future.
You can add events to dynamically added elements using the .live() method.
$('.element').live('click', function() {
// do some stuff.
});
Yes you can attach events to HTML elements even before they exist using live method
$('.selector').live('click',function(){
alert('Do something here!');
});
I'm adding some new functionality to a Firefox plugin that is recording actions user does in the browser. The problem is, the click handler is a little bit broken - it doesn't add anything to identify a button if it has "image" type. I want to make it add a relieable piece of data to help identify the exact button user has clicked. To my knownledge, putting its XPath location is the only way to do so. So I'm looking for a way to get such value, hopefully without the need to iterate all over up to the root element.
Upd:
I can't change the source code of the site
I think I know what you want now, and I guess you can see how xpather does it, but I am afraid it will do it by going through the tree to the root...