I have a page showing a large number of words. For each word I can run a non-trivial database query (left joining a few tables, for example). I would like the result of that query to be shown in a popover when I click on the word.
Running all the queries when the page is generated is not really an option as it would take a long time and be a bit wasteful.
Ideally, I would have a setup where, when clicking on the word, I somehow send a query to the server which would respond with the query result. I would then display the query result in the popover.
I am a beginner when it comes to webdev, but I imagine I am not the first person to have this use-case.
What would be the easiest way of obtaining the effect I have described above?
I am using popover.js (via Bootstrap 4). The server is written in Django, if it matters.
Since there is no code, I will explain what you need to do:
1 - Have a function on a specific URL that will receive a POST, do the query, and return the result (on a JSON)
2 - Have an Ajax post on your page that is triggered when you click on the word. That will make the request to your function (#1), and render the result on the popover.
Let me know if you need more details
Related
For example there is a table like in this link https://leetcode.com/contest/weekly-contest-309/ranking
How to access the database from where it is coming. Like let's say to get whole ranking table at a place
I tried reading HTML file but didn't get it
One extension scrapes the table only
How can we achieve this?
There is no simple answer here - it really depends how is it implemented on the server side. As rv.kvetch pointed you can get part of result from url:
https://leetcode.com/contest/api/ranking/weekly-contest-309/?pagination=1®ion=global
You can notice pagination query parameter here, indeed you can access second page, third page and so on. Sometimes there is some parameter like page_size implemented on server but it doesn't look like that case.
So to access full table you probably need to iterate over that pages and glue the results.
EDIT: How to get such url for some page?
Open your favorive browser, run web inspector (usually right click - inspect) and go to network tab, where you can find all requests sent during page rendering.
Yesterday I have asked the same question and got only one answer (which I tryed, see below). I'm not sure why it got downvoted. I have deleted it and am not trying again, trying to be clearer, and stating what I have tryed until now.
I have a lot of data I want to display in an OpenUI5 applicatinon using sap.ui.commons and sap.ui.table libraries. As a backend server I use CherryPy which provides me the data (JSON) read from a SQLite databse. The backend is implemented in that way that the calling application provides an offset and and the number of rows it wants, beginning at that offset. I have already done so with another framework (w2ui).
This logic I need to reimplement with OpenUI5. What I have tryed so far:
Unfortunatly sap.ui.table.Table does not provide a event that is fired when the user scrolled to the end of the current table data. Else I simply could request more data into the Model (currently it's sap.ui.data.json.JSONMoel) from the server. I don't know whether it is possible to create such an event myself.
Pagination does have events, when the page was changed and which I could use to request further data. But the the controls at the bottom (arrows, page numbers) are only displayed for the current data. So if I load as many rows as one page could hold, a arrow button for the next page is not displayed. If I load data for two pages, it shows page numbers 1, 2 and arrows. But the next page arrow on page 2 is disabled, since there is no data for page 3. It also would add a new page number everytime data was added. One does never know how many pages there actually are as long as not all data was fetched.
The third option I read in this StackOverflow question. Here I am not quite sure if this is what I want. Although the question poster has exaclty the same problem as I do. Using ODataModel, if I understand it correctly, it still does load all the data from the backend but only renders the data that is visible for the user. I'm not quite sure how I would use that as I need. I don't know how it would automatically tell me the offset and number of rows. It is bound to the table model.
So my question would be which modules allow me to implement server communication as described.
EDIT
As for option 3, according to the comments I am doing it wrong. After creating a table
var oTable = new sap.ui.table.Table("table", {
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
threshold: 50,
toolbar: oTableToolbar
});
I bind the table data model as follows
var oModel = new sap.ui.model.odata.ODataModel("get_table_data_oui5", true);
sap.ui.getCore().setModel(oModel, "TableModel");
oTable.setModel(oModel);
oTable.bindRows("TableModel>/");
The function get_table_data_oui5 exposed by CherryPy is called and the only parameter it receives is a string $metadata (except when I add own parameter). It does not receive $top and $skip and no values to them.
EDIT 2
These are the function calls I can see within Firefox and Chromium. Nothing except the string $metadata is transfered. I'm sure I'm doing something wrong here but I don't know hat. If I have read correctly all I have to do is bind the model to the table.
Firefox:
Chromium:
I'm fairly new in web design/code and I'm trying to figure out/learn how to write script that would execute my table filter. As I found out this would be easiest to do in PHP since all data comes from table itself (and not MySQL DB).
Here is example of HTML with test table and some filters I would like to implement, but I've been having problem with writing PHP script which would work properly.
http://www.bonemachineonline.com/test
(I uploaded example on my own site)
I would appreciate if someone could help me out with this in anyway! Writing example or explaining how/what to do. Anything is more than appreciate!
Try using jquery dataTable().
You can refer the below link
Jquery-dataTable()
You have 3 approaches for data filtering.
If the table is filtered by default, and all the data are not loaded, take the (1) or (2).
If you load the whole table each time, take the (3).
Approaches
(1) Server side, with page reloading : your user checks filters, then clicks on a submit button. You get all the checked filters and you send it to your PHP. Server side, you retrieve the filters and remake your query (SQL or other in your case).
(2) Server side, with AJAX : exactly the same mechanism, but you send the filters to your PHP with an AJAX request, wait a response, remove your table and remake a table with the new data.
(3) Client side, with JavaScript only : when your user checks a filter, you trigger the change event and hide the matched elements in the table.
Some tips
For the approaches (2) and (3), jQuery could be very useful.
For the approach (3), you can use a library. Here: 35+ Useful jQuery Filter and Sort Plugins.
For the approach (1), if in your case the data are in a PHP array, you have a lot of functions to manipulate this array in function of your filters. Here: Array Functions - Table of Contents.
I'm writing a program in Python that needs to use a site's advanced search options. Specifically, the search page is the NVC advanced search page . I know the names of the projects and versions I need to search for, so ideally the program would select the project names and versions numbers from the dropdown lists, then return the results page(s).
I'm totally unfamiliar with HTML and Javascript, and I'm fairly new to Python, so I don't know if there's a way to 'click' these dropdown menus via Python, then return the results. The fact that the Javascript makes an Ajax call further complicates the situation, since I can't just load the page's source and parse out the list of project names and version.
Can anyone with some Python/Javascript/Ajax experience send me in the right direction?
An example use of this program would be that I start out with the project "glibc' and its version number '2.3.6' The program would make sure that this combination is listed at all (which isn't guaranteed), then return the results page (which has about 13 results).
The Mechanize Python library is perfect for form automation. There is an example of how to edit and submit forms on the examples page.
If a human user is using that search page, they click on one of the product links, which then load the list of products from another page, e.g.:
http://web.nvd.nist.gov/view/vuln/cpe/cpe-chooser?index=0&component=Vendor
This page is unfortunately not using JSON, so they have some custom javascript parsing for the response. The data from this response is then displayed as a drop-down for the user. When the user selects a product, the browser selects the correct value, so that when the form is submitted, it will be part of the query. e.g.:
http://web.nvd.nist.gov/view/vuln/search-results?adv_search=true&cves=on&cpe_vendor=cpe%3A%2F%3Aa-a-s_application_access_server
In this, cpe_vendor=cpe%3A%2F%3Aa-a-s_application_access_server is the important part. The part before the = sign is the field name, the part after is the selected value (which originally came from the ajax request). The funny %3A bits are URL-encoding.
So you don't actually need to interact with the page, since you know the names of the vendors and products for which you want to search; you just need to look up the field name (cpe_vendor for vendors) and the value for the specific products/vendors (cpe:/:a-a-s_application_access_server for my example above), then do a request to the normal search URL.
The advanced search options page sends the options via GET to the results page, giving you the URL (linebreaks mine to make it clearer):
http://web.nvd.nist.gov/view/vuln/search-results?
adv_search=true&
cves=on&
cve_id=&
query=&
cwe_id=&
cpe_vendor=cpe%3A%2F%3Aian_bezanson&
cpe_product=cpe%3A%2Fa%3Aian_bezanson%3Adropbox&
cpe_version=cpe%3A%2Fa%3Aian_bezanson%3Adropbox%3A0.0.3_beta&
pub_date_start_month=0&
pub_date_start_year=2005&
pub_date_end_month=2&
pub_date_end_year=2009&
mod_date_start_month=2&
mod_date_start_year=2007&
mod_date_end_month=9&
mod_date_end_year=2009&
cvss_sev_base=&cvss_av=&
cvss_ac=&
cvss_au=&
cvss_c=&
cvss_i=&
cvss_a=
It would then take a bit of sleuthing to figure out what bit of the url is what information from the form but that should let you then just scrape the results page.
How would I search an SQL database when a user makes a selection in a dropdown list. I know how to change/add text to areas using some javascript but not with a SQL search as well.
Ideally I don't want to be changing pages in this process as I'm thinking they won't be sticking on a single option in the drop down for long.
Cheers in advance. =)
You have to add an onchange event listener to the dropdown box. When the user selects an option, an AJAX (XmlHttpRequest) should be send to the server. A serverside script, a PHP page for example, should parse the parameters (after checking).
When these parameters have been checked, they should be escaped for this reason. Perform a search query, parse the results, and send the output back to the client (the user, browser).
Useful links:
http://www.php.net/manual/en/ref.mysql.php
https://developer.mozilla.org/en/xmlhttprequest
you should look into implementing Ajax for this.
Here's a simple example and tutorial utilizing a drop down list that fetches information from a database on selection, without changing pages :)
http://www.w3schools.com/php/php_ajax_database.asp
You should also look into using jquery for your Ajax requests as stated in the answer below. (Do more with less code).
See also:
http://15daysofjquery.com/quick-and-dirty-ajax/14/ for a simple jquery Ajax tutorial.
Before you render the page, make sure you do a grab the info you want presented from the database.
select distinct NAME, ID
from tableName
You can use the information obtained here to generate the html for a drop down box. Include something to the effect
<select onchange="doAction(this.value);">
<option value="userID">userName</option>
<option value="userID">userName</option>
<option value="userID">userName</option>
...
</select>
Then perform an AJAX request back to your site. Get your information from your second query to the database, and return with the information you need. When you perform your second query (and in general) you have to protect yourself against injection attack vectors. The best start for this is to make sure you have encoded(HTML, SQL) correctly.
Without more information I can only really give you the below as a guide. It uses the jQuery load function to put the contents of one page into an element. Note that .load cannot be used across domains.
$("#searchButton").live("click", function() {
$("#results").load("/SearchResults.php?s=" + $("#searchBox").val());
});
Also note that you should use something to filter out HTML tags to prevent SQL injection, as well as taking other measures.