Temporarily Block Page from Refreshing via Ajax / Javascript in Selenium WebDriver? - javascript

I'm using Selenium to scrape a webpage. Initially, when you navigate to the web page, the page contains about 10 items. As you scroll to bottom of the page, the page continuously loads more items (via AJAX / Javascript) until page has been fully loaded. Once the page is fully loaded I scrape data from each item in list.
Occasionally, I need to delete an item from the page. This causes the page to completely reload/refresh to it's original state with the initial 10 items - forcing me to repeatedly scroll to end of page which is very time consuming. In other words, if the page has a total of 500 items and I need to delete 50 item at various (and unknown) locations through the list I will need to reload entire list of approx. 500 item 50 times.
Since the page is being reloaded via ajax / js I thought I could solve this problem by disabling Javscript on this specific page. I was able to accomplish this by following this answer on stackoverflow. However, it is a catch 22 situation - since once I disable javascript the page will no longer load new items when I scroll to the bottom. I need to first load all items on page via Javascript and then disable js so the page does not automatically refresh itself when an item is deleted.
Initially, I thought I could scroll to end of page (while have js is enabled) and then disable js once I hit the bottom of page so that as I loop through items on page and delete item, page will not be forced to refresh. However, based on my testing I found that once js is enabled before page is loaded it can no longer be disabled before you navigate to a different page.
My question is: Is there a way for me to temporarily block (or disable) Javascript execution after a page has loaded so that the page is not refreshed (yet still allow me to scroll to end of page via js)?

Related

How to load html pages one after the other with js/jquery?

Suppose i have 4 html pages say a.html,b.html,c.html and d.html.
Initially when i run the program i load a.html, when the user scrolls to the top and if it is already the top the alert says "you have reached the top of the page and this is the first page".
Now when i scroll dowm, using the js way of detecting page end, when i reach page bottom i call the next page and load the next page that is b.html.
In this way when it reaches d.html and you scroll down to the end of the page its will alert you that "you have reached the page end and this is the last page".
Same method is used when i scroll up and when it reached the page top, js will call the previous page function and it will load the previous page.
in here i will load the previous page bottom first. this is also working fine(but there is no continuity)
This strategy is working fine. But i need a mechanism to load these html pages continuously so that it will load the webpages in a neat fashion as if i open a pdf doc in a doc viewer.
Like the next and previous page swaps are smooth rather that opening it as a new page(this is very important in the case of previous page calls).
Is there any library in jquery or java script for this functionality?
someone please help. I searched a lot for this functionality
If you want to load HTML documents onto a webpage, you can use jQuery's .load() function.
Syntax:
// $ is the same as jQuery
$(element).load(documentURL);
Here, .load() gets the HTML from the document and puts this HTML into the element specified. To get specific elements in an HTML document, just locate them as you do in CSS. If you wanted to get the header from the document:
$("#result").load("myDocument.html header");
Remember: If you are loading the HTML on the DOM page load, use $(document).ready();. Here's an example:
$(document).ready(function() {
$("#result").load("myDoc.html body main");
});

jQuery Mobile Load Content Via Ajax Before Page Shown

I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.

How would I make a script stop running and affecting web page?

I have a script that rearranges elements on a page in a certain structure. It does this by manipulating the CSS with positioning values etc.
I want to offer users the possibility to view the page without it being affected by this script.
Could I fire off a function (on a click event) that "resets/cleans" the page from the interaction of the script? Or would I need to do a reload of the page?

Mobile Safari Scroll to bottom to load more content like Facebook

I'm a newbie in web development.
My teammate and I are working on a project where say, 10 items are initially shown on the page. The user can scroll the list of items and when he reaches the bottom, it should load 5 more contents. In addition, we want the list to stay on the items that were last viewed before the loading of more contents was done; but, it should still support loading of new updates on top of the page - like that in the Facebook news feeds. While it's loading more contents when scrolling reaches the bottom of the page, new updates are added above.
Our app is working smoothly on desktop browsers, but we're having issues on the mobile side, specifically on Mobile Safari. Scrolling to the bottom is working. It loads more contents, so as handling new updates on top of the page; however it brings the user back to the top of the list, instead of staying on the last items shown and the newly loaded contents would be hidden and will be viewed once scrolled downwards. So, if page is showing the 11th-20th items on the list, and he scrolls down to load more, say 5 items, the page reloads and brings the user to the 1st-10th item. It should stay on the 11th-20th items, but still has loaded the 21st-25th items hidden below, instead.
Any help would be much appreciated! Thanks!
You can try one of the third party libraries as this one for an example http://dcarrith.github.com/jquery.mobile.lazyloader/
Try using iScroll 4, it should achieve what you wish for mobile
http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

Window like facebook chat

The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.

Categories

Resources