I'm having to write a scraper using nightmare. On one the links the website is using a div for the user to navigate away from the page. In order to follow the navigation flow, I would like my nightmare instance to "click" the div. However, nothing happens when I'm on chrome, and obtain the element and call click. Unlike Firefox, where this works fine.
The script
let elem = document.getElementByClassName('is-a-div-element')[0];
elem.click()
Works fine on firefox, nothing happens on chrome! Any ideas? The site causing issue is using React. Not sure if that helps or not.
The HTML structure looks like this.
<div class="nav-element">
<div class="is-a-div-element">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm not sure how Nightmare relates to this issue since you mention Chrome and Firefox and appear to be using standard browser Javascript, but I'll try answer anyway.
Since you've edited your question with more specific information I'll edit my answer. Now the main issue I can see is that you're using getElementByClassName, which isn't a function (missing the s).
Do this instead:
let elem = document.getElementsByClassName('is-a-div-element')[0];
Tested working in Chrome and Firefox:
window.addEventListener('load', function() {
let elem = document.getElementsByClassName('is-a-div-element')[0];
elem.click();
});
<div class="nav-element">
<div class="is-a-div-element" onclick="alert('this was clicked frens');">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
Related
The goal is to have just the div with id="yourdiv" instead of the whole page. It works in Windows OS with Chrome but it does not work in iPad with Chrome which is my end goal.
The Script
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
The Button after some basic page example html
<div>
<p>whatever don't print this</p>
</div>
<div id="yourdiv">
<p>print this only</p>
</div>
<button id="print" onclick="printContent('yourdiv');" >Print</button>
Found a solution with another post that works in iPad with Chrome browser.
Print <div id="printarea"></div> only?
The solution from Hardik Thaker is the one that works for this. Though if you dont know you'll have to look up how to add in css to have it pull page styling.
I am trying to use Sidr (berriart.com/sidr) slide panel and everything works but on smartphone the opening and closing animation is not smooth, moving with jerks. Is there a solution to make the animation smooth?
<div class="app">
<span id="menu-badge" class="dx-badge" style="display:none;"></span>
<div id="sidr">
<dx-list
#notificationsList
[dataSource]="menu.items"
[pullRefreshEnabled]="false"
(onItemClick)="menu.itemClick($event)">
<div *dxTemplate="let item of 'item'" class="slideout-menu">
<fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
<i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i> {{item.text}}
</div>
</dx-list>
</div>
<dx-toolbar
*ngIf="authorized && loaded"
#appToolbar id="appToolbar"
[dataSource]="menu.toolbarItems"
(onInitialized)="onToolbarInitialized($event)">
<div *dxTemplate="let data of 'title'">
<div class="app-header">{{menu.appHeaderText}}</div>
</div>
</dx-toolbar>
<router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>
and in .ts file:
$(document).ready(function() {
$('#simple-menu').sidr();
});
One possible issue could be that there are too many change detection cycles going on. A pc can handle this, a phone not so much. Try rewriting your app so it can work with the ChangeDetectionStrategy.OnPush.
Either way, it's worth running a profiler using the chrome devtools, while opening and closing. With a little digging, you can find out what part of code is using up the resources. It could as well be an *ngFor that needs a trackBy because it keeps creating elements.
This question cannot really be answered by just the code you gave, and needs proper investigation on your hand. On the other hand, to use jQuery in combination with Angular is frowned upon, but let's not open that can of worms :)
I am trying to code a jquery slider. I have a html code which looks like this. I had earlier posted a simpler version of code so that the question doesnt seem too long. Sorry for the inconvenience caused. Here is the actual code
<div class="allItems">
<div class="echItm">
<h4>asdddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/kc1g358wvv.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/kc1g358wvv.gif</span>
</div>
<div class="echItm">
<h4>dddddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/ptvrbfpnkd.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/ptvrbfpnkd.gif</span>
</div>
</div>
When I try to do a find using
var imagesArray=$('.allItems').find('.echItm');
for(var i=0;i<imagesArray.length;i++){
var thisElement=imagesArray[i];
alert($(thisElement).html());
}
IE returns null, whereas firefox, chrome return the required html. Can someone guide me what am I doing wrong? I'm using Jquery 1.4.2 and testing this on IE8. Thanks in advance.
testElement is already a jQuery object so you don't have to wrap it in $(). Try this
var testElement=$('.echItm').find('h4');
alert(testElement.html());
I'm using jQuery to get the contents of a <strong> tag. A sample of the code is:
Trip ID: <strong name="tripID">10</strong>
...
<script type="text/javascript">
...
var tripID = $('strong[name=tripID]').text();
alert(tripID);
</script>
Firefox correctly alert()s "10". Chrome, however, alert()s "101010". Has anyone come across this or does anyone have any insights?
Edit
Changing the <strong name="tripID"> to a <span class="tripID" style="font-weight:bold;"> and changing the corresponding selector in my javascript made it work as expected. I'm still interested in what caused that behavior though!
Edit 2
I'm going to chock this up to some other part of my code interfering (it's a highly ajax-driven pages). Switching the <strong> to a <span> with a style applied corrected the issue, so I guess it's a non-problem now.
This seems to work just fine. Also as Jed asked, What's the strong tag?
http://jsfiddle.net/NiceGuy4263/MjGKL/
<span name="xxx"> is not standard. Try using <span id="xxx"> instead.
Do you mean
var tripID = $('strong[name=tripID]').text();
or
var tripID = $('span[name=tripID]').text();
jQuery returns all the elements $('span[name=tripID]') and foreach compute the text, so if you have 3 $('span[name=tripID]') all with 10 in it, it will return 101010.
I would suggest to give a class, or, even better, an ID
Trip ID: <span name="tripID" id="tripID">10</span>
...
<script type="text/javascript">
...
var tripID = $('#tripID').text();
alert(tripID);
</script>
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {