Including a chart and selection box as "widgets" in other webpages? - javascript

My data portal offers the possibility to display data as graphs. I managed to give the user the possibility to include these Highcharts graphs via insertion of a Javascript file - which is generated on my side - in their HTML files. [Example]
Now, I'd like to add the possibility to include Dropdown boxes for the selection of countries to be displayed, at the side of the graph. [Example]
However, in order for the user to generate a new graphic with a different set of countries, the request must be send back to our server, and the respond must be send back to the client. I am struggling with how this could be implemented with the least amount of "influence" on the client's site.
JQuery is already integrated in the Javascript file the user inserts into his code. So, I could work with that. Maybe the whole thing only works if the user integrates this in a PHP, and not only an HTML file.
Would this kind of AJAX-call be a possibility:
$("#whatever").load("http://remote-server.com/my_script.php")
I am a bit puzzled about how to continue.
Thanks for any hints!

The best option is communicate with the server via JSON. So you catch event on the dropdown, call $.getJSON() to your server, returning json data, which can be used in the chart.
Functions to manipulate on chart:
- setData
- addPoint
- series.update
All of them are documented here

jQuery has a built in AJAX method that you may find useful.
$.get("http://remote-server.com/my_script.php" [, data ] [, success ] [, dataType ] )
You can pass variables to your server script via the data parameter. When your server returns data, you can decide how to act on it with a callback function.

Related

Screen-scrape paginated data

I'm trying to grab a list of all of the available stores returned from the search at this website.
https://www.metropcs.com/find-store.html.html
The issue is that it returns back only 4 or 5 at a time, and does not have the option for 'See All'. I attempted to use Post Man in Chrome and AutoPager in Firefox to see if I could somehow see all of the data in the background but I wasn't able to. I also was researching JSON interception tools, as I believe the site is using JSON in the return set, but I wasn't able to find any of the actual data that I needed.
In the past I was able to hit 'print preview' and grab the list that way (then I just copy-pasted to Excel and ran some custom macros to strip the data I need) but the printer-friendly version is gone now as well.
Any ideas on tools that would allow me to export all of the stores found, especially for larger return sets?
You want to manipulate this request:
https://www.metropcs.com/apps/mpcs/servlet/genericservlet
You'll notice the page sends this (among other things) as the request to that URL:
inputReqParam=
{"serviceProviderName":"Hbase","expectedParams":
{"Corporate Stores":...Truncated for clarity...},
"requestParams":
{"do":"json",
"minLatitude":"39.89234063913044",
"minLongitude":"-74.85258152641507",
"maxLongitude":"-74.96578907358492",
"maxLatitude":"39.979297160869564"
},
"serviceName":"metroPCSStoreLocator"}
You'll need to manipulate the lat and long bounding box to encompass the area you want. (The entire US is something like [-124.848974, 24.396308] to [-66.885444, 49.384358] )
In your favorite browser it should be easy enough to tweak the request to get a JSON response with what you require.

How to call a specific python function from within a Django template

I have a button to copy data from a user uploaded file to the clipboard in a specific format. I already have that data saved in the database as it was uploaded in a separate file form. I currently have it so that upon clicking the copy to clipboard button it is linked to a copy_data view in my views.py that requires an HTTP request which redirects to the current template containing the copy to clipboard button with something like this:
HttpResponseRedirect('previous/template/here')
This works fine except for the fact that since it links to my copy_data view which then redirects to the original view containing the button it reloads the entire page which is undesirable.
I think a better solution would be to somehow bind a python function directly to the button click rather than worrying about redirecting from one view to another.
I've found many examples using ajax, but haven't found any that work for my use case. I tried binding a click event to the button without any problems, but I am stuck on figuring out how to bind the python function with the click.
How can I bind a python function in my Django template upon a button press?
It's tough to tell for sure, but I think you're mixing synch/asynch paradigms here. When you generate requests with Ajax, you don't (generally) want to return a redirect, you want to return data. That might be JSON data or data formatted as a specific MIME type or even just text. One way this might look at a high level is:
def copy_data(request):
# get posted data
submitted = request.POST
# do whatever is necessary to create document
data = ???
# first, we'll need a response
resp = HttpResponse()
# set the content type, if needed
resp.content_type = 'text/???; charset=utf-8'
# response has a file-like interface
resp.write(data)
return resp
Obviously, this would need work to suit your purpose, but that's the high-level approach.
It doesn't sound like you're returning JSON, but there's a special response object for that now if you need it.

request downloading a file basing on criterias from javascript

