I'm working on a Firefox-plugin which searches a webpage for all textareas and places a warning before the submit button.
my code looks like this
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document).each(function() {
var form = $(this, window.content.document).parents('form:first');
$(form, window.content.document).children('input[type=submit]').each(function() {
form.insertBefore(submitWarning, this);
});
});
if i search all submits with $('input[type=submit]'.each it works fine but since i added the thing with the textarea and the form:first i got problems (nothing happens)
p.s. i use the window.content.document thingy because its a ff-plugin and it won't work nothing without it
You need to change it a bit, like this:
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document)
.closest('form')
.find('input[type=submit]')
.before(submitWarning);
The argument syntax is $(selector, context), when finding the form, first there's .closest() which makes this easier, also when you have an element, you can just use $(this) inside it's .each(), no need to search for it again. Also, you can use .before() to make it easier :)
The :has() selector is the best choice for me. Get rid of your extensive code and use this instead.
var buttons = $("form:has(textarea) input[type=submit]", window.content.document);
$("<div>").html("Fancy Message").insertBefore(buttons);
Try var form = $(this, window.content.document).closest('form');. Not sure if that's the ticket, but it's the first thing off my head.
Related
I want to select a button with casperjs, but my issue is that the button has changing IDsand classes. I can only "identify" the button, based on the text of a span 2 levels done:
<button class="changes-always" id="changes-always-too">
<div class="changes-always2">
<span class="changes-always3">Same text</span>
</div>
</button>
With jQuery I can select the button, by first selecting the span, because it always has the same content.
var span = $('span:contains("Same text")');
var button = span.parent().parent() // there is probably a nice way to do this
I got jQuery loaded by casperjs by including it as clientScripts, my issue is how to correctly get it working with the evaluate(function() as well as use the variables as selectors with casperjs (if that's even possible)
This is how far I got, but then I ran into problems with object and string issues.
casper.then(function() {
var items = this.evaluate(function () {
return $('span:contains("Some text")');
});
console.log(items);
});
Would be great, if someone could point me in the right direction, how to use jQuery as a selector and then let casperjs use it. Thanks many times in advance!
You can also use clickLabel() if the text is unique.
casper.clickLabel("Some text");
This should work for buttons, too.
Another option and still not with jquery should be getting the id's by text and if there are sometimes the same text, grab them out by the index:
...
var x = require('casper').selectXPath;
var buttonIDs;
// get button ID's with specific text by getElementsAttribute with xPath selector
buttonIDs = casper.getElementsAttribute(x("//button[contains(text(),'Some specific text')]"), 'id');
casper.then(function() {
casper.echo(buttonIDs);
});
casper.then(function() {
casper.click("button[id='" + buttonIDs[0] + "']");
});
...
So here's my problem: I'm using a function and I need the function to be specific to each tr with the class "middleone". It's supposed to change the insides of a div inside of the the tr with the class "middleone". But it's not working!
I know the recursive portion of it is working, and the "navigation" should be spot on, because even when i'm using just $(this) it doesn't do anything. When using document.getElementById it works fine but of course that only targets the first div and the full version of the code has to "Go here, pull from here, put it here, go to the next area, pull from here.. etc" Here's the testing code.
$('.middleone').each(function() {
var tripleeagain = $(this).find('div')
tripleeagain.innerHTML = "$";
});
Thanks for any help
tripleeagain is a jquery object collection upon which you should use html() instead of innerHTML
Basically you could just write:
$('.middleone').find('div').html("$");
If you are doing specific stuff inside the loop then:
$('.middleone').each(function() {
//Some specific logic
var tripleeagain = $(this).find('div').html("$");
});
The problem is you are trying to access native API from a jQuery object.
var tripleeagain = $(this).find('div');// this will return a jQuery object
So you should use the jQuery API for setting the html contents
tripleeagain.html("$");
jQuery html API documentaion
I have a page that can have one of three possible elements. I would like to assign whatever element exists to a var and then check if the var is clicked.
I tried using the add(), but it has confused me:
var testingVar = $('#element-one').find('.object').add('#element-two').find('.object').add('#element-three').find('.object');
$(testingVar ).click(function() {
alert('works');
});
It seems to me that the add() overwrites the previous add()? if I am on a page that has #element-three, it works, if on a page with element-one or element-two, it doesn't. If I change the var to
var testingVar = $('#element-one').find('.object');
Then a page with element-one works.
Can someone help me understand how to use the add() properly in this case?
Thanks
I think what you're looking for is this:
$('#element-one .object').add('#element-two .object').add('#element-three .object');
.find() returns a new jquery object.
However, I think this would be easier in this case:
$('#element-one .object, #element-two .object, #element-three .object');
Or even easier, if you can change markup, is to give each element you're currently selecting by id a common class, and do this:
$('.common-class .object')
Ok. No one is listening to me, so I'm going to try rephrasing the question by showing you WORKING CODE that does what I want, but not in the way that I want.
NOTE: I am not asking how to do this. I am asking more like...what's the best way...
// First I need the proper value
$select.find("option:selected").prop("selected", false);
$select.find("option:first").prop("selected", true);
// Now I need the event to fire
$select.trigger("change");
I'd like to do this in one line though...like the last line of code on this question.
Please don't tell me anything that you would expect someone that's been doing front end stuff for 10 years to know.
ORIGINAL - DONT ANSWER BASED ON THE BELOW
Doesn't really have to be jQuery, but I'm using it so it might as well be.
Basically, what I'd like to do is say
var $option = $select.find("option:first");
$option.trigger("click");
But that doesn't really work. I mean, it sort of does, but it doesn't seem to also fire the change event on the select...so I'm thinking I should actually be doing something more like...
$select.triggerEvent(new Event({
type : "change",
target : $option
});
But that can't be right.
Use .val() to change the value of a select dropdown:
$select.val($select.find('option:first').val());
You can use the .attr method
var $option = $select.find("option:first");
$option.attr('selected', true);
OR use the .val() for the select
var $option = $select.find("option:first").val();
$select.val($option);
You can use the prop() jQuery method as follows :
$select.find('option:first').prop('selected',true);
This is semantically the right way to set an option as selected, it's also seems to be right way to set properties in jQuery since 1.6.
If you are using jQuery prior to 1.6, you should do that instead :
$select.find('option:first').attr('selected',true);
If you need to trigger the change event on your select, you can do this :
$select.find('option:first').prop('selected',true);
$select.change();
Here is a working example
If you need to do it one line, you can extend jQuery in some ways (not tested code) :
;(function($){
$.fn.changeToOption = function(n) {
var option;
option = this.find('option').eq(n);
if (option.prop('selected',true)) {
this.change();
}
return this;
}
})(jQuery)
and then simply :
$select.changeToOption(0);
$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?
Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});
this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));
post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});