I have a page with a lot of images, each of them being wrapped with an onclick event. For example:
<a onclick=javascript:xxx(y,z)><img id="myclass" src="yyy"></a>
Following command returns all the images correctly:
$x("//img")
This doesn't (returns null):
$("img")
I assume, because these img tags were created dynamically, so are not directly in the source.
My idea was to add .click() at the end, but somehow it doesn't work.
So the question is:
How do I simulate clicking all images at once to trigger all associated javascript functions?
You can't .click() on collection as it is just a container for some objects and it doesn't have any methods from objects inside. You need to iterate over each object and call .click() individually:
for (var idx = document.images.length - 1; idx >= 0; idx--){ document.images[idx].click() }
I've just ran it in console and opened your profile and ad on sidebar.
Related
So i have hyperlink at a webpage that is:
<b>456</b>
And i want it to be a button instead of hyperlink.
Like:
<input type="button" class="butt1" name="but" value="456" onclick="123.com'">
I tried to change it inside chrome dev tools and it works, well obviously since i jsut give it href adress manually. Sadly i have no expirience with tampermonkey or greasemonkey at all and very limited javascript knowledge. Wonder if it possible and would appretiate any help.
Here is a sample code based on your example...
First, you need to get the link
If it is only one link, find it based on a selector:
const a = document.querySelector('a.cs');
Create the input
const input = document.createElement('input');
input.type = 'button';
input.className = 'butt1';
input.name = 'but';
input.value = '456';
input.onclick = 'window.location.href=' + a.href;
Note: A better way is to use input.addEventListener('click', function) instead of onclick.
Replace the link with the button
a.parentNode.replaceChild(input, a);
If there are more than one links, then you need to get them and loop through them e.g.
const a = document.querySelectorAll('a.cs');
I want to use CasperJS to click each enabled date in a JQuery UI datepicker, do something while that is clicked, and then go back and click the next date. The problem here is that once I have the datepicker displayed, I don't know how to get the selectors for the anchors within its body and its body only.
I don't think that CasperJS does anything similar to jquery where you can pass it a selector and get an array of elements back.
I could drop into an evaluate call and get the array via jquery, but then I'd have to send it back as valid unique selectors for CasperJS to loop over.
I could use jquery to get the content of each anchor, like "1", and then use CasperJS's clickLabel, but clickLabel scopes only by tag, so all I could say is "click the anchor whose content is '1'", and then potentially click the wrong thing if there are multiple anchors with the content "1" onscreen.
You don't need jQuery to do this. XPath can be used to devise a good selector function for the datepicker days like so:
var x = require('casper').selectXPath;
function daySelector(day) {
return x("//*[contains(#class,'ui-datepicker')]//td[#data-handler='selectDay']/a[text()='"+day+"']");
}
Since you know the numbers that you want to click, you can do (untested):
var numbers = [2,3,4,5,6,7],
pickerSelector = ".ui-datepicker";
casper.thenEach(numbers, function(num){
num = num.data;
// TODO: click into the date field
this.waitUntilVisible(pickerSelector);
this.thenClick(daySelector(num));
this.waitWhileVisible(pickerSelector);
// TODO: Check or do something you need
});
I have the following jQuery to load status to a profile page using a ul with li status items.
The each() takes items from a JSON callback and the load() is supposed to ensure that the image is available before the li is created:
(showpic() gives me a well-formed url to use.)
function showStatus(data){
var jsondata = $.parseJSON(data);
var testText = "";
$('#doNews').empty();
$('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"}));
$.each(jsondata, function(i, item){
$('<img src="' + showpic(item[3]) + '" class="newsImage">')
.load(function(){
$(this)
.appendTo($('#theNews'))
.wrap($('<li>', {"class": "newsItem"}))
.closest('li')
.append(item[5])
});
});
$("#statustext").val('');
}
the problem is that the status feed now seems to be written to the page in the order the images load. i.e., instead of being written according to the JSON item order, the li s are written in the order of loaded images (this has the effect of grouping status by user, not writing it out by date, as in the JSON).
So...
how would I both write items in the JSON order and still wait for the img to load?
By the way, I looked at this qn:
jQuery each() and load() ordering
and it seems to be on the right track, but when I tried using hide() and then show()inside the load() function, it never seemed to be called, and the img remained hidden. Please give me a simple example if this is the solution you suggest.
Thanks!
Either:
1) Maintain a counter & timeout, count the # of images to load at start, create the items as "hidden", countdown the number of unloaded as they load, then (when counter hits 0 or timer times out) display everything;
or:
2) Create the items as hidden, and show them in the 'load' event. Items will appear in arbitrary order, but will end up being correctly ordered.
Here's a possible example: your code isn't very clear as to what structure is being built & where appended, so this is just a rough (but clearly coded) outline.
Try using intermediate variables more, rather than vast fabulous jQuery constructions, in your own. It will help you debug it.
console.log('loading news items');
$.each( jsondata, function(i, item){
console.log(' item', showpic(item[3]), item[5]);
var img = $('<img src="' + showpic(item[3]) + '" class="newsImage" >');
var element = img.wrap($('<li>', {"class": "newsItem", "style": "display:none;"}))
.closest('li')
.append(item[5]);
element.appendTo( $('#theNews'));
// when the IMG loads, find it's surrounding LI.. and show it.
img.load( function(){
console.log(' loaded', $(this).attr('src'));
$(this).closest('li').show();
});
// put a timer & show it anyway after 8s, if img still hasn't loaded.
element.delay( 8000).show(0);
});
You will also notice logging in the code. Logging is good software practice. Console.log is not available on IE, so you should eventually shim it or use a small library function of your own.
Fundamentally, you have to get away from adding to the DOM inside the 'load' event. That's what's causing the mis-ordering. Add to the DOM in the jsondata each() function, or in a separate well-structured bit of code that guarantees correct ordering.
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();
I cannot find an answer on the following issue. I have managed to reload a specific part of my page (page A) by using AJAX (through document.getElementById). I would like to know if there is a way to choose which part of the document (page B) will be used to reload the content of page A. In other words, pick a specific DIV from a 2nd page (same domain) and use it to refresh the contents of my page. I have seen in other threads that it is not possible to do it with pages that aren't from the same domain. But in my case I will use a page from the same domain. Any ideas?
Thanks.
If you have page A loaded and your scripts run there, so this will do:
var ifr = document.createElement('iframe');
ifr.src = 'page B URL';
ifr.style.position = 'absolute';
ifr.style.left = '-1000px';
ifr.onload = function() {
document.getElementById('page A div id').innerHTML =
ifr.contentDocument.getElementById('page B div id');
}
document.getElementsByTagName('body')[0].appendChild(ifr);
Note: page B loads and runs completely. If you need the only div to be passed through the Internet connection, you need to implement server side logic.