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.
Related
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
We are using a third part web app which does not allow or have an API yet, this third party app is basically a membership registration website and each member belongs to a specific category.
I need to use these category in our internal system and so far I have been manually adding the category in a drop down menu of a form as soon as a new category in created in third party app.
Since there is no access to an api so I am wondering if it is possible to crawl the third party app where the dropdown menu is and copy the entire dropdown menu over to our internal site.
I wish i can show you the efforts I have made so far but I am stuck on how to even begin this. I did however search online but all I could find is how to copy a dropdown on a same page.
Any push to the right direction will really be helpfull, the technologies I am working with is PHP and JS
I don't think CORS is going to help you here, as it's function is to provide a legal/safe way of sharing web resources across different domains (i.e. images/css files/web fonts), not data.
If there is no API for the data you need, you are almost certainly limited to scraping the data out of the web page.
You can do this by first issuing a request for the page to obtain the html, then searching/parsing the html to find the drop-down menu, then finally parsing the menu items to obtain a list that you can use for your own drop-down.
So, some pointers:
Obtain page html - See PHP: how can I load the content of a web page into a variable?
Parse html - See PHP Parse HTML code
Of course how easy this ends up being depends on many factors, e.g.
Can you just request the page containing the drop-down, or does the
web app need authentication? You may need to refine the curl request
as appropriate.
Can you easily identify the html drop-down, e.g.
using a unique id tag. If so, you could use
DOMDocument::getElementById, otherwise you may need more complex
logic to parse the page html and find the menu.
Either way, it should be possible to achieve - just remember that the third-party app is not under your control, and as such may be subject to changes that break your program.
LATEST UPDATE:
Added in retrieval of value, and we hide parse warnings using internal_errors.
Here's a simple PHP script that will print out the text and value of each of the drop-down options:
<?php
libxml_use_internal_errors(true);
$html = file_get_contents('http://example.com/');
$domdoc = new DomDocument;
$domdoc->loadHTML($html);
libxml_clear_errors();
$menu = $domdoc->getElementById('tid');
$options = $menu->childNodes;
foreach ($options as $option) {
echo($option->nodeValue)." - ".$option->getAttribute('value')."<br>";
}
?>
I'm playing around with Apache Cordova and I want to implement a search box that can search in a list or something similar (local database?). I want it to be local so that the app does not require an internet connection to search.
The way I want it to be set up is that it need to be able to search for both the name of the item and a number.
Example 1:
A user searches for: "Honda". He will then be sent to a page where information about "Honda" will be diplayed.
Example 2:
A user searches for the id: "1337". He will then be sent to the page containing information about "Honda".
So "Honda = 1337" and "1337 = Honda" if you guys understand?
The question:
I'm wondering what solution would suite my needs for this project?
or there any frameworks out there for this?
Thanks in advance!
It depends on what you want to have the search box and submit to be like.
One way is to use this really great tool http://ivaynberg.github.io/select2/ it can load data from database (using either ajax or load all of your data and only filter them) and shows them in selectbox. You can have submit button or something like that next to your selectbox.
Other way might be to use http://www.datatables.net/ it has search box, which can load data to table using ajax where you can have additional information and submit button for sending user to specific page.
There is plenty of other tools for this kind of problem, I used these two and I can say
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.