Get dynamically changed data from web page using javascript / jquery - javascript

I'll be as direct and as specific as possible.
I'm trying to create Greasemonkey addon that would create graph of winnings/loses on: dead link
As you can see, site has front page which dinamicly shows results of wins / loses and how much did which user win/loose. What I'm trying to do is catch every new entry so I can draw some grapsh and or statistics for user / users.
When I access div/span that should have data, it turns out to be empty. I know that reason behind this is that all divs with data relevant to me are empty on load and that they get populated later on.
What I don't know is how to access that data. I can see (using firebug console) that there are GET requests executed all the time and that in those get requests is data that I need.
Can someone tell me or at least point me into right direction, how to access that data every time it gets refreshed / inserted?

You can try using the $.ajaxSuccess function to specify a function in your script to be called everytime an ajax request completes in the main page. This'll be fired for every successful ajax request, whether it pertains to the data you're talking about or not, but should allow you to re-scrape that section of the document to grab any and all data in it after every successful request. You may want to wrap your callback function in a setTimeout of some kind to make sure their own callbacks have a chance to fire and inject/modify the content before you scrape it. It should still seem instantaneous to the user if you set a timeout of, say, 1-10ms.
http://api.jquery.com/ajaxSuccess/

Related

How do I measure the progress of an ajax call? In Php with jquery/ajax

I have an AJAX call that is running a long PHP script where it has 20 different results, I would like to show when each step in the script is done.
Like so 1/20 done, 2/20 done, 3/20 done.
Latest 29-12-2015 03:17.
I tried to create the JSON file as so (jsonFileName_uniqueTimeStampHere.json) by PHP, but the time taken to create the file with PHP, result in a 404 file not found error!
Because when the AJAX call is running it comes to the progress call before the file has been created, I know I can't create the file with JavaScript but is there anyway to create.
The file before the success callback from jQuery AJAX?
What would be the best way to show progress information while AJAX call is running.
The way I have it now, I have a JSON file saved on the server that gets updated with the latest state that has completed, but if multiple users is running the same script the JSON file with the state gets overwritten.
Should I save the state of each progress in DB and then receive it with multiple calls to a PHP method that get state that has been completed?
Should I keep using the current method I use and add a userID to the JSON file so it is unique on each call to the file?
How should I go about doing it the same way as Seositecheckup?
What is the best way to make a progress with AJAX and PHP?
Please tell me if you need any more information.
I have looked around and don't feel like the info or half of info, there is to find online has been enough to do this myself.
I would like to use jQuery AJAX and not XMLHttpRequest, I'm looking for something similar to seositecheckup.com, when you scan a page you can see the state update on each completed function in the console and is done with different AJAX calls. How is that possible?
Should I forget about using jQuery and keep focus on plain JavaScript instead?
Right now I have a setup with jQuery that works the problem is, that I use a JSON file to get the result from and it gets overwritten when multiple users request the same script, is it possible to store the state in db instead and receive it from there with some unique identifier?
In the future I would like to make it possible to put the script into a queue that could be run and when the script ends it should send an e-mail to the user.
The HTTP way of handling requests that may take a long time is for requests to return a 202 and the body of the response should contain the URL where the user can query for the result.
#Request
POST /some/entitities
...
#Response
HTTP/1.0 202 Accepted
/jobs/{jobId}
The user can then poll /jobs/{jobId} which can return a number to represent progress. Do you have to use this? No, but if you do, others developers can immediately recognize what is going on.
Even if you don't use the approach I recommend, you will also have to keep track of job progress in your database and have a separate AJAX call to find out the current progress.

How to open a browser tab and track it's activities using javascript?

I have a page in which i have created a JavaScript function where, and i have saved 10 URLs in an array. Now i want to have a onclick event on some button, which when clicked should call a function in which we pass that URLs array as parameter.
What i want is, the function should be able to open a new tab in the current browser, visit each of the URL one by one for 2 minutes and return progress like Which one is being visited, how many already visited etc to it's parent page?
Is it possible? I'm not able to frame a logic of how this can be achieved, may be using JavaScript or jQuery?
Please suggest.
Regards
It is not possible for the Client Side as JS cant look in to browser functionality.
The URL progess in sense you are looking in to load or any results then you can look in to server side calls like CURL API or AJAX Call.
-
AJAX Call: This API you can use to any of the divs in the current HTML Page itself and create update functon which is called and updates the load precentage of the loading and you can display the same to div.
Update function can be called using ajax object with event listener to it where it takes
var percentValue = oEvent.loaded / oEvent.total;

Is it bad idea to make an AJAX post call every 2 secs?