I've got a web application (php/symfony2 - but it doesn't matter here) with heavy AJAX usage and quite a lot of javascript in the client side layer. The interface enables the user to filter the data he wants to display (periods, checkboxes, selects, etc.) and basing on those choice, a POST request goes to the server side for data and JSON is returned through AJAX.
Now, I want to add a functionality to download the data file basing on the criterias/filters that reside in the javascript layer - and I'm not sure how should I do it.
Let's say I've got a <a href="some_action_url"> tag that - if I click - it downloads the file. I know how to do all the server-side stuff. But I don't know how to pass the criteria parameters from javascript to the server-side controller a using the <a> tag.

Dynamic response with tracking pixels?

I am testing out some tracking pixel functionality in an ASP.Net 4 MVC architecture.
This article gives a nice way of setting a tracking pixel (image) that you can use to read a visitor's environment parameters and do some logging on the server side before completing the response.
What I would like to do is inject some Javascript, based on the account ID that the pixel came from. In the example above, the ID would be set by setting some query string parameters.
By the looks of that code, it can only be used to log data, as the response type is of type image.
Is it possible to accomplish this using the method shown above? If not, can I get some recommendations/sources on how to accomplish this using Javascript and tying this back into my .Net architecture where based on some logic, I can add some additional Javascript to the response?
If I have no other choice to go the JS route, I'm guessing it would be something along the lines of the Google Analytics tracking script that includes some parameters sent back through JS.
Thanks.
If the client is requesting an image and expecting an image, then that is what you need to return. Look at this type of HTML that would generate an image request:
<img src="test.jpg">
Clearing the client is expecting image bits to come back and anything besides that is going to mess up the display of that image.
If you want to put server-supplied javascript into the page, then simply have the client request some javascript like this:
<script src="test.js"></script>
Your server can then do it's logging upon that request and return whatever javascript it wants to from that request. If you want to return different javascript for every request, then you will need to defeat caching in the browser (there are a number of was to do that) so that the javascript is always requested from the server.
In general, I'm guessing that you don't need to return different javascript for every request. But rather, you can put a common block of javascript in the client page and that javascript can examine the environment and branch based upon what it finds. That's how Google Analytics works. One common piece of javascript is served to the client, that code examines the environment and then makes an ajax request with different parameters set that causes the right information to be recorded on the server.

A brief question about JavaScript or AJAX

I have been finding ways around this for a long time but think it's time I addressed it.
If I have a page that has a dropdown menu, is there anyway I can select a value which will subsequently load other values further down.
Can this be done without a page reload?
I will give you an example.
Say I was making some tools for an admin panel, but first of all they needed to select a member to work with.
They would select the member and then below, the fields about that member would be populated based on what was selected in the first menu.
As I have already asked, can this be done without a page reload?
Thanks for reading.
Yes it can be done without AJAX. When the page is rendered pass all the collections that will be used by the dropdown lists as JSON objects into the HTML:
var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }];
...
Then register for the change event of the first drop down and based on the selected value go and fetch the data from the other collections. Of course if you have lots of data this might not be practical as your pages will become very large and in this case AJAX woulld be more appropriate.
Answer YES it can be done.
Firstly you'll need an event, in this case you need to take action on the onChange event for the selectBox. So when an item changes you run a function.
Now you have 2 choices. You can do this using AJAX or NOT, it really depends on the complexity / security of your application.
In the following I refer to
Users : those using the application
Hidden Client Side Data : Data sent to the client during page load, but not visible to all users, however using view source, or downloading JS files, the Data is not secured.
Method 1 - NO AJAX
Basics: You send all the possible display options down initially when the page is first loaded, but display only the sections relevant to the user during selectbox onchange events.
Recommended when: No security condiderations if hidden client side data is detected (or won't be detected, or you simply trust your audience to use the app in the intended manner). Lastly when your total view permutations are low.
Method 2 - AJAX
Basics: You send down initially only the page skeleton, when the user changes the value of the select box, you then do an AJAX request to the server - grab the new view info thats relevant to that user, send it back down to a script which will inject that user data into the DOM.
Recommended when: You have a public site, or a site where security is a consideration. Where you have lots of view permutations or want more customizations per user than in scenario 1.
As you see both methods do not require a repost - method 1 ships everything upfront, method 2 uses AJAX to fill in data when required. Both methods are valid depending on your requirement.
Yes. Ajax is mainly used for that i.e. (without a page reload)
You have to use following step to achieve
Create a link and call a JavaScript function on it's onchange function
In the JavaScript function you have to call Ajax request.
Update the div in your ajax response.

Categories