If I make an AJAX $.post call (with jQuery) to a php file for updating a certain parameter/number, does it considered bad practise, dangerous or similar?
$.post(file.php, {var:var}, function(data){
// something
}, json);
It would be a single user on a single page updating a number by clicking on an object. For example if user A is updating a certain number by clicking on an object user B should see this update immediately without reloading the page.
It depends on 3 main factors:
How many users will you have at any given time?
How much data is being sent per request on average?
Given 1 and 2, is your sever set up to handle that kind of action?
I have a webapp that's set up to handle up to 10-20k users simultaneously, makes a request each time the user changes a value on their page (could be more than 1 req per second), and it sends roughly 1000 bytes on each request. I get an average of 10ms response time, however that's with node js. Originally I started the project in PHP but it turned out to be too slow for my needs.
I don't think web-sockets is the right tool for what you're doing, since you don't need the server to send to the client, and a constant connection can be much more expensive than sending a request every few seconds.
Just be sure to do lots of testing and then you can make judgements on whether it'll work out or not for your specific needs.
tl;dr - It's not a good idea if your server can't handle it. Otherwise, there's nothing wrong with it.
Another solution could be, to cache user actions in local storage/variables, and send them all at once every 10-15 seconds or so, then clear the cache, when sending was successful.
In this case you should also validate the data in local storage to prevent tampering.

Is it possible to stop currently executing Javascript code?

I'm not sure if what I'm about to ask is possible or the right way of doing about things, but here goes.
I have a webpage which loads some data from a server using AJAX and displays it visually. The user has the option of using one of two buttons on the page to "scroll" through the data which is filtered by week.
The code for these buttons is something like:
$("#leftButton").click(function () {
clearCurrentlyDisplayedData();
changeFilter(1); //Or -1, or whatever.
loadAndDisplayData();
}
In this (simplified) example, loadAndDisplayData() would use AJAX calls to fetch this data and then display it on completion of the request, like:
$.get(
"web/service/address",
function (data, textStatus, jqXHR) {
//Display the data here
});
However, there is a problem when the user clicks the arrows to scroll through the data too quickly. If the buttons are clicked twice in quick succession, the data for two weeks is displayed, on top of each other.
I don't want to disable the buttons until the data is collected - since the data collection and displaying does take a little bit of time, this would kill the ability of the user to navigate through the site quickly, and would quickly become irritating.
Is it possible to kill any currently executing scripts or AJAX calls (or functions called as a result of these) when the user clicks on one of the buttons in order to prevent the loading of two sets of data? Is there any other way I can go about solving this problem?
The jqXHR object has an abort() method, which you can call to cancel an AJAX request.
However, this requires you to keep a reference to the object returned by $.get().
A prehaps easier approach would be to increment a global counter when making a request, and decrement it when a request completes. In your success handler, only show the results if the counter === 0 (e.g. theres no requests pending).
Is there any other way I can go about solving this problem?
Rather than aborting the requests, it might be better to construct the callback function inside $.get in a way that clears the data and displays the new data as a single operation - i.e., doesn't clear the data until the new data is ready.
Javascript only processes a single event/thread at a time, so each AJAX response will be processed serially as they arrive.

best practice for loading necessary JSON data: jquery's $(document).ready() hook? in the <HEAD> of page?

I have been reading Yahoo's Best Practices For Speeding Up Your Website, but still have a question that I could really use your help with:
The very first page of my web app needs to display a bunch of data that is dependent on the city the user is in. On the first visit, the user is prompted to pick her city and I store a cookie in the browser recording which city to start with. On her following visits to the site, the Javascript code checks the cookie and retrieves the data for that city as JSON.
Given that this data is necessary to display the fundamental part of the page, where should I load it from? Currently I am doing it from the top of Jquery's $(document).ready(), but it occurred to me that by definition that only gets executed once the entire page has loaded.
Which is the correct way to do this? (Eg, will it improve matters if I instead put some Javascript in the that checks for the cookie and loads the JSON feed for the right city? Some other solution...?)
Thank you for any insight
lara
Currently I am doing it from the top
of Jquery's $(document).ready(), but
it occurred to me that by definition
that only gets executed once the
entire page has loaded.
$(document).ready() will be called when the DOM is ready for manipulation, not when the entire page has loaded. The DOM will be ready as soon as the markup has been read and parsed into the DOM. This occurs before the entire page has loaded.
Putting your code to check the cookie value and retrieve city-specified data in $(document).ready() is perfectly fine.
If you really need this data to show the page correctly, how about simply inlining the data in the page itself? Save yourself an AJAX round-trip, be nice to your users in sub-Saharan Africa on the 300 baud modem.
I think the $(document).ready() is as soon as you can do it, although I'm not sure why you wouldn't just inspect the cookie values on the first request. Just check to see if they are set, and if they are, get the content for the user there are save yourself having to make any AJAX call. Maybe I'm missing something in your situation, but cookies are always sent with every request to a specific domain so AJAX/JavaScript shouldn't be necessary.

Categories